Prevent your images from being too large

22 Responses

FreewareMatter

Jun 17 2009 11:09

I think we should use percent for not worry about layout, it fits all size of layout, like this:

.post img {max-width: 100%; height: auto}

WpDite

Jun 17 2009 11:41

Wah! I think many people need this. Great Work.

Hami

Jun 17 2009 12:31

Well yeah this will surely help a lot, though I figured it out very late and some years of pure blogging…

p.s. nice tricks and hacks, always great to read em all.

Anand

Jun 17 2009 12:59

That’s a great tip I will definitely try out.

Erik Pettersson

Jun 17 2009 14:39

This is NOT the way to go. Config your media settings to scale your images properly instead. Using CSS to style images in a non-modern browser will result in a really bad presentation.

kazouar

Jun 17 2009 15:33

Sorry but this is the worst suggestion I ever heard about image scaling! Your images will definitely appear aliased/jagged – whatever. Go to Settings > Media and crop images to desired dimension. There’s even more options for image size by using filters but this will probably belong to another topic.

Seo83

Jun 17 2009 15:59

Great tip buddy, i will definitely try this one on my blog. Thanks a lot
and keep updating..

Joe Liu

Jun 17 2009 16:13

Wordpress has built in image scaling capabilities within the CMS.

You can set those options in the media tab of the admin. There is no need to use a CSS hack to display images at a constrained width.

Gary LaPointe

Jun 17 2009 18:39

Does this crop the image or scale it?

paul

Jun 17 2009 22:20

surely though this is bad practice, as the image is sill going to be its original size, just scaled down, so a 4mb raw jpg from a digi cam is be scaled within the browser but still be 4mb.

Guide To Gadget

Jun 18 2009 05:30

Is it work on Internet Explorer 6?

Jean-Baptiste Jung

Jun 18 2009 10:16

Yes, configuring WP to crop images is better. But don’t forget that WpRecipes.com is all about hacks

@Gary Lapointe: It scale the image.

@Guide to Gadget: No.

Dave Kinsella

Jun 19 2009 01:08

I recently setup phpThumb to scale images in my theme, it wasn’t too difficult to do. TimThumb is another similar but more lightweight solution.

used tires

Jun 19 2009 02:42

I must say that is a great hack I have always done image resizing manually on my personal blog due to width restrictions, but now I can really see how this could be helpful to me

Till then,

Jean

Sarah Lewis

Jun 19 2009 16:26

If you’re the blog owner, certainly you should use your media settings to create appropriately sized smaller versions.

The CSS method in this post is a reasonable idea for any theme that will be distributed, though, as many bloggers don’t customize their image scaling.

Consider it a safety net: it won’t interfere with appropriately sized images, and it will keep too-large images from screwing up the layout.

All that said, it might be more sensible to use the content_width variable.

Jean-Baptiste Jung

Jun 19 2009 17:32

@Sarah Lewis: Thanks for the content_width info, I didn’t knew it!

Red

Jun 21 2009 17:03

This is a well known trick, hower, it won’t work in IE6. You have to add this line as well: width: expression(this.width > 500 ? 500: true);

Chuck Reynolds

Jul 28 2009 02:46

What needs to be built into WP is php resizing… far too many sites I see are 400px wide image but are actually 3+ megapixel uploads that you just watch download…

gofree

Jul 28 2009 08:16

I love this trick.
@Red, where can I add the code to this in blogger:

.entry img {
border:0;
padding:4px 4px;
background:#d2ca9f;
border:1px solid #d2ca9f;
margin:2px 5px 5px 0px;
max-width: 100%; /* not working in IE6*/
}

Sarah Lewis

Jul 28 2009 19:20

@Chuck: resizing is built into WordPress and is the default action when adding an image to a post. A blogger has to specifically change the option if they want the original size.

The solution this post proposes is for those instances when the default width of the resized image is still too wide for the theme, or when the blogger overrides the resized option and opts for the original size.