[Solution] Sharper Thumbnails for Facebook, Google, Open Graph, Pinterest, Schema, SEO, Twitter, etc.

Pop quiz! Did you know?

1) WordPress creates thumbnails automatically?

WordPress uses the larger / full-size image you upload to create smaller thumbnail images (see your WordPress Settings > Media page for the complete list of sizes).

For example, a photo gallery page will show small thumbnails of the larger / full-size images you uploaded. Themes will often include the featured image you selected in a predefined image size and location in the webpage.

2) All images must be sharpened after resizing?

This is such a standard process that Photoshop, for example, automatically applies a default amount of sharpening when resizing any image — you must specifically uncheck an option in Photoshop to avoid sharpenning an image during the resize process!

3) WordPress does not sharpen resized images?

I bet that you didn’t know this last one… not many people do. ;-)

WordPress creates several different thumbnail images by default (see your WordPress Settings > Media page for the complete list of sizes) and potentially many more, depending on your chosen theme and active plugins. It’s not uncommon, for example, for WordPress to create a half-dozen or more thumbnail images from a single original / full-size image — and in all cases, WordPress does not sharpen or make any adjustments to the resized image it creates!

But don’t “image optimization” plugins do this?

They don’t — image optimization plugins are designed to create smaller / faster loading images, not better looking ones. And when you share a post / page to social media, you want your social image to stand-out! — fuzzy thumbnails just won’t do, no matter how fast they load on your own site. ;-)

So what’s the solution?

As the author of several Social and Search Optimization plugins, I found the lack of sharpening options for resized images completely unacceptable. That’s why I wrote the WPSSO Tune WP Image Editors plugin (aka WPSSO TIE) — a complimentary add-on for the WPSSO Core plugin.

The WPSSO TIE add-on applies a safe and moderate amount of sharpening, but you can also customize and fine-tune the ImageMagick image library settings to increase or decrease the sharpening as you desire.

Can you spot the difference?

Which image would you click on?

These examples show 150x150px thumbnails (300x300px on high-resolution / retina displays) created by WordPress, with and without the WPSSO TIE add-on. The thumbnails are stretched to fit their container here, so you can clearly see the differences. The same lack of sharpening can be found in all resized images from WordPress, but is most noticeable in the smaller sizes WordPress creates.

Which image are you more likely to share, re-share, or click on? ;-)

Example Thumbnail (Storefront) - WordPress Default
Example Thumbnail (Storefront) - WPSSO TIE Active with Default Settings
Example Thumbnail (Storefront) - WPSSO TIE Active with Custom / Maximum Recommended Settings
WordPress Default.
WPSSO TIE Active with Default Settings.
WPSSO TIE Active with Custom / Maximum Recommended Settings.

Give it a try – it’s a free plugin!

If you’re interested in trying the WPSSO TIE add-on, you can find the WPSSO Core plugin, and its Free complementary add-ons, on WordPress.org.

Don’t forget that after activating the WPSSO TIE add-on, you’ll need to regenerate your existing thumbnail / resized images to have WordPress re-create thumbnail images and apply the image sharpening settings. ;-)

Find this content useful? Share it with your friends!