Optimize images for websites
Optimizing images before uploading them to the site can have a huge impact on the speed of the site itself and its indexing: fast websites rank higher in search engines and have better conversions. This operation is a process of saving and publishing images in the smallest file size possible without reducing the overall quality of the image. The key to achieving a satisfactory result is finding the perfect balance between the smallest file size and acceptable image quality.
The three factors that play a huge role in image optimization are:
- Image File Format (JPEG vs PNG vs GIF)
- Compression (more compression = smaller file size)
- Image dimensions (height and width)
File format
To keep things simple, we tend to use:
- JPEG for photos or images with many colors,
- PNG for simple images or when transparent images are needed,
- GIF for animated images only,
- in recent years a new compressed format has appeared, WEBP
Compression
The ideal image for the web should have a resolution of 72 dpi (dots per inch) and be in RGB color mode. A 300 dpi image has an excessively high resolution for the web and can only be visible and appreciated in print and not on the web.
Image dimensions
Typically, these photos have a resolution of 300 DPI and sizes starting from 2000 pixels and above. While high-quality photos are suitable for printing or desktop publishing, their large size makes them unsuitable for websites. Generally, online we tend to use images that have a width of around 1200 pixels (with proportionate height especially for posts), or at most we use the full HD format which reaches a width of 1980 pixels.
Warning: it is always a good thing to resize images, but it is essential that their proportions are not altered!
Online apps
There are several websites that allow you to optimize images directly online.
Here is an overview of the main ones:
TinyPNG
TiniPNG automatically applies the ideal compression method to reduce the file size of the image to the maximum possible amount without quality loss.
The site allows you to upload images with a maximum size of 5mb and therefore, if you start from larger images, you must first resize them with other tools and then upload them.
Kraken.io
The interface of this tool is quite simple and you can upload multiple images in bulk with just one click. Furthermore, the image quality remains almost completely unchanged. It supports various formats such as JPG, PNG, SVG and Gif. The downside is that the limits of the free version are a bit stringent.
CompressJpeg
This online service reduces JPG images automatically. It allows you to process up to 20 images simultaneously. You can adjust the compression settings; when loading it will also tell us the compression percentage and we can select the single image to see the differences between the uncompressed and compressed version.
ImageOptim
This application can be downloaded and installed on a PC and allows you to set the image size and saving quality, while maintaining the original file format.