Images are a vital part of the online experience, as visual content produces better recall, people follow visual instructions better than written ones, and increases engagement on Facebook and Twitter.
But, not all images we see online are created equally. Without proper optimization, the huge file sizes can disrupt load time.
Here’s a quick and easy guide to use to help you make sure you’re handling all your images the right way.
Why is Image Optimization Important?
Whether you’re using an existing image or part of the 30% of marketers creating your own visuals, optimization is important to page load time, which is crucial for user experience and plays a role in search engine ranking. Up to 40% of visitors will abandon your site if it takes longer than three seconds to load, and 50% of your visitors (or more) may be on slower mobile connections! That’s why you want to strike a balance between image quality and file size.
Beyond size and quality, image optimization also factors in the file name, alt attributes, thumbnails, and image sitemaps. Addressing all of these is key to getting the most from your images.
A Closer Look at Web Image Formats
There are many different image formats you can use, but for the sake of time, I’m only going to focus on the three most popular and widely used options you’ll see online.
JPEG/JPG
A JPEG, which stands for Joint Photographic Experts Group, or the organization that created the standard, is a type of lossy graphics file. It can also use the JPG file extension.
PNG
PNG stands for Portable Network Graphic. It uses lossless compression, so that no information is lost when images are compressed. The PNG format was created to address limitations with the GIF format, and to provide another image format without a patent license. It is a format that supports image transparency, which is particularly useful for web use. You can choose between PNG-8, which handles a maximum of 256 colors, or PNG=24, which allows for unlimited colors.
GIF
GIF, or Graphics Interchange Format, is an image format that allows for animation. Animated GIFs are everywhere these days – especially easy to find on Facebook and Twitter. You can have single image GIFs, or combine several images to create an animation. Like JPGs, GIFs are lossy images.
Choosing the Best Format for the Task
Unfortunately, there’s no universal file format that makes the best choice for web content. JPG is best for still images and photography. GIFs can only display a maximum of 256 colors, so they are great for simple animations, graphics with flat colors, and graphics without gradients. PNG handles still images and transparency.
JPEG format is best for all images that contain nature scenes or photographs with smooth intensity and color variations exist. PNG is best for images that need transparency, and for images with text and objects with sharp contrasts (think logos) and use GIF for anything that is animated.
Let’s take a look at an image in each of the three file formats – kept at the same image size for easier comparison. We’re using a free stock photo from Canva at 300×300 px.
The JPG is 81 KB.
The PNG is 116 KB.
The GIF is 55 KB.
Not much of a visible difference to the eye, but massive differences in the image size. Now, let’s use compression to shrink the file size even more, and watch what happens to the image. In this case, the GIF would be the best to use, simply because it’s the smallest one.
Compression Tools
There are a number of image compression tools available to help you shrink your images without compromising the quality. Some include:
I opt to use Compress.io any time I have a GIF to compress, because I can handle the three major file formats with the same tool. In addition to GIF, it also supports SVG files, which are on the rise for logos. Plus, before you download the compressed version, there’s a slide tool that lets you compare the original version to the compressed version.
Here are the same images again. I’m willing to bet you won’t be able to see a difference in any of the images.
The compressed JPG is 10.89 KB, for an 87% reduction in file size.
The compressed PNG is 39.93 KB, for a 67% reduction in file size.
The compressed GIF is 21.39 KB, for a 61% reduction in file size.
After compression, we have a significant reduction in all the file sizes, but the GIF is no longer the smallest file size. JPG is the clear winner here, with about half the file size.
Each image you work with online should be compressed so it takes up less space on your hosting plan and allows it to load faster for the end user.
Image Names
To increase the chance your images show in the appropriate Google Images searches, you should use clear, descriptive names, rather than the auto-generated filenames from your camera. The image above, for instance, could be rose.jpg, or red-rose.jpg, or red-rose-in-hand.jpg.
Alt Attributes
Your Alt attributes are what screen readers use to describe images to those who have vision issues, making them critical for ADA compliance. Here’s what Google says about what makes a good alt tag:
“Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image. […] When choosing alt text, focus on creating useful, information‐rich content that uses keywords appropriately and is in context of the content of the page. Avoid filling alt attributes with keywords (keyword stuffing) as it results in a negative user experience and may cause your site to be seen as spam.”
Image Sitemaps
Images give Google a great deal of information about the content on your website. If you include an image sitemap, you can give Google additional details about the images, along with the URLs of images the crawler may not otherwise discovery. Image sitemaps can contain URLs from other domains so you can use a content delivery network (CDN) to host your images.
Focus on image optimization as part of your search engine optimization strategy, and you’ll reap many benefits.
