Last updated on:January 25, 2017
You guys remember Jurassic Park III? Yeah, the one with Roman Numbers. The one where William H. Macy (of all people) charters a jet to land Alan Grant on Isla Somebody to go find his missing kid. Just after deplaning on Shit Jungle Runway, we get this classic exchange (I make no apologies for the quality, this is the best 2001 technology can buy):
Yeah, so yelling through a megaphone into a jungle teeming with toothed creatures is a very bad idea, who knew? You know what else is a very bad idea? Putting whitespace around images. Dr. Grant would agree with me.
I think the reason I love that phrase is because it’s obvious to Dr. Grant why yelling your head off on a carnivore-infested island is a bad idea. He doesn’t disagree with what’s-her-name’s goal of finding her son, he disagrees with the method she’s chosen to accomplish that goal. Just like I don’t disagree with the goal of getting more space around images! There’s just a much better way to accomplish it.
Don’t Put Whitespace Around Images
If you know what I mean by that, pack up and go home, you’re done for the day. If you want more of my outpouring of vitriol for poorly-saved images in WordPress, by all means, carry on!
First off, what do I mean by “whitespace.” Ok. Whitespace is any space around the image that the image doesn’t need. Here’s a quick visual aid:
If you put the image on the left on your site, it would have roughly 80 pixels too much space allllll around it. There’s just one eensy, weensy, teenie tiny little problem with that: it’s not supposed to have 80 pixels all around it. It’s supposed to have whatever margin and padding the developer who wrote your theme’s CSS gave it. It messes up the site’s design by creating an inconsistency. Inconsistencies belong in HELL.
I see this problem on about every other website I work on. Images with transparent backgrounds, images of company logos, and many so ons. It makes styling the site much more difficult.
Why Do People Leave Whitespace in Images?
My best theory on that is that they want to control how much space there is around an image. The problem is, leaving whitespace in an image is not flexible. Just because an image needed 20px of whitespace on the left on desktop does not mean it needs 20px on the left on mobile! Writing CSS around an image like that is a nightmare. A living nightmare!
Ok, you’re making me anxious now. How do I fix this?
I wish I had a plugin that would auto-crop this stuff. But unfortunately, it has yet to be invented. The best way to do this is to use the crop tool in the WordPress admin.
- Go to “Media” in the WordPress Admin.
- Click on the offending image.
- Click the “Edit Image” button near the bottom.
- Click and drag to select the crop area.
- Click the crop button (it looks like this: )
- Finally, click “Save,” or none of your righteous cropping will see the light of day.
But what if I need extra space around a WordPress image? I really neeeeed it
That’s ok! There are three things I’d try, depending on your situation:
- Ask a developer. They’ll be able to make sure that the extra spacing you add on the desktop breakpoint doesn’t break other breakpoints.
- Use the Text Editor to write some quick inline styles. This isn’t great, because it won’t be that flexible (unless you’re adding CSS Media Queries in there too), but it could get the job done. If you haven’t made your peace with the Text Editor yet, you could always
- Install a fancy plugin. The plugin “Advanced Image Styles” adds some text fields for you to adjust an image border and margin without sullying your hands with dirty dirty markup. To access it:
- Click on an image.
- Click the pencil icon ( ) to edit it.
- Click “Advanced Options” if it’s not expanded.
- Marginalize your image.
All that to say… don’t put whitespace in your images. It hurts you, it hurts me, it hurts everybody. Make the world a better place with less whitespace.