How to resize an image for web display?

Question

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, ...?

Answer 1

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.

Answer 2

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.

Answer 3

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.