• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • About
  • Recommended Books
  • Tools
  • Journal
  • Hire Me
  • Contact
Small Biz Geek

Small Biz Geek

Small Business Design, Marketing & Technology Journal

Website design services

Nerdy analysis of small business design, marketing and technology

  • The Internet
  • Marketing
  • Graphic Design
  • Web Dev
  • Web Design
  • Social Media
  • Technology
  • Miscellaneous

This WordPress Media Uploader Problem Makes Your Blog Look Amateur

Published: August 11, 2015; Updated: August 30, 2017 Filed Under: Design, Video, WordPress

An often overlooked issue undermining many WordPress websites is that the media uploader automatically creates and then crops multiple thumbnails based on uploaded images.

WordPress Thumbnails

The media uploader isn’t intelligent and doesn’t know how to crop images. Cropping position produces a difficult to understand image because the visual information is obscured.

For example, if you add a featured image to a post, several smaller versions are created at different dimensions depending on your theme settings.

Assuming you have a blog (and therefore a blog feed archive) these smaller, roughly cut thumbnails will be served automatically as preview images for website post summaries and search archives.

This is where the trouble starts.

Because WordPress is logical – not intelligent – it doesn’t know how your images ought to be cropped, so it just crops them towards the center point of the image as a default.

Your thumbnail images may get butchered and cropped totally off center, making your archive look like the work of an amateur.

How the WordPress Media Uploader Behaves

The thumbnail sizes are usually controlled in Settings > Media in the WordPress dashboard, but if you’re using a framework like Genesis it’s possible there are additional functions that either override the native settings or add extra thumbnail sizes.

Small Biz Geek is using a customised version the Magazine Pro theme running on Genesis and five thumbnail sizes are created whenever I upload ANY image via the media uploader.

It almost certainly varies from theme to theme.

So, if I were to upload a featured image to a post or page called Featured Image.png, WordPress will create the extra thumbnails while automatically renaming and hyphenating each file with the new dimensions:

  • Featured-Image-100X100.png
  • Featured-Image-150X150.png
  • Featured-Image-280X112.png
  • Featured-Image-300X120.png
  • Featured-Image-360X200.png
  • Featured-Image.png

Here’s some screenshots showing how the cropping looks compared to the original image:

WordPress Media Upload Cropped Thumbnail Examples

Notice how roughly cut some of the images are. They’re not all bad but the 100×100 and 150×150 images are the ones that are used by my site in the archives.

How to Fix Badly Cropped Thumbnail Images

The only way to deal with the cropping issues is to recompose the thumbnails manually.

It may seem like a lot of work but it’s worth nipping it in the bud. You’ll get into the groove of doing it and your blog archives will look waaay better.

Here’s what you’ll be doing on a regular basis:

  • Upload your featured image, allowing the thumbnails to be created
  • Download the images from your website server using an FTP tool such as FileZilla
  • Manually correct the images using something like Photoshop or Paint.Net on your computer
  • Upload and replace the images on your web server
  • Refresh your browser and empty the cache of any reverse proxy (like Cloudflare)

1) Add Featured Image

Upload your featured images as normal. I create mine according to whatever the recommend size for featured images is.

It varies from theme to theme, but for this website, it is 750 X 300 px.

You do not even need to insert the image into a page or post. As long as it has been added to the WordPress library, the thumbnails will have been created.

2) Download Images from Web Server

You’ll need to navigate to the folder where images are saved to by default in WordPress. You cannot really do this with tablet devices. A desktop PC is advised for this kind of thing.

Unless you’ve customised your WordPress directory structure, it will use the default uploads folder located inside the wp-content folder.

Use your credentials to access your server. Open the folder wp-content and you’ll see it contains sub folders arranged according to year and month.

You need to access the the folder of the year and month that corresponds to whenever the post was created.

FileZilla WordPress Uploads Folder

Typically, the folder path you want looks like this:

www.yourwebsite.com/wp-content/uploads/2015/06

Once you’re in the correct folder, highlight/select the images you want and drag them to a folder on your machine. I just copy them to the the desktop.

3) Manually Correct Images

What you need to do now is select and copy the largest version of your featured image to the clipboard and resizing it for the other thumbnails.

This is much simpler than you think.

You’ll only be copying and pasting the largest version of your featured image into and over the smaller thumbnails, resizing them, adjusting the composition and then “flattening” the entire image.

You then just save the image and it will overwrite itself if you flattened it. Do this for all the thumbnails that have been badly cropped.

WordPress Thumbnail Composition Example

Remember, it’s about recomposing the images in the best possible way so that they communicate properly.

You want to present the visual information within the constraints of the thumbnail aspect ratio.

4) Copy Back to Server

When you’re done editing, copy all the images back into the uploads folder via FTP. You’ll be asked if you want to overwrite. Say yes, and you’re done.

Changes on your site might not show initially, especially if you’re going back to older posts and editing thumbnails.

Browser caching may be responsible so empty your history. In other cases, CDN tools like CloudFlare can be quite aggressive, meaning you’ll need to purge the cache to see the changes.

Video Demonstration

Watch the video below for a run through of how I optimise my thumbnails:

Watch video on YouTube

 

Social Plugins Rely on Thumbnails

Some WordPress plugins, like JM Twitter Cards, rely on different sized thumbnails depending on what type of card you use with your post.

If you select the “small image with summary” card setting, it will most likely go for the 100×100 image.

Be glad you’re future proofing your open graph images by optimising the thumbs for social media too. You always want your visual value proposition to be well framed.

Warning

Beware of plugins like Ajax thumbnail rebuild. This is often touted as solutions to thumbnail problems but all it really does is reset your thumbnails to a default crop, thus eliminating all your careful customisations.

I’m sure the plugin has its uses but keep in mind any thumbnails you’ve manually recropped/recomposed will be reset.

Related Posts

  • Twitter Tweet Chats: The Good, The Bad and The Spammy
  • Local Business Websites: “About” Pages Done Right Will Attract and Delight Readers
  • Badly Behaved Images? Leverage the Power of Vector Graphics to Eliminate Unruly Design

Filed Under: Design, Video, WordPress Tagged With: Cropping, Design, Images, Media uploader, Websites, WordPress

Donations Welcome

If this article helped you in some way, you can buy me a cold beer or a hot coffee.
Donations are gratefully received.

About Small Biz Geek

I'm Darren, helping small businesses with design, marketing & tech.
Read more about me and follow me on Twitter.

Small Business Website Design

Do you need help with something web related?

To hire me see the page about my services.

Reader Interactions

Subscribe to Blog Feed by Email

Your email address won't be shared.

Add Your Thoughts Cancel reply

Your email address is safe and will NOT be shared with anyone else.

Hateful, spammy or abusive comments will not be tolerated.

For more information please see the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Search Website

Latest Journal Entries

  • Exposed: The Chinese Investment Fraud “Recovery” Scammer Deceiving Victims
  • Computer Says No: Does Your Website Work for People with Disabilities?
  • Chinese Tinder Profiles Are Using Photos of Pretty Girls to Scam “Investors”
  • Small Biz Owners “Trapped” Using Email Addresses Belonging to Internet Service Providers
  • In the Pandemic, QR Codes are Finally Proving Worthy in the West
  • Small Businesses Finally Start Marketing and All It Took Was a Global Pandemic
  • Unable to Meet in Person? Communicate Stress-Free with Online Audio/Video
  • UK Contractors Operating Ltd Companies Should Be Mad as Hell with HMRC and IR35
  • 20 Years On and Website Hit Counters are Still a Waste of Pixels
  • Competitors Can Easily Edit Your Google and Facebook Business Listings
  • Waiting on Final Images for a WordPress Website? Use Temporary Placeholders and Design Around Them
  • GoDaddy Loves Spamming Branded Footer Links to WordPress Installatron Sites

Footer

Primary Navigation

Home
About Darren
Good Books
My Tools
Blog Posts
Hire Me
Contact Me

Secondary Navigation

The Internet
Marketing
Graphic Design
Website Development
Website Design
Social Media
Technology
Miscellaneous

Derby & Nottingham Area

Small Biz Geek
Office 897
37 Westminster Buildings
Theatre Square
Nottingham
NG1 6LG

Telephone

Tel: +44 (0) 115 714 3290
Tel: +44 (0) 7951 897 243

VoIP

Skype: ilkestonwebdesign
WhatsApp: 07519 897 243

Email

[email protected]

Let’s Connect

Twitter
YouTube
LinkedIn
RSS

Subscribe to Blog by Email

Subscribe to Blog By Email
Genesis Framework by StudioPress


Copyright © 2022 · Small Biz Geek · Privacy Policy · Commenting Policy · Website Disclaimer · ICO number: ZA305900


Written and designed by Ilkeston Web Design