How to properly crop thumbnails for UX and speed.

WordPress Mobile Speed


There are no affiliate links on PagePipe.

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.

[dropcap]P[/dropcap]roper 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.

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.

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.


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


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. [This plugin has been retired. There is a plugin called DNUI (delete unused images) that is very dangerous and can delete all of your media files with one button click. Be careful!]


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.

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

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 used to automatically compress JPEG images to 90Q. They now compress to 82Q. Because 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). testing online recommends compressing images between 50Q and 70Q in Photoshop save for web feature. 82Q is the same equivalent in WordPress.

We don’t use the code method any more. We make our setting using Imsanity plugin. We usually set the JPEG compression quality to 70.


Steve Teare
performance engineer
May 2022


PagePipe Site Tuning Services for Speed

Instead of band-aid approaches, we drill down to the root cause of your slow site. This is origin optimization. Also known as site tuning. To do this, we analyze site components:

  • Hosting
  • Theme
  • Plugins
  • Scripts and third-party services.
  • Images and media library.
  • We minimize globally loading plugin effects.

Find out more details about Site TuningGet Speed!