Is this better?

For those of you who told me to resize my pictures, my wonderful design team–Leah & Justin–walked me through the process and now we can compare the results. This is how a picture used to appear on my site:

IMG_1.JPG

And this is what it looks like when I resize it in iPhoto to have a 425 width before uploading to Flickr:

IMG_2.JPG

Is the second one better? To me they look exactly the same–but I’m not very image savvy.

And in case you’re wondering what you’re looking at–last week I made a vegetarian chili I found on Epicurious (recipe here) and served it with Dorie Greenspan’s magnificent cornbread muffins, a recipe I almost made again today (which you can find here on Serious Eats).

36 comments

  1. The first one is much better, much more detailed and crisp a photo — much richer colors.

  2. No,not better…while the food fills more of the space, it is now blurry where before the food was crisp and clear. Of course, both look absolutely delicious as usual!

  3. Ah, I see what you’ve done there. Yeah, “resizing” images on the web by changing the width and height attributes in the html is a cardinal sin.

    However, that being said I do believe that the first image is sharper. The right thing to do is to get yourself a better image manipulation tool. For example, if you use Photoshop’s Bicubic Sharper resampler option the resulting image doesn’t look fuzzy like the iPhoto’ed one.

    Ask Justin. I’m sure he’ll have some suggestions.

  4. I didn’t know what those people were talking about (resizing the pictures) – I never had any problems with the alignment of pictures and text. Of these two pictures, the second one is blurrier and dingier than the first.

    Maybe it’s a question of what browser the page is viewed on. I’m running Firefox 2.0.0.13 on a MacBook.

  5. It looks very blurry in the second image. I never thought there was anything wrong with your images previously though.

  6. The edges are very jagged in the non-resized first image. It’s because it’s depends upon the end-browser’s re-sizing algorithm which is, given, just clunky. However, the second image is blurry…enter “sharpening”. Without actually doing anything else to your image, I simply sharpened (which adds white to the edge to heighten color difference) before resizing. I wanted to stay true to the (possible) simplicity of process you intended, so I just left it to the 1) sharpen and 2) resize.

    My results are at

    http://img101.imageshack.us/img101/5386/agbe2.jpg

  7. The first is better, the second one is all blurry and you lose a lot of detail.

  8. first one is clearly, um , clearer

    firefox 2.0.0.13 but it shouldnt matter

    what was the original photo size?

  9. First one looks more delicious. What Mahlookma says is true, but it sounds like you can spare yourself any extra steps and just go back to the original method…

  10. The second one is blurry but that probably has to do with the settings you used to resize it. Even though it’s blurry, at least the straight diagonal lines aren’t jagged like they are in the first picture. If you’re using Safari you won’t notice because it has great image rendering for resized images, but for the 95% of the population that don’t use Safari, images resized in the browser looks strange.

  11. I like the first one better. The image is definatly sharper. I can see smaller details better olike every grain of pepper on the slaw.

  12. Agree with mahlookma’s comment. What program did you use to resize the image? Normally you are not going to lose sharpness when you resize an image like that…

  13. Adam

    Thank God I read some of the reviews posted here first, because at first I thought you were playing a trick questions on us! The second picture is obviously the better of the two, since clarity, sharpness and definition are far superior.

  14. Screw everybody that gets into the nitty gritty details of picture sizes and what have you’s. It looks amazing on my browser always has. I thought this blog was about food anyway (which is why I’m totally addicted). Keep up the good work and please come to Houston soon! We love you here!

  15. Ok, so maybe “screw everybody” was a little harsh…I just meant that the writing part is awesome and the pictures are a great way to enhance, whatever size they may be…Sorry if I offended.

  16. I think the first one is definitely better – it’s much sharper. The second is blurry and has lost a lot of definition.

    For the record, I’ve never had a problem viewing any of the photos that are posted.

  17. Adam, You didn’t quite get the resizing correct on this one. I checked your Flickr site, and you resized it to 425 x 318, but your blog is displaying it as 420 x 314. The main point is, however, that your pictures look much sharper and un-pixilated on your Flickr site, even though they are around the same size. You should be able to get the same results on your blog–keep playing around because you don’t quite have those results yet.

    For example compare the edges of the bowl:

    http://farm4.static.flickr.com/3003/2356970990_02039a7053.jpg

    to your post

    https://www.amateurgourmet.com/2008/03/spicy_cauliflow.html

  18. Craig is correct in that the second image is also browser-resized. Oddly enough, its height is 1 pixel off from the original which displays at 420 x 315.

    At any rate, I went ahead, snagged the original and went through the process (sharpen, then resize)with a width of 420 instead of 425. My resulting image is 420 x 315 and can be found at

    http://img177.imageshack.us/img177/2558/agdn4.jpg

  19. The first one is better–clearer, sharper. They both appear the same width/size on my screen.

    I’m running Safari on a relatively new mac.

  20. They both look good but the first one is more crisp. See the nice cracks in the muffin tops. Yum.

  21. Something is screwy…the design team is working on it. We appreciate your patience!

    Leah

  22. I’m monkeying around with this issue too and am finding that if I resize it before, it’s not as good. I like the first one better! I would also like to eat one of those corn muffins right now. Nom nom nom.

  23. though i prob wouldn’t have noticed if you didn’t have them side by side, this is definitely not better. the second is blurry. you can really see it in the coleslaw.

  24. First one is way waaaaay more crisp. Look at the chilli in the first pic. It has a nice, crisp red tint to it. The second is blurred and brown. I can also see the texture on the muffins in the first pic.

    Leave that image (number 1) be.

%d bloggers like this: