The Most Important Image Optimization Step

When optimizing your website for the fastest possible page speed, you should first look to optimize your images.

But before the image itself is compressed, there is one crucial step that is often overlooked.

An Image Optimization Step Overlooked

Typically, using WordPress, you would upload your image through into the Media Library.  Most users neglect to resize their images prior to uploading, either because they are unaware that this is something important to the load time of their web pages, or they simply do not know how to resize their images.

And then, the image is inserted into the page.  Usually, the image dimensions are left untouched, and due to how today’s stylesheets are set up, the image will auto size to the width of the container that the image exists in, within the web page.

But relying on CSS to auto size the images will result in zero performance improvements.

Reduce Image Size by 97%

However, if you were to simply resize the image (by clicking and dragging on one corner of the image in the WordPress -> Edit Page rich text editor window) down to no more than the maximum size of the image container, then some image optimization magic is possible.

When an image is sized down in this manner, it gains a width and height attribute.  In the past, this would typically just result in zero performance improvements.  However, if you have Pegasaas Accelerator installed, and a width and height has been specified for those images, they will automatically have their physical dimensions reduced to the height and width that was specified.

A typical 2048×1536 (3.15M pixels)  image might come in at over 1.2MB.  By resizing that same image down to 480×360 (173K pixels) would reduce its size to about 218KB which is an 85% reduction in size.

Pegasaas Accelerator further automatically compresses the images to save an additional 180KB, or so, to a final file size of about 27KB, which is a reduction in file size of over 97%.  This can also be translated as being the image being loaded 44 times faster than the original image.

So, to take advantage of the biggest possible page speed improvements, be sure to set the width and height of your images in your WordPress website to no larger than the width and height than their containers.  Pegasaas Accelerator will do the rest of the optimization for you.

One Reply to “The Most Important Image Optimization Step”

Leave a Reply

Your email address will not be published. Required fields are marked *