Alley in Pisa, Italy

by Lars Kotthoff

submit your photo


Hall of Fame
View past winners from this year

Please participate in Meta
and help us grow.

Take the 2-minute tour ×
Photography Stack Exchange is a question and answer site for professional, enthusiast and amateur photographers. It's 100% free, no registration required.

I'm building some websites for a friend of mine, and putting them up on my home webserver. This server is pretty simple and my network connection ain't that good so the images take pretty long to load.

For now I'm just resizeing the images (which usually are about 2000px x 1000px) using just html resizing (to about 750x375). Of course this is not optimal since the images are pretty large.

I'm looking for the best way to resize the images in a way that they still look good on-screen but have much smaller filesize.

I would like to use imagemagick because this allows for some good automatisation (I'm a geek but my friends aren't so I want to keep things simple). I've tried using:

convert -resize 750x -density 72 in.tif out.tif

to convert the images to 750px width whilst keeping the aspect ratio, and reduce their density to 72dpi. This only reduces filesize from 3.4MB to 1.2MB though.

What is the correct compression method (filtype), the best resolution, density, ...?

share|improve this question
3  
Any reason you're using TIF for the web? –  rfusca May 21 '12 at 18:53
    
no, this is just the format the images came in. No specific needs are there. (I'm trying out jpg now). –  romeovs May 21 '12 at 19:06

3 Answers 3

I usually do something like the following (in bash):

original=something.tif
reduced=${original%.tif}.jpg
options="-resize 720 -auto-orient -strip -unsharp 3x1+0.5 -quality 85"
convert $original $options $reduced

-auto-orient will get the correct orientation if the camera has a gravity sensor, -strip will remove the metadata and the thumbnail (usually useless on the Web), -unsharp will apply some sharpening after the reduction, and -quality is the JPEG quality factor.

share|improve this answer

When you serve images from the Web, you will typically use:

  • JPEG for continuous tone originals such as photographs
  • PNG for good compression on images that can easily be compressed using an indexed lookup table. 24-bit PNG is suitable for photographs, but can be more bulky than JPEG
  • GIF for images that are not continuous tone. At this point, PNG is well support across browsers, so there is no continued reason to use this indexed compression format

A few notes: JPEG is "lossy" compression, so there will be some image degradation. Often, if you are downsizing, this degradation will not be noticeable unless there are regularly shaped edges against contrasting colors (think, vertical side of a building against a clear sky). PNG and GIF are both lossless unless you allow dithering. If you do allow dithering, your resultant file size will be less, but in my opinion the result is inferior.

I would encourage you to read the discussion on the ImageMagick site if you haven't already.

From ImageMagick's own site, here is a sample command that would compress to jpeg:

convert jpg_lossy.gif   -quality  50%  jpg_lossy_50.jpg

You would obviously add in the -resize 750px to get both your resize and compress at one shot. If 50% is too much compression, crank up the number until you get acceptable results.

Further note that if the images you are downloading are page graphics and show on more than one page of the site, the viewer only suffers the download hit once. The browser will then have cached the images for future display.

share|improve this answer
  1. Density is useless on screen. A 1000px x 1000px image at 10dpi or 1000dpi will appear the same. Final pixel resolution is all you care about. 72ppi is the traditional screen resolution... but again, it doesn't matter.

  2. As far a size goes, I usually pick the largest size I think they'll be viewed at, keeping in mind too large may make them susceptible to poaching. Often I use 1024px wide.

  3. JPEG will yield the best lossy compression, and PNG24 will yield the best lossless compression.

  4. I do not like imagemagick. It creates sub-par image quality at a larger file size. For some uses, it's fine. But it cannot deliver high quality without way too large file sizes. I prefer to use Photoshop, Save for Web... Then I use a tool like jQuery to handle browser resizing. That way the image quality isn't damaged as much and the file size isn't super huge.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.