Optimise Images for Load Times and SEO

Optimising images for SEO

Optimise Images for Load Times and SEO

Images are one of the most easily overlooked aspects of SEO. Designers spend huge amounts of time crafting graphics for use on the web, but that’s far from the end of the process.

Google believes that “Great image content is an excellent way to build traffic to your site“, and they’re absolutely right. Having high quality content that appeals to users drives traffic and increases the number of visits to your website. I mean, who would want to look at blurry slow loading graphics on a web page?

Get the best out of your images and avoid pitfalls affecting quality and unnecessary bulky sizes by running through these quick tips to help improve loads times and overall boost page ranking from understanding the problems that can plague your images, tools you can use, and how to affectively apply them.

Feed the Bot

Know what your image’s problems are before deciding to make alterations“, this should be the tagline for anyone looking to dive in and make changes to their site’s content as you could make matters worse.

Feed The Bot, the free web based solution “image sniffing hound”, is a handy tool to check graphics against basic SEO techniques. The alt tool for example looks at alt text and dimensions, then checks them against standard SEO guidelines.

Feed the bot images

Stop Crunching

Uploading images into WordPress creates copies by “Crunching” it into several different copies:

  • Thumb Nail
  • Medium
  • Large
  • Full Size

By default Crunching is on, so when images are dragged into WordPress it starts Crunching away.

Uploading new media

Each copy takes up space and slows down your site. If you don’t plan on using these images stop them being generated by going into Settings -> Media, then filling out each image size field with “0”.

Changing media settings for images

Quality Levels

WordPress’ default image quality is 90%, but it can be controlled by using plugins such as WP Resized Image Quality. Remember that this changes copies, not the original image.

WP image quality plugin

Alternatively if you don’t want to install a plugin then use the following code in Appearance -> Editor -> functions.php file:

add_filter('jpeg_quality', function($arg){return 95;});

Change “95” to the image quality level of your choosing. Remember, when you upgrade your theme you will need to reapply this code.

Take Back Control!

Uploading compressed images to WordPress to build resized copies at a higher quality will not only generate a larger image size, but won’t improve quality. Instead use a program like Adobe Photoshop to create images at the sizes you need, then use a compression tool.

Photoshop saving for web

In Photoshop go to File -> Save for Web -> Preset -> JPG, then choose your image quality.

Compress, Compress, Compress

Before uploading images, first compress them with tools like ImageOptim. Tests show that compression tools can reduce sizes by up to 50%.

ImageOptim

Or if you prefer plugins try Smush.it for WordPress, it does the same thing as ImageOptim but streamlines the process by automatically compressing images and improving performance.

Image Context

Search engines love descriptive and easily defined images, they help find relevant content for users. Context like titles, descriptions, alternative text, and captions are all read and play apart in being pulled for search results.

When uploading images in WordPress be sure to include context for your images or go to Media -> Edit (image), then add info of what the image is explaining or showing.

Image context

Let’s put it into practice by applying this to an image.

  • Title Attribute: Blue Cartoon Robin
  • Caption: Minimalistic cartoon blue robin
  • Alternative (Alt) Text: Cartoon blue robin
  • Description: Side view of a blue minimalistic cartoon robin

Cartoon blue robin

Remember to pack your keywords together and be as descriptive as you can without overloading on information. Try to avoid repeating the same content if you can with each attribute.

Site Maps = Road Maps for Search Engines

Search engines, like Google and Bing, want to know about all the pages and posts on your website that you want listed on their search results. Site maps are essentially road maps for search engines, helping content be found.

Udinra for WordPress is a site map just for your images, pinging search engines automatically with a roadmap to find your graphics.

Where to now?

As search engines are constantly refining their algorithms to deliver better results it’s up to websites to produce original and high quality content that genuinely helps users.

For more insight on how to keep to-to-date with SEO and image optimisation standards, checkout Google’s Optimizing Web Graphics.

Enjoyed this blog post?

  • With page load times being so important, this is a great overview of a critical piece of the puzzle!

  • Thanks for the tips about wordpress crunching and quality level settings!