No menu items!

Image Optimization in WordPress

Okay, so you built yourself some nice WordPress blog or a business website with amazing features. You have some nice content to show, but the images you upload are so heavy, your website is slow. You thought that it’ll be just fine if you install some image optimization plugin. Sometimes it will work, but sometimes it will not. Let’s focus on those times when it doesn’t work.
Possible problems:

  • thumbnails are blurry after using optimization plugin
  • thumbnails and images generally are too big without using optimization tools
  • images (including logo etc) are blurry on Chrome, Opera, but not on Firefox ๐Ÿ™‚
  • WordPress is generating far too many thumbnails then you’ll ever use, and all are blurry or too big in size, your disk space suffer

Solution:

(if you’re looking on how to fix blurry images only on Chrome, Opera, etc then just use this code:

img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

Add the code to your custom CSS, or to your child theme.

Before we do any of the steps below, we have to tell WordPress not to decrease JPG quality on image upload or any. So, paste the following code in your themeโ€™s functions.php file or in a plugin acting like a custom function.php file. For that you can use plugins like MY Custom Functions or Code Snippets.
This is the code:
add_filter('jpeg_quality', function($arg){return 100;});

(ALERT: you might see somewhere on the web another code doing the same thing, but I suggest you ignore it, since it is not compatible with the latest PHP 7.2x.
This is the deprecated code:
add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );
You also might stumble upon this code:
add_filter( 'wp_editor_set_quality', function($arg){return 100;} );
It will do more bad than good, therefore ignore that too.)

    1. Install Tiny PNG plugin, get the API key here, activate it and insert the key

      tinypng api key
      This is where you can ask for your API key
    2. In settings tick the “
    3. Scroll more down and tick “Resize and compress the original image
       

      Tiny PNG options plugin panel
    4. Install plugin Optimize image resizing, navigate to >Tools>Remove all image sizes
    5. After the process finishes, all your extra thumbnails created by WordPress will be removed. Don’t worry, thumbnails will be automatically created once you need any size type

      remove and regenerate images
      Here it’s visible how to complete steps 4 and 6
    6. Install plugin Force regenerate thumbnails, go to >Tools>Force Regenerate Thumbnails
    7. Done: your images are crystal clear, optimized. Everyone is happy ๐Ÿ™‚

 

ps. for some extra sharpness which is in 99,99% not needed, you can use:
ImageMagick Sharpen Resized Images plugin, which requires some extra console typing, like installing it on VPS (but only if you don’t have it installed). For any extra questions about this plugin or ImageMagic installation on your server please use comments bellow.
Also you can use Tiny PNG website to drag and drop, pretty neat. You can use TinyPNG to optimize any image not just website related.

Cheers

Top Performing WordPress Cache...

Typically, the caching plugin that is considered the best...

Avoid these 6 common...

Explaining what makes a good hosting environment for WordPress...

Setup Gmail SMTP for...

Learn how to set up the Gmail SMTP in WordPress to send emails.

WordPress Cron Job

Why not to use WordPress cron and why all...

CyberPanel and WordPress

What's better than Nginx? OpenLiteSpeed is better. CyberPanel is...

WooCommerce PayPal credit card...

Yes, even if you don't have an US PayPal...

Top Performing WordPress Cache Plugins for Fast Website Loading

Typically, the caching plugin that is considered the best and fastest is the one that has a fast Time To First Byte (TTFB), effectively...

Avoid these 6 common issues to choose the best WordPress hosting for your website

Explaining what makes a good hosting environment for WordPress websites can be challenging, given the many different setups that can enable WordPress to run...

Setup Gmail SMTP for WordPress Emails: A Step-by-Step Guide

Learn how to set up the Gmail SMTP in WordPress to send emails.

WordPress Cron Job

Why not to use WordPress cron and why all the fuzz? If you are running your own VPS or if you are on a shared...

CyberPanel and WordPress

What's better than Nginx? OpenLiteSpeed is better. CyberPanel is powered by OpenLiteSpeed and that is great news for WordPress. The faster server, the faster...

WooCommerce PayPal credit card checkout for non US accounts

Yes, even if you don't have an US PayPal account you can have your customers checkout and pay with their Visa or other cards. We...

Newspaper 9.7 to 11 theme activation

Protect your privacy and never send your real activation code. GDPR and GPL is abused by the tagDiv team. Lucky us WordPress is an open source. <3

Newsmag 4.7 theme activation

For quite some time I have been wondering about this theme, so I decided to try it. I obtained an original copy of the...

WinNMP – Error establishing a database connection

So there is automatic way of creating projects. Avoid that. Do everything by yourself since there are constant database issues. These issues are beyond...