Image size matters. When it comes to websites the image can make or break a perfect score on a performance test. Most of the popular web site builders come with image compression features. You can check your website by running a google page speed test here. If your website is loading slowly its important to improve speed so users won’t leave. Very often I find optimizing one beautiful hero image makes all the difference.

Spend time on image optimization when user experience matters

If you haven’t taken your photos yet check the settings on your phone. Make sure your camera is taking the best quality photos. Photos can be made smaller and quality can be sustained. Low quality photos cannot be made high quality.
If you need a photo optimization tool, Canva offers a decent image editor and you can save images in different quality and sizes.
Reviewing and addressing these tips on each page of your site will ensure basic image optimization. These items are important for SEO and long-term health of a site. Conversley, for landing pages where the primary source of traffic is paid advertising, some items may not be as important.

User experience matters if you want people coming back to your website. On the other end of the spectrum, if you have no competition and people need your services, you may be fine with a slow site.Otherwise, Optimize! Make it better than your competition. Show off your expertise with content creation that the others aren’t doing.

  • Make the file name descriptive

    Use descriptive filenames that include relevant keywords. Avoid generic names like “IMG_0001.jpg”. Use hyphens (-) to separate words

  • Use the proper file type for the image

    Photos: Use good JPEG or Webp. Use under 100kb as a general rule. I large captivating image can be saved as a webp to get the highest quality at the lowest file size.
    Images with transparency like logos or graphics with flat colors save your file as PNG. These image sizes should stay roughly the same on all screens.
    For Illustrations or vector graphics that can scale in size for screen size variations use SVG .

  • Use original photos

    Photos should be part of your brand story. People love seeing happy people they can relate to. Ask happy customers if they would like to be on your website. Cell phone photos are fine! Most phones have pro settings and put out high quality images that need to be compressed.
    If you can’t have people in photos and you’re not sure what photos to use, Think of your website as how you want people to feel when they come to your business. The best “after” photos are the next best thing to humans.

    Blue lights under fountains coming up from the walk way in downtown TampaWebp photo at medium quality

  • Check image size

    Resize images to their display size on your website. Large images slow down loading times. Use online tools or your image editing software to resize.
    Stick to common image aspect ratios, like 16:9 for landscape and 9:16 for mobile. Square, 1:1 works for Instagram posts at 1080 X 1080 px. A general rule for photo file size is under 100kb.

  • Image quality

    Use compression tools to reduce file size without sacrificing significant quality. Many online tools and photo editing software offer compression options. Aim for a balance between quality and file size.

  • Alt Text

    Write informative alt-text descriptions for each image. Include relevant keywords but avoid keyword stuffing. – Describe the image content and its function on the page (decorative flower for visual interest”). – Alt text is crucial for accessibility and SEO.
    Keep in mind images are to be described for visually impaired users.

  • Responsive design

    Ensure images display correctly on all devices (desktop, tablet, mobile). Use responsive design techniques or choose image formats that scale well.

  • Lazy loading

    Consider implementing lazy loading to improve page load times. Lazy loading delays the loading of images below the fold until they are scrolled into view. This should be a feature from a speed optimizer plug-in