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. 1. Install Tiny PNG plugin, get the API key here, activate it and insert the key

      

   2. In settings tick the “Original image (overwritten by compressed image)“
   3. Scroll more down and tick “Resize and compress the original image”
       

      

   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

      

   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