(Reading time: 2 – 3 minutes)
Benefit: Correctly sized images load faster, providing a better experience for readers.
Problem: The default values for the WordPress facility are too generic for most blogs, leading to images that are too small or too large.
Practical WordPress Tip: Allow WordPress to automatically size your images correctly by setting your image sizing values to match the width (and fractional widths) of the appropriate container (usually, where your blog posts appear).
Here’s how:
When you emplace an image in your blog posts, you have to decide on whether to put it to the left, to the right, in the center, and what size it is.
When you upload an image while writing a blog post, you have the option to embed that image in your post, in a range of sizes: Thumbnail, Medium, Large, and Full Size.
Here on Website In A Weekend, the main content column is 480 pixels wide. So I want an image size that fits right in the center of my column, with a little bit of margin to each side. The Settings >> Media menu has exactly what I need: I set the value for the “Large” size at 470 pixels:
Set your WordPress media settings for optimal image sizes.
Why: Getting your image handling setup correctly can help save you time and trouble in the future. For example, images going into posts should be sized a little narrower than the width of the content block, to provide the largest possible image while also accounting for margin and padding adjustments.
Previous Practical WordPress Tip: Practical WordPress Tip #14: Manage a huge Draft Queue for Daily blog posting
Next Practical WordPress Tip: Practical WordPress Tip #16: Create a Template For Blog Posts With Common Structure
Do you have a Tip? Would you like to write a Practical WordPress Tip? Each Tip is very short, and focuses on a single action that anyone can use right away, no programming required! If you have a Tip that fits into this series, and you’d like to publish it here on Website In A Weekend, send it on!
Would you like more? Send me a letter...
{ 8 comments }
What a great article! You explain this really well, and wrestling with image size is something I’m dealing with a lot. Thanks Dr. Wordpress!
One thing I like to do is to drop my images in Photoshop before I upload them to resize them as needed. Photoshop does a much nicer job resizing stuff.
GIMP probably does the saem thing for those folks without the Shop.
Sean´s last blog ..Speed Bumps on the Road to Productivity
@doc – Give us a pointer when you have something you want to show off!
@Sean – That’s definitely a great way to do it, and I definitely resize in GIMP myself for many images. But try this top out and see what you think… WP does a bunch of automatic resizing for you… which – I now see – I need to emphasize in this tip.
Sort, Simple, and useful. It will save me a lot of time resizing my images for my posts
Blake @ props blog´s last blog ..5 Flash Maze Challenges to Strain Your Brain
I am really starting to think that you might be one of the best online tutorial bloggers I have seen yet, your directions and illustrations make it even simple enough for a monkey like me to figure out.
Extreme John´s last blog ..Hit While Pumping Gas
@Blake, yes, it will save you massive time if you get the sizes correct. I’m using thumbnail at 150, Medium at 300, Large at 470, main content column is 480 px wide. I’m considering changing Medium to 240 (i.e., half main column width).
Note: when you change column width in your style, make sure your image sizing settings still work.
@Extreme, thanks, I’m glad you find them useful. I like to write, having an audience is just a bonus!
Dr Wordpress!´s last blog ..Programming Is “Actionary” Blogging Is “Reactionary”
Thanks man, I never adjusted my maximum width size till now , I guess too lazy to do it and everytime when I upload an Image from dashboard I have to edit it to fit the size..
@Harsh, this tip will help you put better images in your posts a lot faster.
Dr Wordpress!´s last blog ..New Obsessions — Opportunities and whimsy abound in stagnant economies
Comments on this entry are closed.