Optimising Images for the Best User Experience

Website design is more than just a matter of creating a website that looks to good to the human eye, it must also look good to the Search Engines, at least if you it want to get good rankings and hence all that lovely traffic.

As the blog below mentions, there are a lot of ways that Google measures a site’s ‘right’ to good rankings (over 200 they say), two of these being how good the ‘User Experience’ is and how fast the page loads (these two of course being highly related).

The biggest ‘item’ on any web page is of course the images, and as they are something that cannot be left out (pictures say a thousand words they say, not to mention the fact that Google ‘expects’ to see them) it is important that they are optimised and named correctly.

The blog also covers the importance of choosing the right images for a site and that the correct format type is used as using the wrong type can really adversely effect load times.

For the full article on optimising images for the Google and the best user experience click the link

While it’s easy enough to remember Google’s biggest algorithm changes in recent years and the far-reaching effects of each, you may not realize that Google’s famous proprietary algorithm changes hundreds of times per year.

Google and others include page load time and site speed in their rankings for key design metrics. This means image optimization cannot be overlooked in your web design and development processes.

Taking time to optimize images is a win-win for both SEO and user experience. As with every other aspect of web design, image optimization is partly intuitive, partly data-driven best practice, and overall A/B-testable. Web designers should follow these five image optimization best practices:

  1. Move image optimization into the initial design phase of the project.

Making decisions about size, complexity, and selection of images at this stage can help ensure that pages aren’t overly “heavy” when they launch.

For example, while not specifically an “image” optimization, the use of a large number of web fonts can add greatly to page load time as browsers load these assets. For an optimal UX, limit your selection of web fonts.

  1. Select the appropriate file format for the type of image you have.

The number one mistake designers and developers make is using either the wrong or the same image format for every image on a site. Follow these suggestions to determine the correct format for a given image:

  • Photographs should almost always be JPEG files, as should other complex images with thousands (or millions) of colors, subtle color gradations, and no need for image transparency.
  • Vector images with minimal complexity are often best served as SVG (Scalable Vector Graphics), which offers the bonus of being able to scale images for desktop, tablet, mobile, and retina displays with no loss of quality using a single web asset.
  • Logos, illustrations, icons, and similar images that have fewer than 256 colors are typically best optimized in GIF, as long as they require only mask-based transparency.
  • The versatile PNG format is necessary for images that require alpha transparency and layering. PNG files tend to be larger than the other formats, depending on how well they are optimized.
  • Simple motion without sound — and smaller than a few hundred pixels in height and width — are often best produced as an animated GIF rather than a video file.
  • A large library of vector-based icons that change infrequently may be best served as a CSS2 web font in a format such as TTF/OTF or WOFF.
  • In some cases, drawing or animating content via CSS and JavaScript can be a significant optimization.
  • For collections of images related to a website’s user interface, navigation, and general browser layouts, you may achieve further optimization creating a single larger image “sprite” with all these images and then select appropriate image assets out of that via CSS or JavaScript. This can reduce the number of round trips and new connections required by the browser, although this is likely to become less important as HTTP/2 adoption increases.
  1. Optimize images by eye.

Once you’ve chosen the appropriate format, eyeball it to make sure that the image is as compressed as possible without sacrificing quality.

JPEG files employ lossy compression, which means that you must balance quality and file size when optimizing. The difference between a “maximum” 100 percent quality JPEG and a “low-quality” 30 percent JPEG can be astounding. Try taking the quality down low and then dialing it up 10 percent at a time until you reach an acceptable level. Be sure to double-check against the original asset for a final test.

When optimizing PNG files, try to use PNG-8 formats wherever possible. These limit you to a 256-color palette, but with the benefit of a significantly smaller file size than a PNG-24 file. Recent tools, such as ImageAlpha, optimize alpha transparency in PNG-8 images, in part by converting them to PNG-8 images that include alpha transparency.

  1. Determine what’s best for your website.

Every website, scenario, and audience is different, so there isn’t a specific number that your images should add up to.

The most accurate way to determine this is to calculate the total page weight for your site by summing the size of all of the assets (HTML, CSS, JavaScript, images, video, and others). Then you can use a calculator tool to find out how long content may take to download to your users’ browsers. Note that actual download and render time may vary by 25 to 50 percent more than this estimation.

Having said that, use images under 200KB when possible — smaller file size is always better! Try to get your total page weight well under 1 megabyte.

  1. Give those images meaningful names.

Even though we are primarily talking about file size optimization for images, don’t forget the basics. Website images named “red-shiny-car-part.jpg” contain more SEO information than “image1.jpg.”