Optimizing your images on a website:
A large percentage of the content on a website is images. It is necessary to choose the right pictures and make sure that they all have the same style and are displayed correctly on the website.
But that’s not all. It is also necessary that the images are not only of quality but that they are correctly optimized for the website. This way, you can improve the loading speed of the website.
And as you should know, the loading speed is an essential factor to determine if the user experience has been good.
Optimizing images for the website is no big deal. It is pretty simple to achieve, from saving an edited image to placing it within the website using HTML and CSS.
And in this article, we give you some simple techniques to put into practice to improve your website’s speed by using optimized images.
1-Use the save option for optimizing.
Saving images for the website is one of the features that photo editors such as Photoshop have. Choosing this option for saving makes the program compress the files, and therefore they weigh less.
But it all depends on the quality you put on your images; obviously, the higher the quality percentage, the heavier they are. For this reason, you will have to make choices, even if you save your photos for the website.
You will have to find the balance between image quality and file size. On average, every 10% of the image has made it 30% to 50% heavier.
Tools like Photoshop allow you to generate several copies of different quality in the same window and compare them side by side.
This way, you can see a big difference between choosing quality 70 or 80 for your photos. Don’t set a standard value for all your images, do this check for each one of them as some photographs have more intense colors that usually require a higher quality adjustment.
2-Use the correct format.
For the website, four image formats are used: JPEG, PNG, GIF, and SVG. JPEG is the most common format for images and illustrations; probably most of the photos on your website are in this format. PNG has transparency, so it is used for designs where this feature is needed.
It can be used, for example, to place openwork images of people or objects within the composition. On the other hand, GIF is used for animations. And SVG is a vector format usually used for logos and icons.
When you are saving your image for the website, make sure you choose the correct format. While PNG is a web-friendly format, it tends to be slightly heavier than JPEG, so if you have simple images that don’t use transparency, save them in JPEG.
3-Choose progressive-loading JPEGs
When saving for the website in Photoshop, you have several options. The ones you take into account are the quality and the file format you want to save. If the format changes, many of the options you had in the first place change and are adapted to the type of format you are saving.
If you are working with JPEG, you may have noticed a series of checkboxes (indicate where).
One check box is essential and may not have paid particular attention to until now. We are referring to the one that indicates “Progressive.”
This indicates that the image loading is done progressively, and at first, the user can see a pixelated image that becomes clearer. Opposite to the “progressive” download, we find the “optimized,” where the download is performed from the top row of pixels downwards.
Although opting for the “optimized” upload may seem the best option, mainly because of the name, we recommend choosing the “progressive” upload.
The difference in file weight is minimal between the two options, progressive loading gives the user the feeling of speed on your website.
So, even if the images take longer than two seconds to load, they will know that at least the website is loading if the user notices these pixelated images.
EN 
ES