• Rife WP Theme
    • Rife PRO
    • Rife FREE
    • Demos
    • Pricing
    • Features
    • Reviews
    • Help
      • Documentation
      • Change log
      • Rife Free Child Theme
    • Tutorials
  • Rife Elementor Ext.
  • Blog
  • Contact
Try Rife!
Updated: November 9, 2018 by Daniel 1
Tools

Effective Image Optimization – Make Your Website Faster

Effective Image Optimization – Make Your Website Faster
Updated: November 9, 2018 by Daniel 1
Tools

Without a doubt, websites must be fast. Although today the Internet is high-speed, users have started to pay attention to the speed of page opening. Even 5 seconds of waiting for content may discourage a potential customer from staying on your site and taking advantage of your offer.

Therefore, make sure you prepare and optimize the content on the website right now. Remember that Effective Image Optimization is one of the keys to success!

This article is one of many that we plan to prepare for the website optimization process working under the control of WordPress. It is also the first one that will allow any user to start optimizing without having detailed knowledge about, for example, scripts and CDN that will become a hero of our next text.

In this article we will make the first and necessary optimization step, to save up to 70% of bandwidth.

I will analyze the photo which weighs 233KB and has a size of 1350x900px

Original file before optimization
Original file before optimization (Photo credits: Salomé Watel)

Important! In each situation presented below, I tried to get the smallest possible file at an acceptable level of quality.

We also use our Rife WordPress Theme to provide these test. You can also download the Free Version.

Is Photoshop the best for web optimization? No, it’s not!


Many people will probably smile under their nose that I use Photoshop to process pictures but trust me, I had such an episode, because not every solution met my expectations.

Let’s check what we can do with this PS.

File after the optimization process in Photoshop
File after the optimization process in Photoshop

An acceptable level of quality is 50%, which after saving gives us a file size of 184KB, which provides us with 22% savings. No big deal. Let’s go ahead.

Is XnView the best? Nope!


As you can see from the following screen (105KB – 55% savings), we managed to get a much better result than in Photoshop.

File optimized in the XnView
File optimized in the XnView

If we process family pictures on our hard drives, XnView will work correctly. Unfortunately, we can find much better solutions for processing photos for the website.

GTMetrix optimization? What the hell, It is possible?!


Yes, it is 🙂 Look at the screenshot below. You can download each photo in an optimized file.

Optimization process in GTmetrix - Good but not handy
Optimization process in GTmetrix – Good but not handy

But you have to remember one significant thing! You need to replace this photo or these photos (if, for example, you have 20 of them on the website) through the WordPress media manager. I can assure you that this task will be very breakneck because you have to remove the previous image and replace it with new ones. You can also use FTP to replace more files, but you still need to rebuild the thumbnails. The possible way but very difficult for less advanced users.

ShortPixel? What is this?


In short, it’s a plugin that does all the work for us, and we’re happy with the optimized photos with just one click. Suddenly, all the work we tried to do with external programs turned out to be a Sisyphean task.

ShortPixel provides the best tool for WordPress users
ShortPixel provides the best tool for WordPress users

After optimizing our file, we managed to get 66KB, which means that the data has decreased by 72%! Of course, not always such compression is successful, but around 60% is almost a standard.

The most important things are that you can change image quality again without having to re-upload it to your server. The plugin will do it for you automatically. Or you can restore the original image file in the media manager.

Let’s check how this plugin works. Of course, I don’t have to explain how to find and install the ShortPixel plugin because if you want to optimize your website, you already know how to do it.

If you need better quality select Glossy instead of Lossy - effective image optimization
If you need better quality select Glossy instead of Lossy

After opening the settings, the most important option is the image quality settings. You can choose from 3 options: Lossy, Glossy and Lossless. In my opinion, Lossy is the best option for most users when using only photos. Of course, you can see some losses in the pictures, but if you are not a photographer and don’t want to build your online portfolio, users will not even notice the difference. I don’t recommend using Lossy on simple graphics with a bright background (like a logo) because a not good compression is evident.

Get new WordPress tips and deals from our Newsletter

On our website, I used a glossy compression, why? Because in many cases I use png and jpg images with a solid background where lossy compression leaves not good looking pixels. We also promote our product that means we have to use sharp and pixel perfect promotional pictures 😉

Let’s save the settings and go to the media manager. You can choose there and select one file for optimization (1) or select multiple files, and ShortPixel will take care of everything (2).

Choose 1 to convert only selected files or 2 if you want to convert many files
Choose 1 to convert only selected files or 2 if you want to convert many files

Visit the plugin creators website where you can test the optimization without the need to install the plugin and read the difference between the different types of compression.

Want to see the real benefits of effective image optimization?

If you have added 24 photos on your website and used a compression plug, you can cut files in total by almost 6MB, which means that we can save up to 50GB of transfer (Saved bandwidth is calculated at 10,000 impressions / per image). It’s critical when our hosting provider has restrictions on the monthly transfer.

Another crucial matter is the speed of page loading. There is nothing to comment on the benefits of this 😉 Fast = Good!

What is the price?

The free version allows you to optimize 100 photos per month. Remember! Very often 100 photos don’t mean that you can tune 100 files because WordPress (or other plugin or themes) generate additional thumbnails for each photo. ShortPixel also identifies thumbnails as pictures. In the best case, a free plan is enough to process about 30 uploaded photos.

For sure, in the price list, you will find a plan for yourself, but I thoroughly recommend this for $ 9.99 where you can optimize 10,000 photos (in total).

We use this plan on many (many) installations, and we still have not exceeded half of the one-time 10k plan.

Only half of the plans to choose from
Only half of the plans to choose from

Last thing: Don’t forget about proper size!


Even if we optimize photos, any speed test can lower the result for using images in too high a resolution, the consequence is also that your website will load more slowly. If you are adding a large picture to the media manager, remember to choose the right size when adding it to the content.

Let’s take a look at this example. Below I’ve placed a view from Elementor. I could add maximum photos to this rectangular view (e.g., 1000x600px), but it will not be optimal. It is better to choose a more suitable size, that’s why I used smaller (300px width). Don’t upload wider pictures than 2000px; it makes no sense.

Elementor effective image optimization
Adjust your image to a proper size. The screenshot shows you how to do it in Elementor.

I’m sure there are other ways and plugins to achieve similarly (or maybe even better) effective image optimization result, so please give me know in the comments section.

 

If you Like it, Share it!

ShortPixel Speed

Daniel
Graphic designer and also founder of Apollo13. He is responsible for esthetics of each of our themes. He likes clean and useful design, where content can breath. Big fan of riding bicycles. For some reason Air's dog always try to bite him...

1 comment

Marius says:
November 3, 2019 at 7:36 pm

Daniel, I read your/this interesting article here and have a question. I’m using your theme ‘PhotoProof’ by the way. You said in it, image sizes bigger than 2000px make no sense. But what about retina screen quality then? MacBook Pro 15″ have 2880px, which means, uploading bigger than 2000px would make sense for such devices, doesn’t it?

Reply

Leave a Reply Cancel reply

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

WP Resources

Recent Posts

How to Set Up a Local WordPress Development EnvironmentDecember 29, 2020
The Beginner’s Guide to WordPress MaintenanceOctober 26, 2020
10 Wonderful WordPress Themes for Kindergarten SitesOctober 20, 2020
Ten Outstanding Tools for Creating Engaging ContentAugust 31, 2020
Ten Free WordPress Themes for a Modern PortfolioAugust 23, 2020

Useful Stuff

  • Rife WordPress Theme
  • Rife Free WP Theme
  • Terms of service
  • Privacy Policy
  • About Us
  • Contact
  • Blog

We know that our clients are the key to our success and that is why we decided to make support as our strongest value.

Useful Stuff

  • Rife WordPress Theme
  • Rife Free WP Theme
  • Terms of service
  • Privacy Policy
  • About Us
  • Contact
  • Blog

From the Blog

How to Set Up a Local WordPress Development EnvironmentDecember 29, 2020
The Beginner’s Guide to WordPress MaintenanceOctober 26, 2020
10 Wonderful WordPress Themes for Kindergarten SitesOctober 20, 2020
Ten Outstanding Tools for Creating Engaging ContentAugust 31, 2020
Ten Free WordPress Themes for a Modern PortfolioAugust 23, 2020

Get news & promotions

Be the first to get info about new Designs, new features, and special promotions!
© All Rights Reserved Apollo13Themes - Wordpress Premium Themes.
We use blazing fast Kinsta hosting and you?
Please read Terms of Service before using this site. We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OK, I understandRead Terms of Service