Wednesday, March 15, 2006

Large, large pictures

I've visited a few new food blogs recently (finally having time to read again!) and have noticed that many bloggers seem to have a misconception about how images work on the web. If you have a large image and you set the size to be something different than your original in the html code, your readers are still waiting for the huge image to download and their browser merely rescales it to fit in the size you've decreed. If you want to create a reasonably sized image for download, resize it in a graphic program before uploading it somewhere and linking to it from your blog. For me, something under 100k is reasonable although I usually shoot for less than 50k but if you're taking full size images from your digital camera and not resizing them, you're forcing your readers to wait for a huge file to download very slowly. And they also, by the way, blows up to the whole screen on RSS readers. The one I just ran into, the third blog with huge pictures in the half a dozen blogs I've read this evening, was a 1.2 Meg file, although it was set to display only in a roughly 200 x 200 pixel space.

Posted by Ellen from Chronicles of a Curious Cook


Sam said...

I think the blogger uploead code changed and it does this autmatically if you load up a picture via blogger now which is why people dont realise or forget to change it like i sometimes do.

Alanna Kellogg said...

I'm likely an offender: but honestly have no idea how to make the changes you're suggesting. I'm using Picasa -- the PhotoShop box is glued to the credenza for 9 months now so is likely to remain there -- and Blogger.

A "how to" would be wonderful!

Anonymous said...

Not having the proper image dimensions will also make your image look yicky as well as waste bandwidth.

Another common mistake is the camera might be set to shoot 300dpi and they don't convert the image to 72dpi.

Open that Photoshop box! If you touch none of the zillions of other commands, under 'file' is the 'save image for web' command that not only automatically sets the dpi, but you can put in the dimensions you want. That command does the best job compressing a jpg to the smallest it can while mantaining the best quality. Using that command, rather than the usual 'save as' can shave off tens more k.

Here's an image tag:
<img alt="imageURL" width="200" height="200">

Photoshop is expensive, but Photoshop Elements isn't and has this command. Other options like Graphic Converter (shareware) or iPhoto for the Mac or MS Picture (or whatever it's called) on the PC all have an image size command. Change the dpi to 72 if needed, and change it to the dimensions you want, save as (don't write over you original!) and enter the correct dimensions into your image tag.

Kalyn Denny said...

I wish I knew if I"m doing this wrong. I use a program that came with my camera (casio Photohands) to resize the pictures, but it doesn't set dpi (which I don't even know exactly what that is) just the image size. Am I one of the offenders?

Ellen said...

I didn't give detailed instructions on how to fix this because I use an old old program called PhotoImpact that no one else seems to have. Kaylyn--I checked a few of your picturs and they're fine, about 30k. ak-the one I checked of yours was bigger than you probably think but not one of the HUGE ones! ;) Within Explorer you can right-click > Properties and see the actual file size or if your software has created a thumbnail image, like Blogger does automatically I think, you can click on the picture and it will expand to full size. Kiplog-thanks for the explanation so I'm personally graphically challenged and do the bare minimum.

Kalyn Denny said...

Ellen, thanks for checking for me. I'm so glad to know I was doing it right.