How Optimizing Images Can Speed Up Your Website

Marc Avila

When you visit a website, you might not even think about how quickly it appears on your screen. Ideally, you don’t even notice because it’s so fast you’re immediately consuming content and finding the information you came for. But if there’s a delay, the clock starts ticking on your attention span — and the same is true for customers and prospects who visit your website.

Images have a lot to do with how quickly a web page loads. When you view a website, your browser downloads each and every image individually. And when an image is really large, there’s a good chance the file is also large and will directly affect the time it takes for the page to load.

Load Times Affect SEO

Google Page Speed Insights takes points off for images that aren’t optimized.  Google wants to promote the websites with the best user experience along with the most relevant content. Slow websites hurt you in two ways:

  • They result in a poor user experience, which can cause people to abandon your website before they become customers or even learn anything about your company.
  • These lowered metrics in turn affect your Google ranking as the search engine punishes websites with bad UX.

Optimize Images to Streamline Load Times

There are a couple of ways to optimize images to make them less unwieldy for browsers to load. One is to remove any unnecessary metadata attached to the image, such as the camera model and the date the photo was taken. This information isn’t displayed on the website, but it is encoded into the information your browser reads.

Another way to decrease load times is to reduce image quality so it’s not as detailed and therefore not as large. Images really should be as small as possible without affecting the visual experience; anything over 100 KB is probably pushing it, and most should be much smaller. Be sure to upload multiple images optimized for different screen resolutions so mobile devices aren’t trying to load desktop sized images.

Plugins can help, too. We often use a WordPress image optimization plugin called EWWW Image Optimizer. This plugin removes any image meta data and does a batch image optimization on existing images. Another plugin, Imsanity, puts image size restrictions on the website so anyone making changes can’t unknowingly upload a massive image.

Finally, PNG files tend to be higher quality, which results in larger file sizes. If you’re looking for ways to reduce file size as much as possible, stick to JPGs.

Watch Your Image Names and Tags

As you’re stripping unnecessary data from your images, make sure the information that remains is useful. Image names should be recognizable by humans and should describe the image well. Use underscores instead of spaces. For example, “Company_Logo.jpg” is a good way to name the logo you use on your website.

Alt tags should be used the same way — to clearly describe what’s in the image. Screen readers, such as those used by visually impaired people, read these tags and use them to describe the image. You also get a small SEO boost with them, but it’s about accessibility more than anything.

Questions to consider before you redesign your website
Related Posts
When Creativity and Technology Merge: Jon Langberg, Designer and Sales Consultant
Effective Website Maintenance and Updates
Outdoors Man and Avid Golfer Ryan Kohler, UI/UX Designer