Home » Posts » Optimize Your Images – WordPress Speed Optimization
Optimize your Images - WordPress Speed Optimization-1-Featured

Optimize Your Images – WordPress Speed Optimization

For a fast website you need to optimize images before uploading them to your site as well as optimize them once they are on your site.

Optimize Images Before Uploading Them to Your Site

Even though a PNG image and a JPG image look very much the same, they are, in fact, very different in terms of the way the actual image is stored. Let’s not get into the boring technical details here, and instead just focus on what the difference is in practical terms:

  • JPG images are great for all kinds of photos and graphics that feature multiple colors, color transitions, shades – a lot of color info overall.
  • PNG images are great for low-color info images – this means things like interface screenshots and simple graphics.

JPG Images

The image below has the following dimensions:

  • width: 1920 px
  • height: 1280
  • size: 255 KB
Optimize your Images - WordPress Speed Optimization-1-resized from 1920x1280 to 960x640

The image below has the following dimensions:

  • width: 960 px
  • height: 640 px
  • size: 40,5 KB

The image is now 84% smaller without losing quality.

Optimize your Images - WordPress Speed Optimization-1-Featured

You can also compress an image:

Original Image

  • width: 1920 px
  • height: 1280 px
  • size: 255 KB

Compressed Image

  • width: 1920 px
  • height: 1280 px
  • size: 112.33 KB ( the image dimensions are the same but the image is now 56% smaller! from 255.11 KB to 112.33 KB)

A PNG Image

This is a PNG image

You could also convert the above PNG image to a JPG image but there is no need for that.

This is a JPG image (converted from the PNG image above).

You can easily save images in different formats in MS Paint, I Love IMG, Apple Preview, Photoshop, or any other image tool.

I use I Love IMG to resize my images prior to uploading images to a website. I Love IMG enables bulk resizing of images for free.

In Summary:

  • When dealing with a photo, make sure it is saved as a JPG.
  • When dealing with a graphic that has only a few colors, save it as a PNG
  • I use I Love IMG to resize an image or multiple images at the same time. Resizing images will reduce their size (and therefore there is no need to compress them afterwards).

Still on dimensions

Your site is likely able to display only images of a certain max size. In most cases, that size is around 1200-1600 pixel wide.

Additionally, HiDPI screens, aka. Retina screens, can display images that are twice that size, so 2400-3200 px wide.

Uploading images that are any bigger than the specific Retina size of your current theme makes no sense. The only question, how to find out what’s that max Retina value for your theme?

In most cases, you can go to your WordPress admin panel, into Settings → Media, and look what the value is in the Large size box; this one:

large size setting

As you can see, in my case, that’s 1024 px. This is the normal size. To get the Retina value, just multiply by 2.

So in my case, uploading images any wider than 2048 px would make no sense.

Note: if you want to display some images in full-width mode (taking up the entire screen) then the safe size for those would be 1920 px times 2 = 3840 px.

  • 1920 is the most common full-HD resolution
  • times 2 is your Retina correction

In Summary:

  • For normal blog images – images you’re adding to blog posts or pages – don’t upload images larger than 2x your theme’s maximum “large” size.
  • For images that are meant to be displayed full-width, don’t upload wider than 3840 px.

Optimize Images once They Are on Your Site

Optimizing your images before you upload them to your site is about 50% of the way to website speed optimization. The other 50% is optimizing the images once they’re on the site.

The plugin I use is Optimole.

  • You can use Optimole for free up to 5,000 website visitors monthly, which should be enough for new websites, fledgling businesses, and personal projects.

Optimole brings you very important features:

  • Optimole will replace the URLs of your images and serve them through a fast CDN (more on CDNs later).
  • Optimole will scale your images to make them fit whatever screen/device your visitor is using – this means that the visitor won’t have to wait for an unnecessarily large image to load.
  • Optimole will lazy load your images – the image will only start getting loaded once the visitor scrolls down to see it.
  • Optimole will compress your images making them even smaller in disk size without impacting the visual quality of the image.
  • Optimole will enable Retina images only for the devices that can support them.

All this happens on autopilot. The only action you have to take is activate the Optimole WordPress plugin and validate your account. From there, Optimole will do all the magic on its own.

Here’s how to install Optimole on your WordPress site in 3 steps

It’s not uncommon to have space savings of 80% or more when using Optimole!

Here’s an example screenshot showing what’s going on with Optimole running – Last Optimized Images

Last Optimized Images-Optimize your Images - WordPress Speed Optimization

Do you optimize images before uploading and/ or once they are on your site?

Featured photo by Mitchell Orr on Unsplash and edited on Canva

If this Blog was helpful please give it the thumbs-up👍 and subscribe to my channel. Thanks for reading. Cheers😎

Need Online Training? >
Subscribe to our YouTube Channel >
Subscribe to our Newsletter >
Follow us on Facebook >
Follow us on Instagram >
Follow us on Twitter >
My Fitness Blog >

Look forward to your comment

%d bloggers like this: