Image Load Times

Optimise Images For Faster Load Times And Better SEO

Posted on March 16, 2014 ยท Posted in Web Design

As designers, we’ll often spend a huge amount of time carefully crafting graphics for use online, but you shouldn’t think that’s the end process. to get the best results from your graphics you need to understand what happens next.

This tutorial will show you what WordPress does when you upload images and the steps you can take to improve the results you achieve. I’ll also help you to avoid pitfalls that will adversely affect you image quality or make your files unnecessarily bulky.

Currently, images are one of the most overlooked aspects of search engine optimisation (SEO).

Throughout this tutorial I will cover some effective techniques you can apply to drive much more traffic to your website.

I’ll also help you decide when to leave things to an image-management plug-in and other occasions when you might want to be a little more hands on.

1. WHAT’S THAT CRUNCHING

When you upload an image using ‘Upload New Media‘, you might have noticed the progress bar says ‘Crunching‘. this is when WordPress is creating copies of your image at the three sizes specified in your ‘Media Settings‘ and any theme-specific custom image sizes (e.g. Twenty Twelve creates a 624px wide image).

2. CUTTING THAT OUT

If you’re never going to use these image copies you can put a ‘0‘ in each of the image size fields under ‘Media Settings‘ and they won’t be generated.

Remember they won’t be available for selection when adding images to your pages or posts. Your theme may still generate it own custom sized images though.

3. A QUALITY DECISION

If you decide you want to keep those images you’ll need to be sure that they achieve the right balance between quality and size. The default image quality percentage is 90, but you can change this to any value you prefer either by installing a plug-in or by adding a single line of code to your theme.

4. JPG IMAGE QUALITY

This plug-in adds an option to the ‘Media Settings‘ page to enter a value from 1 to 100 for the generated copies of your image. Setting above 95 are unlikely to deliver a perceivable improvement and setting 100 will significantly increase file sizes.

Remember that neither this plug-in nor the default WordPress set-up will change the quality of your original image.

5. WITHOUT A PLUG-IN

If you don’t want to add a plug-in to your website then you can simply add the following code to your theme’s ‘function.php‘ file.

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

Ideally you’ll be working with a child theme and add this line to the ‘function.php‘ through ‘Appearance>Editor‘ and selecting ‘Theme Functions‘.

Remember that you’ll need to reapply this edit if you replace it with an updated version of your current theme in the future.

6. LOST FOR GOOD

If you upload a heavily compressed JPEG to your website and allow WordPress to generate resized copies at a higher quality setting you’ll end up with larger file sizes, but with no improvement in quality. You’ll achieve the best results by creating the finished file you need from the highest quality original image you have.

7. THE HOME MADE APPROACH

If it’s manageable I’d normally recommend that you compress your images at each of the sizes you need them on an individual image basis, and then upload them to WordPress. This way, you are in complete control over the quality/file size decision and you are only creating files you’re actually going to use.

8. DIGGING A LITTLE DEEPER

Digging a little deeper into JPEG compression and how your chosen optimisation tool works to achieve the best results. For example, you can dramatically improve the quality of some images by understanding the JPEG’s 8px grid. There are also some great tips online, for instance, try using a quality setting of 51 in Photoshop.

9. A NEW ENGINE

If you do intend to use WordPress to generate resized images from your own original image you should try out the ImageMagick Engine plugin. This replaces the standard graphic library used by WordPress and can deliver hugh improvements in quality of resized images. ImageMagick is not widely supported as the default WordPress setup so be sure to read the installation instructions.

10. FOR THE GREAT GOOD

All major search engines constantly refine their algorithms to deliver better results. Orginal, high-quality content, including images that are genuinely relevant to the searcher should be your number one goal. Always keep your target audience in mind. Create new images and follow the other search engine-friendly techniques listed here and you’re much more likely to achieve good SEO results.

11. PROVIDE SOME CONTEXT

Pages and posts that make consistent good use of related keywords within the image attributes and in nearby headings and body text will rank better than pages just containing images.

That portfolio or case study you’re working on will really benefit from creating some associated text. Your audience will appreciate it and Google et al will reward you for it to.

12. RESIZE AND THEN UPLOAD

Search engines penalise slow-loading websites. Avoid using WordPress to scale down image on the fly. Instead workout the width and height you want the image to appear, create the very best, most optimised, suitably cropped and finished version of the image that you can – then upload it.

13. USE FRIENDLY FILE NAMES

Be sure to give your images search engine friendly file names with relevant keywords separated by hyphens. It’s tempting to overlook this, knowing the file name won’t appear on the finished page – however , it will be seen when the page is crawled by search engines. See for yourself with a Google image search. you’ll find the most of the top results contain the phrase that you used.

Image Info – Firefox users can view even more information about an image by simply Ctrl/right-clicking on an image and choosing to ‘View Image Info’ from the pop-up menu.

14. IMAGE TITLE ATTRIBUTE

The text you type here will pop up after hovering over the image for a second. Make it snappy and descriptive. Avoid repeating the same content for different attributes and using ‘stop words’, these are words that search engines tend to ignore and therefore offer no benefit. Search for stop word lists online to find out more.

15. WHAT’S THE ALTERNATIVE?

The attribute was originally developed for visually impaired users so keep this in mind when crafting alt text. If you couldn’t see the image and hoped for the most helpful and richest experience, what alternative text would you wish the designer has provided? Type that text here and Google will reward you for your trouble.

16. CAPTIVE CAPTIONS

Along with the page title, lead and section heading, captions are the most commonly read words on a page. A good caption clearly identifies the subject of the image. Without being redundant, it is succinct, establishes the picture’s relevance to the page, provides context for the picture and draws a reader’s attention into the page. Why wouldn’t you use one?

17. THE DESCRIPTION ATTRIBUTE

This text appears on any page where the ‘Attachment Post URL’ option is used when inserting an image and may also be used by some themes. If search engines can crawl to it they will take it into consideration when assessing a website’s relevance.

18. WIDTH AND HEIGHT

When you add an image using ‘Add Media’ the width and height are included in the code so the browser can build the page more quickly. if you add image code yourself be sure to include these attributes to avoid slowing up your page.

19. REMEMBER TO FEED THE BOT

This handy tool from Feed The Bot examines the images on a page, gives you information about the alt attribute and whether the width and height are set right. This can highlight issues with images you might have overlooked, like alt text for your website logo. be prepared to edit your theme template to fix that one.

20. VISIT THE GALLERY

The ‘Gallery’ contains a variety of options you can easily set to suit your requirements and take better control of your images. Highlight include the ability to exclude specific images. highlights include the ability to exclude specific images, which is useful if you don’t want a featured image to appear again in your ‘Gallery’.

Here’s a full list of options. Remember the WordPress Codex is your friend.

21. DON’T JUST STOP THERE!

This tutorial has covered some of the most popular image management techniques. but there’s still more you can do. media handling improvements are likely to feature heavily in future WordPress releases and developers are always finding innovative ways of extending the platform’s functionality like Lazy Load, which only loads images when they are visible to the user.