How to Prepare Images for Publishing Online
How to choose the best image size for your website
Preparing images for publishing online helps your website load faster. It only takes two steps. First, you should change your image's width and height using a photo editor, for example, a free online editor. Then you should compress the image using an image compressor—this will reduce the file size.
Smaller images load faster. Image size depends on two parameters:
1. Image width and height in pixels—images whose size is 3000 х 2000 pixels are bigger than the 300 x 200 pixels images).
2. Content of an image—the more details and colors an image contains, the bigger its size is.
We recommend that you prepare an image for publishing online by cropping it first, then removing the unnecessary details from it to make it load even faster.
1. Image width and height in pixels—images whose size is 3000 х 2000 pixels are bigger than the 300 x 200 pixels images).
2. Content of an image—the more details and colors an image contains, the bigger its size is.
We recommend that you prepare an image for publishing online by cropping it first, then removing the unnecessary details from it to make it load even faster.
What is the perfect image size?
When uploading to Tilda, all large images are automatically resized down to 1680 pixels. Images smaller than 1680 pixels retain their original size.
As it is an automized process, it may decrease your image's quality for the sake of it loading faster. That's why you may want to edit photos manually: this way, you can preserve their quality better.
As it is an automized process, it may decrease your image's quality for the sake of it loading faster. That's why you may want to edit photos manually: this way, you can preserve their quality better.
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 should upload images that are the size they should appear on the website. If the photo is not the size it is supposed to be in the page layout, the browser will compress or stretch the image automatically. It poorly does either, so the photo may appear blurry.
To find out the size of your image, add a text block to the page, enable the grid in the block settings, and you will see how many columns the image will occupy. The width of one column is 60 pixels, the distance between columns is 40 pixels.
To find out the size of your image, add a text block to the page, enable the grid in the block settings, and you will see how many columns the image will occupy. The width of one column is 60 pixels, the distance between columns is 40 pixels.
How to minimize the size of an image file?
You can use special software that compresses images by combining similar colors. Such programs combine colors in such an intricate way that you won't be able to tell the difference between "before" and "after." They can reduce the size of your image by up to 70%.
You might want to check out:
You might want to check out:
- TinyPNG
- Squoosh
- Kraken
- Compressor
- Compressjpeg
- ImageOptim (for Mac users)
Image optimization examples
Let's use this image by Christoph Bengtsson Lissalde that we have downloaded from Unsplash, to show how image optimization works.
Original image size: 4405 х 2478 pixels, file size: 3.5MB.
Original image size: 4405 х 2478 pixels, file size: 3.5MB.
Let's upload the image to Tilda as it is. The image will be cropped to 1680 x 945 pixels, and its size will become 1.2MB.
Open the original file in Photoshop, change the image size to 1680 х 945 pixels and save it—its size will be reduced to 832KB.
Upload the photo to TinyPNG to compress it, and you will get an 353KB image.
Open the original file in Photoshop, change the image size to 1680 х 945 pixels and save it—its size will be reduced to 832KB.
Upload the photo to TinyPNG to compress it, and you will get an 353KB image.
We have managed to preserve image quality.
