Compressing all my beautiful Content Images

I spoke before about the importance of managing , optimizing and compressing Images used on your website.

You need to keep them from slowing your sites performance.

• Make sure the originals are reduced in both file size and image dimensions.
• The maximum dimensions should be no bigger than how they will render on your site.
• Every Theme template in WordPress has defaults for images.
• This includes the maximum dimensions they can appear in any page template.
• This is calculated for both Desktop and mobile device viewing.
• Once you settle on a Theme for your site, try to find out what those sizes are.
• Knowing the maximum widths allows you to keep your uploads to a sensible or optimum size.

By default, WordPress Core offers predetermined image sizes, that are used in places such as featured image in posts.

WordPress default image sizes are:

• Thumbnail size (150px square);
• Medium size (maximum 300px width and height);
• Large size (maximum 1024px width and height);
• Full size (full/original image size you uploaded).

So that gives us a starting point. It tells us WordPress considers 1024px to be a Large Size.
It gets us in the right headspace for using images on the web.
When running speed tests on my site, I often see a recommendation to reduce the site Header image width.
The Header image on most sites is the widest of all images. It usually spans an area wider than the actual content area below it.
Because it is alway loaded on the landing page it deserves thoughtful compressing and sizing.

My image is 1024px width yet it usually displays in a browser at 959px width. 

The speed test is telling me to save some load time by reducing the redundant image width to match the browser.
This argument indicates that even at 1024px we should be able to go smaller on most images.
A lot of my content area and post images are 600-800px.
In truth there are not many places on the web that we will see images larger than 1024px when viewed on a Desktop computer.
And on a Mobile device the default is down under 768px.

I know that does not sound like a big difference between Desktop and mobile.
The two screen technologies are very different. Most smartphones are using some variety of Amoled or super Amoled screens.
They are enormously more dense in their concentration of pixels.
So when you think to yourself that a mobile phone screen may be a tenth the size of a 24 inch Desktop screen.
Unconsciously you expect it to use 1/10th the number of pixels. In reality it’s Not so.

The exceptions to this 1024px rule are likely to be Photographic Sites and Free image sites like Unsplash.
They use a different approach with their websites.
They use specialized dedicated servers, bandwidth and Content Deliver Networks (CDNs) to optimize delivery of content.
Most of us don’t need that sort of setup – and are outside the scope of this article.

WordPress Image Sizes

Below is a list of image sizes currently in one of my websites.

You can see there are a lot more than the basic WordPress 4 sizes at the top.

Many WordPress Themes and Plugins have their own default image sizes for insertion into the custom areas or Widgets they create and control.

Notice the text descriptions. This shows us the app responsible for making them.

For every image we upload, there could be as few as 3 sizes plus original – up to 12 sizes in this case, plus original, created.

I can check that by seeing the images stored on my hosting server. If you know what you are doing you may like to check yours.
Don’t break it by clicking or double clicking where you should not.

In the image below I have cheated to show you what makes up the WordPress Core software.
I downloaded the WordPress 5.2.1 zip file from WordPress.org and unzipped it into a folder on my Desktop computer.
This is what it looks like.

In a WordPress installation their are 3 main folders plus a bunch of singular files. 
As your website grows and you add more things to your site there may be more visible than what you see here now.

The three Main folders are wp-Admin, wp-Content, and wp-Includes.

The one we are interested in is wp-content which is Home for your Themes, Plugins, Updates and Uploads folders.

Images live in the Uploads folder , so do some other things.

In the Uploads folder we would see a number of sub-folders. 

Usually at the very top there will be folders “2018”, “2019” etc.

It is here that your images live. Within each year folder there are  folders for each month. The current year will only display up to the current month. Images are sorted by upload date.

I selected a sample month to view the list of images. Looking at the list I notice for this particular website that each image has 26 versions? How??

Well this particular website has a plugin called “ShortPixel” installed. It not only compresses all my uploaded images for better performance but gives me the option to create super skinny .webP format versions of all my image files.

I showed you a list of the thirteen versions and their parent programs. It came from within the settings screen for ShortPixel.
It has the ability to find all the images generated within that WordPress installation.
When it does that, the 13 originals plus 13 .webp versions equals 26 images total.

WebP is an image format as is .jpg or .png or .bmp. It was developed by Google to reduce image size dramatically without loss of quality.

This plugin does not only creates and stores WebP images. It serves them up to the frontend when a visitor visits my site if their web browser supports them.

If not it serves the compressed .jpeg instead. Smaller WebP images load dramatically quicker than compressed .jpeg or .png image files.

More about this shortly.

I still edit all my images before I upload them to WordPress. I prefer to keep thing clean of unnecessary data.

First, I use Photoshop to crop them.

This highlights the subject matter and excludes any unnecessary material. This immediately drops the file size.

I then resize them

to a common maximum of less than 1024px width, quite often smaller if I know they are only to be used as smaller images for a post, article or thumbnail in a widget. Resizing is different to cropping.

The only exceptions

would be for header full width images or Hero images. There are instances where your chosen theme may have a specific requirement. For instance, if you were using WordPress Twenty-Seventeen Theme – the Header image is big and beautiful but huge at the recommended 2000×1200. (This is one of the main issues people have with that Theme. Its great being so wide, but the height takes up the full screen when you view it. But a little snippet of code or a Child theme can fix it to reduce the size.)

I then do any adjustments I think are needed 

An image may need attention to color, brightness, sharpness etc.

Finally I use the “Export> save for Web.

This last step is a very useful function of Photoshop. It can enact compression on the image you might otherwise have to do in another application. It gives you a choice of quality and file size to compress the image file for use on the web. Being Adobe Photoshop, it gives one of the best quality results you are likely to get anywhere while squeezing it to a much smaller size.

I am now at he point where my image is no bigger than it needs to be. The next step could be to run it through further checks to see if the image would benefit from further compression. This is true if I used a Image editor other than Photoshop that did not have the “Export for Web” legacy function.

There are a number of possibilities.

Compressing Images Online

I could upload the image(s) to an online compressor like https://www.jpeg.io/ .

This site does lighting quick compressing with a drag and drop interface. Drag images from your desktop onto their page instantly compressing them. If you have multiple images, no problem, select them – 10, 20, 30 at a time and it buzzes through them. When finished you can click the download button and it zips all of them then downloads to your computer. (this site sometimes goes offline and you may have to come back later) There are other alternatives

Compressing using a Plugin 

Another option might be to install a plugin that will do any further compression processing from within your WordPress website.

One such plugin I use is “ShortPixel”.

Once activated you can use bulk compressing for all images in currently in your Media Library.
You can  do it by just compressing the originals or all the created Thumbnails also.

The plugin is a free download and allows you to process 100 images free per month.
As you might have guessed it sends the images to their site to do the compressing work.

Something quite unique about this plugin you do not buy the plugin or pay an annual subscription. It allows you to buy credits as one off purchases. So where the initial 100 per month may not cover your existing Media,  a initial one off purchase allows you to enable compressing everything at once. 

Currently
$4.99 gives you compressing 5000 images and
$9.99 gives you compressing 12000.
With that in mind it is an extremely cheap compressing service.
If you have more than one website, you can use the credit across all of them.
From there, the 100 free compressions per month might quite conceivably be enough to cover new images you subsequently upload.

The really cool thing about ShortPixel is two checkboxes in settings that create and serve the WebP images I told you about earlier – and it does it for free.

Where are we at 
We started off with maybe 4 WordPress generated versions of each Image.
We ended up with 26 versions which sounds ridiculous if we are trying to conserve space and resources.
But it’s not bad as it seems.

Guess what! We actually saved space, plus: –

• sped up our site
• made Google and search engines like us
• enabled WebP image delivery.
• slashed the actual megabytes of storage used to under 30% of what the original uncompressed images would have been.
• Yes, it is true I use crop and compressing in Photoshop before I upload. I just feel it is best practice for me.

There is a trap we all fall into when we start out building websites.
We have yet to learn many things.
We want it to be a thing of beauty.
We get very precious about the beautiful images we want to use and share with people.
We have an emotional attachment to them that makes us want them to be perfect full hi def for everyone to see.
We think the only way to achieve that is with big original images.
We hear talk of compressing images but steer clear of touching out babies.

After a while we realize a few things

• Our readers don’t have that same personal attachment, but will still be awed by your images.
• They may not even see them if our site it too slow to load
• Pictures are important to set the mood, but the content is the lifeblood
• Big and beautiful sometimes loses the particular message of the image. Think about cropping to just the subject.
• There are other ways to deliver a HD image for download without it being native on your site and slowing down the works. (use cloud storage)

Images for Digital Media versus Print

There is a big difference between images for Print media and Images for screen display.
Cameras take photos containing data for both.

The digital screen display usually requires the RGB (Red Green Blue) color palette.
Print media predominantly uses the CMYK color palette.

A computer or device screen usually is based on LED Backlight technology.
It supplies the white tones for the image and the RGB makes up the rest.

The CMYK system has no equivalent to the screen backlight (white tones) so it must contain that data also.

It is redundant data for screen display. It can be removed to reduce the file size dramatically without any visible loss of quality.

For photographic and sites that allow download of images, they still use a compressed skinny file to display on their site.
The way they able to offer large image files, is to link to an original full version of the image on a external file server.
Anybody clicking on the image is redirected to that file server to download the image.

You can also do this if you need to.

One way is to use something like Google Drive to store the original big file.
Once it is stored on Drive, use the share function in Drive to generate a download link.
Back on your website open the article, page or post where you displayed the image, click the link button in the editor, paste the link and save.
Visitors now view the website optimized image but can download the big Kahuna.

Thanks for reading, I hope you get some good pointers from this article.

Feel free to add a comment below and subscribe to get follow up articles as they become available.

For our latest posts an topics visit our main Blog here

For an archive or all our topics go here

Don’t forget to Subscribe to receive notifications for new articles and Tutorials as they appear.