Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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.
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.
You can set the size of the output in different ways, e.g. in the dialog for the command File / Save for Web.
However, since your desired output format is not the same proportion as 3200 x 1200, you will have to decide how to change the original image.
Perhaps a different canvas size and fill with a single background color will do? That part depends on what kind of image you are resizing - you will have to provide more information about the image in your question if you want more detailed suggestions.
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".
Your question's not entirely clear to me, but it sounds like you're worried about aspect ratio, as 3200x1200 scaled to a width of 530 proportionally would have a height of 199, not 411.
Aspect ratio's not something you can change without doing one of the following:
Cropping. Scaling the image so the height is 411, and the width will be much wide than 530, so you'll need to just pic which 530pix wide portion of the image to stamp out.
Distorting. Don't do this option. This is what we're trying to avoid.
Changing your design some so it looks good at 3200 x 2482, then scale it down.
It sounds like you just started designing with the wrong shaped canvas.
If your question's a more specific software question about how to do any of the above, you'll have to rephrase it.
If your image is a PNG or a GIF, then you are probably viewing the image in Index mode. Resizing in Index mode will look terrible.
You will need to convert to RGB Mode then re-size.
Go to Image > Mode > RGB before attempting to resize.
