For most websites, up to half (50%) of the page weight comes from images (1,000 kb on average).
Here are some of the most common mistakes with images that slow down your site:
- Images that are much larger (by height and width) than necessary.
- Sub-optimial image types (e.g. using a PNG where a JPEG is a better fit)
- Serving un-optimized images. (e.g. lower JPEG compression or no quanitizing)
THT provides a command that makes it easy to avoid the biggest mistakes.
Size cuts are often around 60% to 70% with usually no perceptible difference in quality.
Running the Command
On the command line,
cd to your document root, then run:
$ tht images
You will see something like this:
Optimize (17) images under: /my/website/public The original images will be backed up to sub-folders named `_originals` Continue? (y/N)
You can also target a specific directory:
$ tht images /my/website/public/photos
What It Does
For each image that hasn’t been previously processed:
- If it is wider than
1000px, resize down. For example, un-processed photos from a smartphone are often over 2000px wide.
- If it has no alpha transparency, convert to a JPEG.
- If it is a PNG with fewer than 250 colors, convert to a PNG with an indexed color palette.
- If it is a PNG with more than 250 colors, apply single-pass quantizing. This is a lossy reduction in the color range that is usually not perceptible to the human eye.
_originalssubfolder and re-optimize it.
Source images are limited to the following:
- GIF (non-animated)
These are determined by the baseline installation of PHP's GD library.
- To override an optimized file, just copy the original from the
_originalssubfolder over the new file.
Some possible future enhancements:
pngquantcommand-line tool provides a very high level of optimization from quanitizing. We’d like to use that instead of our more naive (but compact) solution.
tht image undocommand that moves all original files back into place.
- An option to change the optimized file extension to match the updated type.
- Lazy Load Images - A JS Plugin that only loads images when they enter the visitor’s viewport (an additional 50% performance improvement).