How To Optimize Images For Your Website (Wordpress)

When you run your own blog on your own VPS, I guess you have spent already some of your time on optimizing the web performance of your page. One of the most important part, is to optimize images for your website. Many of us use WordPress, and also this page has been created by using WordPress. WordPress saves images in a specific subfolder on your root directory – /wp-content/uploads/.

I was tired of checking my website speed with GTmetrix and saw a very low PageSpeed score. When you run your own blog with maybe some plugins, you have dependencies to other pages, like social media buttons or other parts you don’t want to stop using. These parts show up in GTmetrix as the need to optimize on browser caching, which you can’t, because these belong to other pages. In any case, one of the the most important part for increasing your PageSpeed score is to optimize images for your website.

How To Optimize Images For Your Website

In this post, I am going to show you how I am optimizing the images on my blog. There are probably many different ways. You can use dedicated paid services or free wordpress plugins. I’ve tried some wordpress plugins which did not increase the performance of my website.

The method I use, is done directly on my CentOS server. It includes two tools, which helps you to optimize the images for your website.

pngquant – for optimizing png images
jpegoptim – for optimizing jpeg images

You can install both with the following commands:

yum install pngquant yum install jpegoptim

Once the tools are installed, you can directly test it with some test images, if you have them on your server. I’ve tried the tools directly on one of the subfolders in /wp-content/uploads and it worked very well. The size of the images reduced by more than 50% and you couldn’t see a loss in the image quality.

Optimize All Images

After making sure, you like the result of the image quality and the image size, you should think about optimizing all of your images. In case you use WordPress, you should optimize all images in the /wp-content/uploads folder and subfolders.

With the following command you can find all png images in this folder:

find /$YOUR_ROOT/wp-content/uploads/ -iname '*.png'

You can do the same with jpg images of course:

find /$YOUR_ROOT/wp-content/uploads/ -iname '*.j*g'

Once you decided to perform the activity, you can use the following command to perform the optimization in a bulk:

find /$YOUR_ROOT/wp-content/uploads/ -iname '*.png' |  xargs -0 pngquant --skip-if-larger

find /$YOUR_ROOT/wp-content/uploads/ -iname '*.png' |  xargs -0 jpegoptim

With –skip-if-lager the process won’t be executed as it recognizes, that there will be no benefits in the image size after the process. The command for the png images will create a second file (keeping the original), while jpegoptim directly compress the images on the original file.

Do It Automatic

Once you have done the bulk optimization for all of your images manually, you should consider to optimize the images for your website automatically.

I am doing this automation with a simple bash script which looks like this:

#!/bin/bash
#Daniel Schwartz
#Created: 05.10.2020

date=$(date)
LOG=./schwartdaniel_imageoptimizer.log
x=$(/usr/bin/find /var/www/html/schwartzdaniel.com/wp-content/uploads/ -iname '*.png')
y=$(/usr/bin/find /var/www/html/schwartzdaniel.com/wp-content/uploads/ -iname '*.j*g')

for i in $x; do
    /usr/bin/pngquant --skip-if-larger $i -f -o $i
    chown apache:apache $i
    chmod 640 $i 
    echo "$date - $i optimized, website again faster!" >> $LOG
done

for j in $y; do
    /usr/bin/jpegoptim -q $j
    chown apache:apache $j
    chmod 640 $j
    echo "$date - $j optimized, website again faster!" >> $LOG
done

The script includes two for-statements, one for png images and one for jpeg images. It will find all images in the WordPress folder and optimize the images directly on the original file and writes a short line in a log file.
Again to make sure: It will optimize the images directly on the original file without a copy.

The two tools won’t preserve the file attributes after the compression. For that reason, I’ve added to my script the chown and chmod commands to get back to the proper attributes.

If you are writing new blog posts frequently and adding many images within a month, you can put the script in the crontab of your server and let it run once a week or once a month for example.

Fine Tuning

I’ve added to the script above two If-statements to avoid that files won’t be touched a second time. The script is checking the log file if the file name was already written down and will skip the file as consequence.

 
#!/bin/bash
#Daniel Schwartz
#Created: 05.10.2020

date=$(date)
LOG=./schwartzdaniel_imageoptimizer_check.log
x=$(/usr/bin/find /var/www/html/schwartzdaniel.com/wp-content/uploads/ -iname '*.png')
y=$(/usr/bin/find /var/www/html/schwartzdaniel.com/wp-content/uploads/ -iname '*.j*g')

for i in $x; do
    if ! grep -q $i "$LOG"; then 
    /usr/bin/pngquant --skip-if-larger $i -f -o $i
    chown apache:apache $i
    chmod 640 $i 
    echo "$date - $i optimized, website again faster!" >> $LOG
    else
    echo "$date - $i already optimized, nothing to do" >> $LOG
    fi
done

for j in $y; do
    if ! grep -q $j "$LOG"; then
    /usr/bin/jpegoptim -q $j
    chown apache:apache $j
    chmod 640 $j
    echo "$date - $j optimized, website again faster!" >> $LOG
    else
    echo "$date - $j already optimized, nothing to do" >> $LOG
    fi
done

Summary

It is very important to optimize the images for your website. It will increase your PageSpeed score and of course the web performance of your blog. After having done the steps above, my PageSpeed score changed from 69% to 91%!

Both scripts can be found on my Github page: https://github.com/DanielSchwartz1/image_optimizer

Make sure that you make a backup of your images, if you are not sure. I am doing a backup once a week of my full root directory.

How To Optimize Images For Your Website (WordPress)