Image Optimization in WordPress

This post will show you one of the best tactics to keep your images size and quality optimized without getting blurry thumbnails or visibly losing on quality. Your server and search engines will like it.

TinyPNG
TinyPNG is absolute hero in optimization

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
  • 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:

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

4 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here