Image Optimisation

Images can enhance user engagement, but they can also slow down your website if not optimized. Optimizing images improves page speed and can help them rank in image search.

High-Impact Steps (Most Important)

1. Choose the Right File Format
   • Why: Different file formats offer different levels of compression and quality. Choosing the right format ensures optimal image quality with the smallest possible file size.
   • How:
     • JPEG (Joint Photographic Experts Group): Best for photographs and images with many colors. Offers good compression, but it’s a “lossy” format, meaning some image data is lost during compression.
     • PNG (Portable Network Graphics): Ideal for graphics, logos, illustrations, and images with transparency. It’s a “lossless” format, meaning no image data is lost during compression, but file sizes can be larger than JPEGs.
     • WebP (Web Picture): A modern image format developed by Google that provides superior compression (both lossy and lossless) compared to JPEG and PNG, often resulting in significantly smaller file sizes. Use this whenever possible, especially if your target audience uses modern browsers that support WebP.
     • SVG (Scalable Vector Graphics): Best for logos, icons, and simple graphics. SVG files are vector-based, meaning they can be scaled to any size without losing quality. They are typically very small in file size.
2. Compress Images
   • Why: Compressing images reduces their file size, leading to faster page load times, which is crucial for both SEO and user experience.
   • How:
     • Lossy Compression: Reduces file size by removing some image data. This is generally acceptable for photographs where a slight loss in quality is not noticeable.
     • Lossless Compression: Reduces file size without sacrificing any image data. This is preferred for graphics, logos, and images where preserving quality is critical.
     • Tools:
       • Online Tools:
         • TinyPNG: (tinypng.com) Excellent for compressing both PNG and JPEG files.
         • ImageOptim: (imageoptim.com) A Mac app for lossless image compression.
         • Compressor.io: (compressor.io) A web-based tool that supports lossy and lossless compression for various file formats.
         • Squoosh: (squoosh.app) A powerful web app from Google that lets you compare different compression methods and formats in real time.
       • Desktop Software:
         • Adobe Photoshop: Offers various image optimization options when saving for the web.
         • GIMP: A free and open-source alternative to Photoshop with image optimization features.
3. Resize Images
   • Why: Using images that are larger than necessary (in terms of dimensions) increases file size and slows down page load times. Resize images to the exact dimensions they will be displayed on your website.
   • How:
     • Don’t Rely on HTML/CSS to Resize: Don’t simply upload a large image and then use HTML or CSS to shrink it down in the browser. This still forces the browser to download the full-size image.
     • Use Image Editing Software: Use image editing software (like Photoshop, GIMP, or online tools) to resize images to the appropriate dimensions before uploading them to your website.
     • Consider Multiple Sizes: For responsive design, you might need to create multiple versions of the same image at different sizes for different screen sizes (see “Responsive Images” below).
4. Use Descriptive File Names
   • Why: Descriptive file names help search engines understand the content of your images and can improve your image SEO.
   • How:
     • Keywords: Use relevant keywords in your file names, but avoid keyword stuffing.
     • Hyphens: Use hyphens (-) to separate words in file names (e.g., “black-labrador-puppy.jpg”).
     • Avoid Special Characters: Stick to lowercase letters, numbers, and hyphens.
     • Be Concise: Keep file names relatively short and to the point.
5. Optimize Alt Text
   • Why: Alt text (alternative text) is crucial for accessibility (screen readers use it to describe images to visually impaired users) and SEO. It provides context to search engines about the image content.
   • How:
     • Be Descriptive: Describe the image accurately and concisely.
     • Keywords: Include relevant keywords, but only if they naturally fit within the description. Don’t force keywords into alt text.
     • Don’t Duplicate Captions: If you have a caption that describes the image, you don’t need to repeat the same information in the alt text. You can use the alt text to provide additional context or a slightly different description.
     • Keep it Relatively Short: Aim for under 125 characters if possible.
     • Example:
       • Image: A photo of a golden retriever playing fetch in a park.
       • Good Alt Text: “Golden retriever playing fetch with a red ball in a sunny park.”
       • Bad Alt Text: “dog park photo golden retriever best dog” (keyword stuffing)

Medium-Impact Steps (Important)

6. Responsive Images
   • Why: Responsive images ensure that the appropriate image size is delivered to each user based on their device and screen size, improving page load times and user experience.
   • How:
     • srcset Attribute: Use the srcset attribute in the <img> tag to specify multiple image sources at different resolutions. The browser will automatically choose the most appropriate source based on the user’s screen size and pixel density.
     • sizes Attribute: Use the sizes attribute along with srcset to give the browser more information about how the image will be displayed at different viewport sizes. This helps the browser make even better decisions about which image source to download.
     • <picture> Element: Use the <picture> element for more complex scenarios, such as art direction (serving different image compositions for different screen sizes) or when you need to specify different image formats (e.g., serving WebP to supporting browsers and JPEG as a fallback).
7. Lazy Loading
   • Why: Lazy loading defers the loading of images that are off-screen until they are needed (when the user scrolls down to them). This improves initial page load times, especially on pages with many images.
   • How:
     • loading="lazy" Attribute: Add the loading="lazy" attribute to your <img> tags to enable native browser lazy loading (supported by most modern browsers).
     • JavaScript Libraries: For more advanced control or to support older browsers, you can use JavaScript libraries like Lazysizes or Lozad.js.
8. Leverage Browser Caching
   • Why: Browser caching allows the browser to store static assets like images locally on the user’s device. This means that when the user revisits your website, the images can be loaded from the cache instead of being downloaded again, resulting in faster page load times.
   • How:
     • Configure Your Server: Configure your web server to set appropriate HTTP headers (e.g., Cache-Control, Expires) that tell the browser how long to cache images.
     • Content Delivery Network (CDN): CDNs automatically handle caching and can significantly improve image delivery speed for users around the world.
9. Use Image Sitemaps
   • Why: Image sitemaps help search engines discover and index your images, which can improve your image SEO.
   • How:
     • Create a Separate Sitemap: You can create a separate sitemap just for your images or include image information in your existing XML sitemap.
     • Include Image Details: In your image sitemap, include details about each image, such as the URL, title, caption, and license (if applicable).
     • Submit to Google Search Console: Submit your image sitemap to Google Search Console to help Google find and index your images.

Lower-Impact Steps (Still Beneficial)

10. Consider Image CDNs
    • Why: Image CDNs (Content Delivery Networks) can significantly improve image loading speed, especially for users who are geographically distant from your web server. They also often provide automatic image optimization features.
    • How:
      • Choose a CDN Provider: Popular CDN providers include Cloudflare, Fastly, Akamai, Amazon CloudFront, and Google Cloud CDN. Some CDNs specialize in image optimization, such as Cloudinary and Imgix.
      • Integrate with Your Website: Follow the CDN provider’s instructions to integrate the CDN with your website. This usually involves updating your DNS settings and modifying your image URLs.
11. Add Schema Markup (for Rich Snippets)
    • Why: Adding schema markup (structured data) to your images can help them appear in rich snippets in search results, potentially increasing click-through rates.
    • How:
      • Use JSON-LD: The recommended format for implementing schema markup.
      • Relevant Schema Types: Use schema types like ImageObject, Product, or Recipe, depending on the context of the image.
      • Include Image Details: Provide details about the image, such as the URL, caption, author, and license.
      • Test Your Markup: Use Google’s Rich Results Test tool to validate your schema markup.
12. Optimize Image Metadata (Optional)
    • Why: Image metadata (EXIF, IPTC) can contain information about the image, such as the camera used, date taken, and copyright information. While not a major SEO factor, optimizing this metadata can provide additional context to search engines and image search platforms.
    • How:
      • Use Image Editing Software: Most image editing software allows you to edit image metadata.
      • Be Mindful of Privacy: Be cautious about including sensitive information in image metadata, as it can be publicly accessible.
      • Remove Unnecessary Metadata: Some tools can help you remove unnecessary metadata to reduce file size.

By following these image optimization guidelines and using the recommended image sizes, you can significantly improve your website’s performance, SEO, and user experience. Remember that image optimization is an ongoing process, so regularly review and update your images as needed.