When optimizing images for the web, it is important to think about a couple things. You should consider size, pixels and format. According to an article by A Better Lemonade Stand, one of the most important things to pay attention to is the image quality to image size ratio. This makes images load faster on you site, which is crucial for users. In terms of format, there is JPEG, PNG and GIFs. But which one is the best option?
JPEGs are the most popular photo format. They are very versatile, as they can be saved as a low or high quality image. They also have the most colors and can handle those complex images with lots of shadows. JPEGs are often used for photography and product images.
PNG files can be saved in two ways. They can be saved as PNG-8 (with a limit of 256 colors) or PNG-24. The latter has more colors that result in a larger image size. One of its defining qualities is that PNG files can have transparency. PNGs are often used for things such as logos because it allows for transparency and a high quality image for a small file.
GIFs are used for small files with few colors. These files are constrained to only 256 colors. It is for this reason that they are the least popular choice for image formatting for the web.
Applying the Image Optimization Process
I’m going to walk you through how I took this image below through the image optimization process.
Without changing the actual height and width of the original picture (900 x 1200), I wanted to change the pixel size. Both the original image and optimized image were saved as a JPEG. In order to do this, I put the image into Adobe Photoshop and went to File > Export > Save for Web (Legacy). That pulls up a window that looks like this:
As you can see, I made no changes to the image size, but adjusted the quality to be 76 percent. The upper right image shows that the image has been condensed from 983 KB to 440 KB. Below, is the final image.
As you can see, there isn’t much of a physical difference between the two images. The qualities are very similar, but the real difference comes with loading time. The second image will be much easier to load onto your site. The average user waits three seconds for an image to load before giving up. By condensing the size of the image without sacrificing quality, you can get a faster load with basically the same image.
This process was very simple once I decided what the best option was. I knew that I wanted to shrink the image as much as possible without sacrificing image quality or size. I stuck with the JPEG format because it allowed for the most versatility with color and quality. I settled on the 76% quality because it was the highest I could go where the image was still able to shrink a significant amount without affecting the image quality.