Image Optimization with WordPress

Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn7

Image optimization is one of the most important tasks in the process of improving the speed of a website. Fortunately, WordPress offers various plugins to help us in this endeavor. The major problems that we will try to solve are:

– Images of high resolution and size, causing a high load time of the website.

– Usage of the images, where specific dimensions are given using HTML and CSS , but in reality the full size image is being loaded.

http://wordpress.org/plugins/ewww-image-optimizer/

http://wordpress.org/plugins/regenerate-thumbnails/

 

Guidelines

– There are many WordPress plugins that can be used for image optimization. As always, we recommend that ones we use on our websites. In particular:


– Depending on the particular configuration of your web server, the suggested configuration may not be the most appropriate one. If you have any doubts related this matter, you will have to consult with your webmaster.

– If we are using cache option, after optimizing the images, we have to make sure to empty all caches. In this way, we make sure to be saving the new optimized images instead of the the old images.

 

Instructions

The first step, before installing any of the plugins, is to use a tool such as Google’s Page Speed Tool, to see the current situation and to determine the problems.

page-speed-insights2For example, in our case we see that we start from a score of 60 and there are several pictures that have problems.

We continue by installing EWWW Image Optimizer plugin. To do this, we simply go to the Plugins menu, add a new plugin, search for the option “EWWW Image Optimizer” plugin, click on install and the plugin will be installed:

EWWW-Image-Optimizer– If we go to the settings menu, we will see a new option that shows the name of the plugin. We click on this option to access the configuration. The first thing we notice is that the plugin itself shows if we have libraries and scripts on our server that are used in the optimization process. If we see that we lack most of them, we should consult our hosting provider.

EWWW-Image-Optimizer-scriptsThe default configuration is completely valid, and unless we have specific needs we will leave it as is. Nonetheless, you should know that the images that have already been uploaded to the server, are not optimized. So we use the “Bulk optimizer” option in the plugin.

EWWW-Image-Optimizer-bulkAfter we have imported the images, we simply click the corresponding link and the plugin will begin to optimize all the images (if you have a large number of images the process can take several hours).

There is no need to change anything in the configuration of this plugin. The images that are uploaded in the future will automatically be optimized.

The next step is to install the Regenerate thumbnails plugin. In the process of installation, you should follow the same steps as with the previous plugin.

Having activated the plugin, you will see the following menu being generated:

regerate-thumbnailsWe simply click on the “Regenerate thumbnails” button and the process will start (it can take several hours, if we have a lot of images).

regenerate-all-thumbnails
If we have doubts about whether a particular image is optimized, we can go to media menu, multimedia library and optimize the specific image separately.

regenarate-thumbnailre-optimizeOnce you have finished all of the steps above, you should check the score on the Google Page Speed Tool again. In this way, we will see if we have really improved the situation. In our case we see, for example, that our score has improved significantly from 60 to 87 this strengthens the optimization of the images on our website.

improved-page-speed

 

Additional Resources

If you have questions or concerns about these two plugins, you can check out the following resources:

https://wordpress.org/support/plugin/regenerate-thumbnails

https://wordpress.org/plugins/ewww-image-optimizer/faq/

https://wordpress.org/support/plugin/ewww-image-optimizer

 

Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn7

Leave A Response

* Denotes Required Field