Advertisement


Width and height pixels reduction with specific height and width


Question

I am trying to reduce the pixels of an image for the web, but it looks very bad (for exam).

3200X1200 pixels is the original size of the image, but I would like to convert it to 530x411 for my web page.

If I do it with image size options it looks very bad. Please, give me some ideas.

2013/06/10
1
1
6/10/2013 12:39:00 PM

Accepted Answer

First, you have to use a software product which has good algorithms for resizing, or the result will be blurry or blocky. Don't use Paint or similar. If you want a free software application, use IrfanView or GIMP, there are also professional applications. In the resize dialogue, choose the better algorithms, even if they are marked as "slow", this is OK for current computers with such a small image. Bicubic or Lancozs would be a good choice.

Second, you need the same side ratio as in the original, else the resized image will appear stretched in one direction. Obviously, you have a different ratio here, with 3200/1200 in the original giving you 2.67 and 530/411 giving you 1.28. One option, as Olle Sjögren suggested, is to resize your canvas to the height of 3200/1.28=2500 px, leaving the width at 3200, and centering the image in the vertical (Y) axis. If you are using a png, leave the background transparent, if jpg, fill the newly created space with the color or pattern of your site's background (pattern is a bit of a problem here, you may need to apply it very carefully to make it fit seamlessly). Then downsize to 530*411. The other option is to crop the image first to a width of 1200*1.28=1536 px, then resize to 530*411. A combination of crop and added height is also good, you can fit it at the smallest possible crop which retains the image's subject intact, and then fill the remaining missing height only.

Whatever you do, the correct order is to first crop/fill your image to the correct side ratio (you will know that the ratio is correct if you divide width by height and the result is 1.28) and to resize second. It is often advisable to use a slight sharpening filter after resizing, but some applications will do that automatically for you, so look critically at the output first before deciding whether to sharpen.

2013/06/10
3
6/10/2013 10:52:00 AM

Check the resolution in your image. If it is higher than 72, set it to 72 and that will re-size the image down a bit. Then from there go to the desired size. That should help with the "artifacts".

2013/06/10