Skip to content

Speed Up Your Website by Optimizing and Converting Images

• By Jasper Frumau

One of the most effective ways to improve your WordPress site or WooCommerce store loading time is by optimizing your images. A faster site not only enhances user experience but also improves SEO and conversion rates.

Optimize Existing Images

If you already have images on your site, there are several ways to reduce their file size without sacrificing visual quality:

  • Online tools like TinyPNG or Squoosh offer quick drag-and-drop optimization.
  • Offline tools like Photoshop or Affinity Photo allow manual compression and resizing for better control.
  • WordPress plugins such as Imagify or ShortPixel can automatically optimize all images in your media library.

If you can optimize before uploading I would do that. Saves you money on commercial plugins and also saves you server resources as that is what some of the tools use for conversion.

Use Modern Image Formats: WebP and AVIF

Modern image formats like WebP and AVIF offer better compression than JPEG or PNG, which means smaller files and faster page loads.

WebP: Widely Supported and Easy to Implement

WebP is supported by all major browsers and has been natively supported by WordPress since version 5.8. It offers a significant file size reduction with minimal loss in quality.

Use a plugin like Imagify to automatically convert existing images to WebP. It also allows you to keep the original files and adds the necessary server rules for Apache or Nginx to serve WebP versions when available.

Alternatively, convert your images before uploading using tools like:

Preview App (Mac)

Preview app on macOS (File > Export > Format: WebP) allows for saving as webP using these steps

  1. Open the image in Preview: Double-click the image file to open it in Preview. 
  2. Access the Export option: Go to the “File” menu and select “Export”. 
  3. Choose WebP format: In the Export window, select the “Format” dropdown menu and choose “WebP”. 
  4. Adjust quality (optional): You can adjust the quality settings (if available) to control the file size and quality of the WebP image. 
  5. Save the file: Choose where you want to save the converted WebP image and click “Save”. 

Photoshop / Affinity Photo

Photoshop, whether you use an older non subscription model or the latest in a package offers you export options. And it is available for both Macs and Windows PCs. Affinity Photo is also available for both operating systems and can be purchased as a one off price package. I like Affinity Photo personally, but I am okay with using other command line tools as well which I will discuss next.

Command Line Conversion

cwebp – a command-line tool from Google that allows for easy conversion using your terminal. Here a command example to convert jpg or in this case a png to webP:

 cwebp -q 80 hero.png -o hero.webp

You can install the tool with Homebrew on your Mac and with other packing tools on other operating systems.

AVIF: The Next Generation Format

AVIF offers even better compression than WebP but is not yet as widely supported by all browsers. Still, it’s gaining traction and can be a good choice for image-heavy sites where maximum performance is crucial.

Final Tips

  • Always test your site’s speed using tools like Google PageSpeed Insights or GTmetrix.
  • If you’re using a CDN, make sure it supports modern image formats and lazy loading.
  • When possible, serve images in the exact size they’re displayed to avoid unnecessary scaling.

By combining image optimization with modern formats like WebP and AVIF, you will improve your site’s performance and offer a smoother experience for your visitors.

Leave a Reply