How to Optimize Images for Your Website

Why is Optimizing Images Important?

Every time a visitor goes to your site, their computer or device has to download all of the photos and graphics on the page. Not optimizing images before you upload them can cause long load times and frustrate your site visitors. According to Pingdomif your site takes longer than 2 seconds to load, you risk visitors abandoning your site. Image optimization can also help ensure you meet Google’s web vitals.

Website Images Best Practices

  • Avoid using PNG images, unless they are necessary.
    PNGs are typically used for logos or icons that need to have a transparent background. You should never use PNGs for full-width images or portraits. If possible, use SVG images instead of PNGs for logos or icons that need transparent background.
  • Ensure alt text is added correctly.
    Alt text describes an image and its context. It’s an important factor for SEO and accessibility standards. Follow the guide here to determine the correct use. Hubspot also provides a guide on best practices when writing alt text descriptions.
  • Don’t use images in place of text elements.
    If you are embedding an image on your site that contains text, it’s not readable by search engines or screen readers and can create a poor mobile experience. Instead, use real web elements (headings, text blocks, links) to recreate the image or graphic.
  • Optimize JPEG images before uploading to your website.
    (see our guide below)

How to Optimize Images

Follow the steps below, to ensure that images you upload to your website are optimized. If you already have images on your site, you can follow the same steps to re-upload them and replace the unoptimized versions.

  1. Use a photo editing tool to resize your images.
    Find your original photos on your computer or hard drive. Use a photo editing tool to resize these photos to a max width of 2000px if they are going to be full-width or 800px if they are not full-width. Photoshop is a good tool for this, but if you don’t have Photoshop you can use MacOS Preview or an online tool like picresize.
  2. Use a tool to shrink or compress your images.
    If your site only has a few photos, we recommend using the free tool TinyPNG to optimize your resized photos. If you have more than 20 pictures on your site, we recommend investing in JPEGmini. This will allow you to batch the optimization process for photos (and resize them at the same time, skipping the first step above). Optimizing your images doesn’t effect the quality of them, it simply shrinks the file size and allows them to be loaded on your site more efficiently.
  3. Upload the photos to your website.
    If you already had these photos on your site in their larger sizes, first update your pages or posts to use the newly uploaded ones, then delete the old ones.
  4. WordPress Optimization.
    This typically happens in the background, but ensuring that an image optimization plugin is running and processes your images after you upload them is critical. We recommend and use ShortPixel.

Using this workflow dramatically decreases the image size and page load time, especially for image-heavy sites. 1000 KB = 1MB, so we saved a lot of space by optimizing this image and as you can see, did not sacrifice any image quality:

A line of pumpkins in a field, side by side, comparing image optimization features.

Do you need assistance optimizing images for your website?

We’re here to help! Email [email protected] and we can set up a training screen share call or help you bulk optimize existing images on your site.

Share

Share on linkedin
LinkedIn
Share on twitter
Twitter
Share on facebook
Facebook
Share on email
Email