How to Optimize Images for The Web and Performance

Trust us, you don’t want Google to hate your website. Fortunately, you can reduce the size of your images to improve your website’s performance.

One problem with reducing their size is that modifications often reduce their quality (which in turn can make visitors hate your website). This isn’t a bad thing as long as you don’t make them ugly.

There are a few tricks and techniques you can use to reduce the size of your images and keep them pretty enough to display proudly on your website.

So, let’s take a look at how to reduce the size of your images without making them ugly, and how to optimize images for web and performance.

What does it mean to optimize images?

Large images slow down your web pages, creating a less-than-optimal user experience. Image optimization is the process of reducing file size, using a plugin or script, which speeds up page loading time. Lossy and lossless compression are two commonly used methods.

The benefits of image optimization

First of all, why do you need to optimize your images? What are the benefits? There are many advantages to optimizing your images for performance. According to the HTTP Archive, images account for an average of 21% of the total weight of a web page. So when it comes to optimizing your site, after video content, images are by far the first place you should start!

It’s more important than scripts and fonts. And ironically, a good image optimization workflow is one of the easiest things to implement, but many website owners neglect it.

Average number of bytes per page (KB)

Here’s an overview of the main benefits:

  • It will improve your page loading speed (see our case study below to find out how it affects your speed). If your page takes too long to load, your visitors may get tired of waiting and move on. For more information on optimizing your page load time, see our detailed guide to optimizing page speed.
  • Combined with an excellent WordPress SEO extension, this will improve your SEO. Your site will rank higher in search engine results. Large files slow down your site, and search engines hate slow sites. Google is also likely to crawl and index your site.

As you can see, the first image above is 590 KB. That’s pretty big for a photo! It’s generally preferable for the total weight of a web page to be less than 1 or 2 MB. 590 KB would already be a quarter of that. The second image is obviously horrible, but it’s only 68 KB. What you need to do is find a happy medium between your compression ratio (quality) and file size.

So we’ve taken the image back at a medium compression ratio and as you can see below, the quality is good now and the file size is 151 Kb, which is acceptable for a high-resolution photo. This is almost 4x smaller than the original photo with low compression. In general, simpler images such as PNGs should be under 100 Kb or less for best performance.

Medium compression (high quality) JPG – 151 KB

3. Understanding lossy and lossless optimization

It’s also important to understand that there are two types of compression you can use: lossy and lossless.

Lossy: This is a filter that eliminates certain data. This will degrade the image, so you need to be careful about image reduction. The file size can be reduced by a large amount. You can use tools such as Adobe Photoshop, Affinity Photo or other image editors to adjust the quality parameters of an image. The example we used.

5. Resizing images to scale

In the past, it was very important to upload scaled images and not let CSS resize them. However, this is no longer so important as WordPress 4.4 now supports responsive images (not scaled by CSS).

Basically, WordPress automatically creates multiple sizes of each image uploaded to the media library. By including the available sizes of an image in a srcset attribute, browsers can now choose to download the most appropriate size and ignore the others. See an example of what your code looks like below.

Example of srcset-sensitive images in code

So, with more and more Hidi screens these days, it can be a good idea to find a happy medium. Let’s say 2x or 3x the size of the column or div on your website, but still smaller than the original size. The browser will display the right one according to the device resolution.

The WordPress media library creates thumbnails according to your settings. However, the original is always preserved and intact. If you want to resize your images and save disk space by not saving the original, you can use a free extension like Insanity.

WordPress media settings

Insanity allows you to set a limit so that all uploaded images are limited to a reasonable size, which is still more than sufficient.

Image optimization extensions you can use

Fortunately, with WordPress, you don’t have to do all the optimization or compression by hand. You can use extensions to do at least some of the work for you automatically.

There are several extensions that will automatically optimize your image files as you upload them. They’ll even optimize images you’ve already downloaded. It’s a handy feature – especially if you already have a website full of images. Here are some of the best extensions for optimizing your images for best performance.

It’s important, however, that you don’t rely solely on the extensions themselves. For example, you shouldn’t upload 2 MB images to your WordPress media library. This can lead to rapid consumption of your host’s disk space.

The best method is to quickly resize the image in a photo editing tool beforehand, then upload it and use one of the following extensions to reduce it further.

However, before committing to any of these tools or extensions, you should check that your web host doesn’t offer built-in tools to do the job for you. For example, Kinsta customers have access to a free image optimization feature that automatically creates optimized copies of all images.

However, before committing to any of these tools or extensions, you should check that your web host doesn’t offer built-in tools to do the job for you. For example, Kinsta customers have access to a free image optimization feature that automatically creates optimized copies of all WordPress images, which are stored for free. The smaller of the two image files is then served using Kinsta’s ultra-fast CDN to further increase speed. Customers can even choose between lossless and lossy compression to suit their needs.

1. Imagify Image Optimizer

Imagify Image Optimizer extension

Imagify is created by the same team that developed WP Rocket, which is probably familiar to most of you. It is WooCommerce, NextGen Gallery and WP Retina compatible. It also features a bulk optimization function, and you can choose between three different compression levels: normal, aggressive and ultra. It also has a restore function, so if you’re not satisfied with the quality, you can restore and recompress in a single click to a level that better suits your needs. There’s a free version and a premium version. With a free account, you are limited to a quota of 25 MB of images per month.

Getting rid of the original image and resizing your larger images can also be done with this extension.

Resize images in Imagify

Imagify also compresses images on their third-party servers, not yours, which is very important when it comes to performance. Imagify should not slow down your WordPress site.

2. Optimole

Optimole plugin

Optimole is a WordPress image optimization plugin that automatically reduces the size of your images without any work on your part. It has a big advantage when it comes to your site’s loading speed because it’s entirely cloud-based and never serves images that are larger than they should be, i.e. it displays the perfect image size for the visitor’s viewing window and browser.

What’s more, the plugin provides lazyload loading and efficient image replacement – it lowers image quality if the visitor has a slower Internet connection – which sets it apart from the rest. It also automatically detects the user’s browser and serves WebP format if supported.

All images compressed by Optimole are served via a fast CDN. You can try Optimole for free, or upgrade to the Premium plan if you need more bandwidth and processing space.

3. Optimus Image Optimizer

Optimus Image Optimizer plugin

Optimus WordPress Image Optimizer uses lossless compression to optimize your images. Lossless means you won’t see any loss of quality. It supports WooCommerce and multi-site and has a mass optimization function for those who already have large existing media libraries. It’s also compatible with the WP Retina WordPress extension. There’s a free and a premium version. In the premium version, you pay once a year and can compress an unlimited number of images. If you combine it with their Cache Enabler extension, you can also dive into WebP images, which is a new lightweight image format from Google.

4. WP Smush

WP Smush extension

WP Smush has a free version and a premium version. It will reduce the hidden information of images to reduce size without reducing quality. It scans images and reduces them as you upload them to your site. It also scans images you’ve already uploaded and reduces them too. It will bulk overwrite up to 50 files at a time. You can also overwrite manually if you wish. It will overwrite JPEG, GIF and PNG image types. File size is limited to 1MB.

  • It is compatible with some of the most popular media library extensions such as WP All Import and WPML.
  • It is compatible with some of the most popular media library extensions, such as WP All Import and WPML.
  • Images are optimized using lossless compression techniques, so image quality remains high.
  • It doesn’t matter in which directory you save your images. Smush finds them and compresses them.
  • Smush has an option for automatically adjusting the width and height of all images, so that all your images are resized in identical proportions.
  • 5. TinyPNG (also compressed JPGs)
  • TinyPNG extension
  • TinyPNG uses the TinyJPG and TinyPNG services (the free account lets you compress around 100 images per month) to optimize your JPG and PNG images. It automatically compresses new images and bulk-compresses your existing ones. It will convert CMYK to RBG to save space. It compresses JPEG images up to 60% and PNG images up to 80% with no visible loss of image quality. It has no file size limit.
  • 6. ImageRecycle
  • ImageRecycle – Image and PDF optimization extension
  • The ImageRecycle extension is an automatic image and PDF optimizer. It focuses not only on image compression, but also on PDFs. A very useful feature is the ability to set the minimum file size for compression. For example, if you have images with a size of 80 Kb, you can exclude them automatically.

6. ImageRecycle

  • ImageRecycle – Image and PDF optimization extension
  • The ImageRecycle extension is an automatic optimizer for images and PDFs. It focuses not only on image compression, but also on PDFs. A very useful feature is the ability to set the minimum file size for compression. For example, if you have images with a size of 80 Kb, you can automatically exclude them from compression. This ensures that images and files are never over-compressed. It also includes bulk optimization and automatic image resizing. Note: They have a 15-day free trial, but this is a premium service, and images are uploaded and compressed using their servers. They don’t charge by the month, but rather by the total number of images compressed, starting at $10,000 for 10,000.
  • 7. EWWW Image Optimizer
  • EWWW Image Optimizer
  • EWWW Image Optimizer helps you make your images smaller and your site faster with less hassle. With no size limit and plenty of flexibility for advanced users, you can use the default settings or completely customize the extension to your taste.
  • The free mode allows unlimited JPG compression and WebP conversion and is ideal for hobby sites or blogs just starting out. All EWWW IO users can use the bundled optimizer to compress their image.

7. EWWW Image Optimizer

EWWW Image Optimizer

EWWW Image Optimizer helps you make your images smaller and your site faster with less hassle. With no size limit and plenty of flexibility for advanced users, you can use the default settings or completely customize the extension to your taste.

The free mode allows unlimited JPG compression and WebP conversion and is ideal for hobby sites or blogs just starting out. All EWWW IO users can use the grouped optimizer to compress their existing images, or use the media library list mode to select specific images for compression. Additional directories can be analyzed to ensure that every image on your site is properly optimized.

EWWW IO even lets you convert your images to next-generation formats such as WebP, or find the best format for an image thanks to multi-format conversion options.

The premium Compress API lets you take compression to a whole new level without sacrificing quality, and with average savings of 50%. It also unlocks PDF compression and includes convenient 30-day image backups. With the optional Easy IO CDN, images are automatically compressed, scaled to fit page and device size, delayed-loaded and converted to the latest WebP format.

The Compress premium API lets you take compression to a whole new level without sacrificing quality, and at average savings of 50%. It also unlocks PDF compression and includes convenient 30-day image backups. With the optional Easy IO CDN, images are automatically compressed, scaled to fit page and device size, delayed-loaded and converted to next-generation WebP format.

Using SVGs: advantages you should know about

Another recommendation is to use SVG files with your other images. SVG is a resizable vector format that works perfectly for logos, icons, text and simple images. Here are just a few reasons why we recommend it:

  • SVGs are automatically resizable in browsers and photo editing tools. It’s a web designers and graphic artist’s dream!
  • Google indexes SVGs, just as it does PNGs and JPGs, so you don’t have to worry about SEO.
  • SVGs are traditionally (not always) smaller in file size than PNGs or JPGs. This can result in faster loading times.

Genki has written an excellent article in which he compares SVG vs PNG vs JPEG file sizes. Below are some extracts from his tests in which he compared the three different image types.

About the Author

Leave a Reply

Your email address will not be published. Required fields are marked *

You may also like these