Image Optimization

Image Optimization

How does Timber-Boot handle Image Optimization?

Start with a jpeg image file that is 1.8 MiB and when it is displayed in the browser it is a WebP and reduced to the file size of 54.7 KiB.  This is for a hero image displayed at a width of 1341px and a height of 755px. That is a reduction in file size of over 97%.

The image size has a big impact on page optimization.  Large unoptimized images will cause your website pages to load slow. In today’s web with page loading speed being king, not being fast will cost you visitors, page rank, and the bottom line – money.

There are so many options today for image optimization, especially for WordPress, That it is hard to choose which way to go. If you rely on totally automatic optimization you risk the image quality will be very poor or the image was not optimized enough and the file size is still too large.

With mobile devices having retina displays now with 300 or more pixels per inch, you can not just turn you back to those users.  They want and expect a great image quality.

To solve this problem, there has to be a human intervention in the process of image optimization to adjust the quality so the image size is small enough, but with the quality needed for even a retina display.

Optimized for Speed: When choosing your image, concentrate on choosing an image where the important part of the image is as centered as possible.  This makes it easier when having to crop images. The default layout in Timber-Boot has really 3 types of images when it comes to manual preparation.

We recommend GIMP (Free) or Photoshop,  for manual preparation.  In this step, the image is resized to fit the upload dimensions that are displayed when you try to upload the image. Timber-Boot restricts the upload size to those dimensions so no errors can be made. Only 1 image at the maximum size for a retina display is uploaded.  This image should be optimized at the smallest files size with the best quality to the human eye.

Prebuilt Elements and Components:  Timber-Boot has built-in routines using based on “srcset” and “sizes” where it resizes images automatically based on where it is displayed.  These images sizes are created when the image is displayed the first time, and then the proper size is delivered to the browser based upon the size and display type.  This way, not only is an optimized image delivered,  but rendering is also faster because the browser does not have to make a choice of which one to use.

At this point depending upon the type of server it is on, a WordPress plugin can be used to do additional optimization on shared servers, or mod_pagespeed on VPS, Dedicated or Cloud servers. This is where images are converted to modern formats such as WebP, if possible.

The theory here is to have as much optimization done as possible at the core server level and very little at the browser.