Reading Time: 3 minutes
Reading Time: 3 minutesCreative Speed Strategy using free plugins and free themes.

Save the Internet from WordPress speed abuse.

Thumbnails are a scaled-down or cropped representation of larger pictures. They help in recognizing and organizing images. Thumbnails are used on web pages as separate, smaller copies and linked to the original image or another page. This distributes page load, reduces bandwidth, and speeds up load time. Thumbnails serve as web signage or navigation links.

Proper cropping is usually a more important issue than quality settings for thumbnails. In other words, compositional interest or focus provides viewer recognition and motivation to click. Rather than create a smaller dimension image copy, some web designers cheat by making the browser shrink thumbnails with HTML code. This is not good web practice but sometimes unavoidable. This results in no saved bandwidth. Visual image quality from mathematical resizing is usually poor. So both quality and speed suffer.

Graphic dimensions specified in HTML code are not always the same as the actual image dimensions. This forces the web browser to calculate the difference before displaying the graphics. With the large number of graphics on popular masonry and image grid pages, this adds significantly to the download time.

No image scaling on the fly. Thumbnail “math” can slow down a page. When pixel versus code dimensions mismatch, the web browser must recalculate the page graphics. That takes a long time. And it clogs the pipes. Make sure image dimensions match your code for a faster-loading page with better-looking images.

brads-page
Brad’s portfolio example. A grid thumbnail layout for navigation to individual posts. No captions are used. Captions appear on roll over. This makes for a more geometric, Bauhaus grid.
BRad's thumbnails were custom built at 385 pixels square. They were added as the feature image. Normally, the large feature would be shown on the post page and the thumb would be a mathematical resize in the browser of the original. This means the thumb would weigh considerably more.
Brad’s thumbnails were custom built at 385 pixels square. They were added as the feature image to posts. Normally, the large feature would be shown on the post page and the thumb would be a “mathematical resize” in the browser of the original. That means the thumb would weigh considerably more and wouldn’t look as good. The large image was inserted into the body area instead. We used 2 images instead of one but kept the Home page loading very fast.

Displaying a relevant crop instead of a full image helps maintain recognizability or emphasis. For example, when thumbnailing a full-body portrait of a person, it may be better to show the persons’ face than a small figure.

default-thumbs
Kathy’s case study. This is a masonry grid style with captions extracted from the post content. Using the default WordPress crop.

 

Better thumbs are hand-built in an imaging editing program.
Better thumbs are hand-built in an imaging editing program. Customized cropping and optimizing.

WordPress automated cropping of thumbs can be pretty bad at times. Above: On the example van thumbnail, the automatic crop cut off the most important detail: the graphic wrap above the wind shield.

We didn’t let WordPress create the thumbnails. Instead, we cropped and optimized them in a desktop imaging program. This reduced the weight by 5X. The featured images are “zoomed in” for detail and exclude type. This is because, at small image sizes, text becomes unreadable and people will squint to try to read it!

WordPress automatically produces preset thumbnail sizes. It also applies unsharp mask to them. Sharpening images restores and improves internal edges. Humans do pattern recognition based on edge shapes.

Default Media Settings
Thumbnail, 150 x 150 pixels
Medium, 300 x 300 pixels
Large, 1024 x 1024 pixels

Images are centered and cropped to these dimensions. These three image sizes, as well as the original full size, are the only ones available when you edit a post and insert media. They can be changed in the WordPress administration panel under Settings > Media.

Media image sizes allows you to change the maximum dimensions of images that are displayed on posts and pages. When setting a thumbnail size, the image will be cropped and resized to the setting. Medium and large images will keep the dimension proportions, taking the maximum width and height into account.

Set large images at the theme’s screen width for full width pages and posts, and medium images at the width of a content column.

Regenerating Images
Any time you change your WordPress default image size definitions, they will only apply to new uploads. All your existing images remain at the original dimensions. There’s a great plugin that will go back through your posts and regenerate these new image sizes for you.

AJAX Thumbnail Rebuild lets you select which sizes to regenerate, and will work through your archive. The plugin won’t resize images already inserted into posts. Regenerating images makes new sizes available to use in future pages. You can’t bulk edit the size of existing images that you’ve inserted already.

enable-media-replace

To do that you need to use Media Replace plugin. It’s still one-at-a-time work.

Cleanup-Images

Even if you’re no longer using a certain size, old images will remain on the server. WordPress won’t delete unused images for you. We don’t like wasting server space. The Image Cleanup plugin will help by scanning and giving you the option to delete unused images.

my-eyes-are-up-here

My-Eyes-Are-Up-Here plugin helps you control how WordPress crops thumbnail images. Finally, a WordPress plugin to help with cropping by using facial recognition or a user-specified hot spot. It’s a step in the right direction. When WordPress generates thumbnails, you run the risk of a bad image crop. This plugin remedies most bad photo crops of thumbnail images.

If you have uploaded a full-portrait image of a person, WordPress may center the image so you end up with just a headless person.

plum-dress
Original image of a model in a plum-colored dress.

 

Default WordPress cropping.
Default WordPress cropping.
plum-dress-copy-150x150-hotspot
Cropping using facial detection plugin.

 

 

 

 

 

Or let’s say you have a landscape image, with a person’s face on the right hand side, but you need it to display in a square thumbnail. You’ll end up with half a face as WordPress centers the image.

Original face.
Original face.

With this plugin, you can either use the automatic face detector or if you want even more control, you can manually add hotspots.

Navigate to your media library then click on the image you want to edit. Use the detect faces or edit hotspots option to edit your image. You’ll see thumbnail previews when you’ve applied these edits, when you’re happy hit update. Pretty simple.

You can increase or decrease WordPress JPEG image compression. WordPress automatically compresses JPEG images to 90Q. Becasue JPEG quality settings are non-linear that setting actually produces a big reduction in file size and the quality is visually the same. If you’d like to change that default, paste the following code in your theme’s functions.php file:

add_filter('jpeg_quality', function($arg){return 100;});

Setting it to 100 would mean that WordPress would compress the image at its highest quality. We don’t recommend that setting except for photographer portfolios (maybe if insisted upon).

WebPagetest.org testing online recommends compressing images between 50Q and 70Q. Place 50 in the code instead of 100 and try it out by uploading a test image.

Steve Teare
performance engineer

Creative Speed Strategy using free plugins and free themes.

What others think of us:


"Hi Steve, Thank you so much for that insightful review! I appreciate the time you took to explain the issue of the website I'm working on. I'll be looking into some of the recommendations you have and advice that you have given." skiveworks.com, Singapore

by - Jaaze Lim