Images are an essential element when it comes to grabbing readers’ attention and breaking up long paragraphs of text. Images educate, emphasize, and elaborate. The more images used, however, can gradually slow your browser’s speed, increase the size of your pages, use up storage on your server, and ultimately increase the page load time for your visitors.
The answer is optimization.
The first thing to pay attention to is the image format. Most images will allow you to save them in various file formats. Typically JPEG or PNG are used for the web. JPEGs are prime for photographs as they compress the colors well and don’t lose quality. PNG works better with screenshots or graphic images. Because of PNG’s higher compression quality, however, those files will be larger. Sometimes this payoff is worth it for the clear quality. Even though GIFs are usually used for animated files, the format also can be used for low-quality pictures with few colors or smaller files. Avoid putting larger pictures in GIF format, as this usually significantly reduces the quality.
Another aspect to note is which category the image compression is: lossy or lossless. A lossy compression loses quality while taking up a small amount of space. Lossless gives you the exact quality of the original image but uses a greater amount of memory.
JPEG = Lossy
PNG = Lossless
GIF = Lossless
Most graphic editing applications allow you to save your image for the internet, usually labeled something like “save for web & devices.” You want to select the lowest size possible without losing image quality. Try to keep your images under 70kb.
Decorative images such as buttons, banners, and borders can take up more space than you can afford. Avoid this by putting simple patterns in GIF or PNG-8 format to reduce the overall size. Look for areas where you can replace pictures (such as colored sections or backdrops) with CSS styling. Are you using a wallpaper background image? Try playing around with the size. There is usually a bit of wiggle room between how much you can decrease the size before it starts visibly decreasing the quality as well. A neat trick is to crop the center of the background image out or replace it with a filled color. This will reduce the size considerably and, as long as the content covers the center, your viewers will not notice a difference!
