How to Optimize Images for Your Website

Why is image optimization important?

• Page Speed: large (read unoptimized) images slow down your website and users won’t hang around to wait for them to load. While reducing your bounce rate (the rate at which people “bounce” off your site and don’t click around) is incentive enough, search engines also reward speedy sites with higher rankings.
• Improved User Experience: users expect websites that are easy to use and rooted in solid design. Quality, optimized imagery helps solidify what your business is all about and helps attract potential clients. 
• Cost Savings: optimized images won’t use as much bandwidth, which can lead to a cost savings on hosting and other content delivery costs.
• Boosted Search Rankings: with improved page load times and performance as ranking factors on Google, there is a clear correlation between optimized images and higher search engine rankings, leading to more web traffic and users on your website.

How to optimize images for the web

When preparing your images for your website, there are two main areas that need attention. The first involves optimizing images for search engines, using relevant keywords, while the other hones in on image size balanced by image quality.

Optimization for Search Engines

Add Strategic Keywords to File Names

Make Use of the Alt Tags

Alt tags are the text alternative to images when they either don’t load or are otherwise not visible on your website. While alt tag is important for web accessibility, they are also used by search engines to discern what the image is all about. A well-crafted alt tag is really just a descriptive phrase using a few well-placed keywords.

WordPress has a small meta box for the alt tag when you upload your image and I recommend crafting the alt text upon upload. That way, WordPress will automatically fill the alt tag whenever you use it, saving you time from having to re-enter each time the photo is used.

Here are a few tips to get you started optimizing your images’ alt tags:

• Describe the image as specifically, but as succinctly, as possible.
• Use your keywords. If it is readable and makes sense, go ahead use your keywords; don’t just list out keywords.
• No need to include “image of,” “picture of,” etc. This is assumed so save your text characters.
• Consider adding product data. If you have products on your website, consider including a SKU or other unique identifier.

Optimizing Image Sizes, Types and Resolutions

Resize Images Appropriately

Nothing slows down a website like large images. A good rule of thumb is that the larger the image dimensions, the larger the file size. One of my favorite (and frankly underused) features of WordPress is that the system will automatically generate different images sizes and fit the best one into the appropriate use case (i.e., it won’t load an original, large image on a small phone screen. Rather, it will load the smaller size it generated upon uploading.)

I recommend images that are around 2400 pixels wide, as then we have given WordPress quite a bit with which to work– it can drill down and create the smaller images for you; it cannot create a larger image from a smaller one, so best to start bigger.

But that’s not the only thing to consider when readying your images for the web.

Choose the Right Image File Type

You’re probably familiar with the more common image file types, how do you know which to use? Here are some things to keep in mind to help you pick the right type:

• JPG/JPEG: This is likely the most common type you should be using and will work well for most of the images on your site. The exception is for any images that have a transparent background, as it won’t retain the transparency. JPGs are perfect for website photos because they allow for higher quality images and smaller file sizes. However, they aren’t as great for things like logos, graphics, or other imagery that doesn’t use a spectrum of color the way a photo does.
• PNG – When images don’t have a lot of color or are transparent, PNGs are ideal. PNGs, however, will require larger file sizes, so it’s best to use these types minimally. Anything created in a graphics program that does not include a photo is perfect for a PNG.
• GIF – Like it’s big sister JPG, GIFs can compress images into smaller file sizes, but at the expense of color. I don’t actually use GIFs all that often, because I can get what I need from either JPG or PNG but GIFs can be great for animation (looking at you, animated memes!).
• TIFF & EPS – In terms of quality, TIFF and EPS are the best but they are not compressed so they are huge in size. (Out of the box, WordPress doesn’t let you upload these, either, for the very reason that they are not optimized). That said, you can make killer JPGs and PNGs from a TIFF or EPS.
• WebP – WebP is the newer file type kid in town. WebP can handle compression of both photos and those with transparent backgrounds so it’s a nice blend between JPGs and PNGs and can create smaller, richer images that load quickly.

Helpful Image Optimization Tools

While I prefer to optimize photos myself using Photoshop, I know not everyone has a photo editing program that does that, so here are a few online tools to get you going:

• Ewww Image (free WordPress plugin)
• Smush (free WordPress plugin)
• Imagify (free up to 20MB a month) and can integrate with WordPress via plugin
• Tiny PNG (online tool, up to 20 images at a time, max of 5MB each) or use their WordPress plugin and get ~100 images/month free)
• Optimizilla (online tool, up to 20 images at a time)

Conclusion

Now that you have an image optimization roadmap, I recommend optimizing images at the time of upload and chipping away at previous images. Taking the time to use these best practices will elevate your brand and boost your SEO, so it’s worth the time to include quality images that are accessible, user-friendly and fully-optimized.