Formatting images for publication online


How to choose the best image size for your website
For quicker site downloads, it is always better to format images: first, change the width or height of an image with a graphics editor (or a free online editor), and then use a specialised programme to compress the photo. This will reduce the file size.
Smaller images load faster. The size of an image depends on these two parameters:
1. Width and height of an image, in pixels (images whose file size is 3000х2000 pixels are bigger than the 300x200 pixel images);
2. Content of an image. The more small details and colours a photo contains, the bigger its size.

Begin image optimisation with cropping an image, then remove unnecessary information to help it load even faster.
What is an ideal image size?
All large photos uploaded to Tilda are automatically resized down to 1680 pixels. Pictures smaller than1680 pixels retain their original size.

As an image is compressed using software, the quality of the photo decreases while the file size is not sufficiently reduced.
Before uploading a big-sized image to Tilda, reduce the image size down to at least 1680 pixels if measured relative to its longest border.
Ideally, you want to load images of the same size as they will appear on your website. If an image size differs from that on a mockup site, the browser will compress or stretch the image. It will appear blurry, as a result.

To find out your image size, add a block to the page, enable the grid in the image settings of a text-based block, and see how many grid squares the image will occupy. One column should measure 60 pixels, distance between columns — 40 pixels.
How to minimize the file size of an image?
There are special programmes out there that decompress images by combining similar colours. These programmes are quite clever — you can't notice any difference between the "before" and "after" images while the file size of an image could be reduced by up to 70%.

You might want to check out ImageOptim (must be downloaded on your computer) and TinyPNG (works online).
Examples of image optimisation
Let's use this image by Christoph Bengtsson Lissalde that we have downloaded from Unsplash, to show how image optimisation works.

Original file size: 4405х2478 pixels, image size — 3.5 MB.
Let's upload the image to Tilda as it is. The image will be cropped to 1680x945 pixels, while its size will measure 1.2 MB.

Open the original file in Photoshop, change the image size to 1680х945 pixels, then save it — its size will be reduced to 832 kb.

Upload the photo to TinyPNG. As the result, image size was reduced to 353 KB.
We managed to retain the highest quality for the image.
Made on
Tilda