Technology

Optimizing Images for Faster Loading Webpages and SEO Benefits

Everyone that comes to Crow and Raven wants a high-performing website that’s both user-friendly and ranks high in search engines. They want us to sprinkle some SEO magic across their domain to get them ranking higher in Google search results and fix their embarrassingly high bounce rates. While we can do all that, most clients are surprised to learn that they have the power to make huge improvements without (gasp!) a complete redesign. The “low hanging fruit” of SEO and improved usability is simply image optimization.

 

According to surveys done by Akamai and Gomez.com, nearly half of web users expect a site to load in 2 seconds or less, and they tend to abandon a site that isn’t loaded within 3 seconds. 79% of web shoppers who have trouble with web site performance say they won’t return to the site to buy again and around 44% of them would tell a friend if they had a poor experience shopping online.

—Neil Patel

 

Let’s talk about your image problem.

There are many ways to improve site speed. You can hire someone to help you cache content, minify code, move blocking scripts, improve server response time, and a few dozen other well-known technical approaches to cutting page load time. However, unoptimized images are more than likely your biggest offender. Images usually account for the largest bulk of downloadable bytes on any given web page. On many sites, as much as 60-80% of page overhead is due to images that have to be downloaded and rendered.

Take a look for yourself. Google’s PageSpeed Insights and Pingdom Tools are two great tools to get a high-level idea of your website’s performance. If you’re not scoring above an 85, you should see what you can do to change that. You’ll probably find fixing unoptimized images will take you far.

The good news is this is an easy fix.

 

 

JPG, GIF, and PNG (Raster) Images

These types of images usually make up the majority of your site’s visual content. Well, ideally, you could replace some of these with pure CSS, but that’s a different post. For now, let’s assume you have a few headshots of your staff, some product images, a few icons, and that gorgeous “hero” image displayed prominently at the top of your page. Those are most likely going to be in JPG or PNG format.

Maybe you had a graphic designer create the images or perhaps you downloaded some stock photography. Either way, there’s a good chance the image you’re uploading to your website is simply way too large (pixel size and file size). That extra “quality” isn’t being utilized by the browser. So, it just ends up slowing your page’s load speed. We’re not going to go to in depth on screen resolution versus print resolution. You can go into more in-depth on that topic in this article. However, the basic idea is to essentially remove the unnecessary bloat from your image file.

With raster images, the overall pixel size is a good place to start. Let’s say you downloaded a stock photo from a website, and the overall dimensions of the image are 5000 pixels x 3000 pixels. That’s a pretty big image. Often images from stock sites are a super-high resolution because they are often used for printed purposes. However, the placement of the image on your website is only 800 pixels wide. That’s 4200 pixels (of extra width) you don’t need. So, open your favorite image editor and resize the image to something closer to what you actually need—remember to preserve the aspect ratio when you crop or resize. If you don’t have a graphic designer or Photoshop, you can easily use one of the many online photo editing tools to accomplish this. Pixlr is the one we recommend to clients all the time, and it’s really easy to use.

OK, now you have a smaller image, but it’s still not optimized. Your photo editor’s “save for web” functionality just isn’t good enough for the job. You’ll want to run your image through a dedicated optimization tool for the best results.

At Crow and Raven, we’re Mac users. So, the ImageOptim downloadable application is our go-to tool for raster image optimization. However, if you’re on Windows, you can use a tool like FileOptimizer.

 

 

There are, also, many online tools to help you optimize your image files. This is not a completely exhaustive list, but a few worth checking out are Compressor.io, TinyPNG, Optimizilla, Kracken.io, and ImageRecycle.

Finally, if you’ve run your page through the Google PageSpeed Insights tool, you can download the optimized images directly for the report.

SVG (Vector) Images

Scalable Vector Graphics, or SVG, is a vector image format. When used properly, SVGs can deliver incredible quality in a very small package.  We’re not going to cover how or when to use SVG images in this post. For this article, we're going to assume you’ve already acquired an SVG image from your graphic designer or maybe you created the image with a tool like Adobe Illustrator. Now, before you upload that image to your website, you’re going to want to optimize it. Fortunately, there are a few ways to do that with free online tools.

SVGOMG is our go-to tool for SVG image optimization. It always provides the best results for reducing the file size of SVG file. That being said, there are quite a few options to consider with the interface, but you’ll most likely just go with the defaults.

 

SVGOMG Screenshot

 

If you feel like a technical Luddite and SVGOMG feels too much for you, try the site https://www.svgminify.com/ for the most brain-dead user interface you could imagine. Upload your file, and download the optimized version.

Conclusion

In summary, image optimization can significantly improve the user experience and give you some additional SEO juice...all without too much effort. It’s, also, worth mentioning that image optimization shouldn’t just be reserved for website redesigns. You should share this article with your content managers and graphic designers. Then they can keep the site updated with optimized content.