Sizing Images: Why Your Pictures Look Weird on the Web

Removing the Ugly Factor with Appropriate Size


If you’ve downloaded images from any website and tried to size them larger you quickly discovered the images were pixelated, and in a word – ugly. When sizing photographs to use for the web, as compared to print, there are a few major differences to keep in mind. Using the wrong size, resolution or file type. Images for print and the World Wide Web differ in a variety of ways. If you intend using the same images in print as you choose for your website, you may need to opt for the print quality version. That way you don’t have to buy the same image twice. In fact, I generally purchase the larger sizes just in case I want to do that. You can always reduce the size and resolution; you can’t make it larger without losing quality.

A photographer can always crop, resize and optimize an image for the web, but it cannot be enlarged it for print if it was taken off of the internet. The image will pixelate causing deterioration in quality, giving it the blurred, fuzzy, undesirable look. By understanding a few key elements in how to prepare image files according to their use you can assure that image will look proper and not waste any unnecessary space.

Print Image Specifications

As stated, images used for print are generally a higher quality and resolution than those used for websites. This, of course, means the files are much larger. As a general rule, your images should have a resolution of 150 to 200 dpi for newspaper print and 300 to 400 dpi for glossy print. For high-quality commercial print, your image resolution will probably need to be as high as 600 dpi. Of course, you can’t do that with a standard JPEG; it must be a high-resolution large file to obtain that resolution.

Most commercial print companies utilize presses that use 4-colour separations. These are plates that print in four separate colors which, when combined on the print material ,create the final color blends. This means that images should be CMYK – Cyan, Magenta, Yellow, and Black. Using image-editing software the resolution can be changed to 300 dpi, converted to CMYK and then saved with the file type appropriate to your needs.

Note: You should never increase the pixel dimensions of an image and always resize proportionately. This is because the

Web Image Specifications

Speed is essential for websites, so when creating images for the Web, make the resolution and file formats smaller than for print images so that they can load quickly. The three main file formats used are JPG (JPEG), PNG and Gif. In general, JPGs are used for (rectangular) photos while Gifs are used for cropped images with transparent backgrounds, such as logos, and animations. PNG files can be transparent, too, but they tend to be larger files than JPG or GIF files.

Gif images are a lower quality and don’t use as many colors as JPG or PNG, making them unsuitable for photos. PNGs, on the other hand, can display images with a variety of transparency effects, and can be used for both photos and transparent images.

*If an image is saved in a different file format, such as Tiff, EPS or PSD, reopen the file and resave it in the appropriate file type with photo editing software.

Sizing images to use on your website

The standard JPEG (jpg) image usually has a resolution of 72 ppi (pixels per inch) and use RGB colors – red, green and blue (the three colors of light, which when combined, create white). The output size varies from camera to camera. Scanners also use the RGB color mode and the size varies depending on the scanning resolution chosen but the image can usually be saved in a variety of file formats.

Although JPEG files are great for the web, the digital photos and scans are much larger than can fit on a web page. They always need to be resized. While this can be accomplished using HTML code, the file size will be so large that they will take a long time to appear on the page even with hi-speed. If a site visitor has a poor internet connection they will have difficulty loading the file, and the web page may stop loading before the image appears. That’s not the best impression to leave with your site visitors!

Instead of using HTML to resize the images, use image-editing software to crop and resize your image to the size you want it to be on the page before you upload to your website. If your image was supplied to you in CMYK convert the color mode to RGB. Resave the image choosing the “optimize for web” option if available. If you see that several images will be used on a page, try to optimize the images to a file size less than 50kb, again, keeping the user experience in mind.

Optimizing images for the Internet

When editing your images, make a practice to optimize the images for the web using the “Optimize for Web” option. Optimizing CMYK and grayscale images automatically converts them to RGB (JPGs & PNGs) or the (RGB) Indexed Color mode (Gifs).

Even though you can use the “Save As” option, keep in mind that CMYK images will need to be converted to RGB first: they cannot be saved as Gifs or PNGs using this option. Also, be aware that CMYK images saved as a JPG will not automatically convert to RGB. These are simple steps you can take to make sure the colors look right on your website, and to keep the file size down for (again) a wonderful user experience.

When optimizing images for the web image resolution is also converted to 72 dpi regardless of its original resolution. However, the pixel width remains the same. Check your pixel width before optimizing. Downsize your image first if necessary.