Images & graphics for the web


Last updated: 21 April, 2010

Digital images can come from many places: your digital camera, the web, digital scanners, and other sources. Before uploading your images and graphics for your website, you must often do some preparation first to optimize them. Common problems encountered with images and graphics that aren’t ready for the web are:

Fortunately, there are some easy steps to take to prevent there sort of problems. It’s a good idea to go through your image library before uploading your pictures for your website. There are four main things to check before an image is ready to be uploaded:

File size

How big (in terms of bytes) is the image? Just like image dimensions, the smaller the better. Under 100 Kb for photo-realistic images is good; under 50Kb is even better. The more images you have on a page, especially large ones, will slow down the time it takes for a visitor to load the page. Slow loading pages will drive people away from your website. Large image file size will also take longer to upload. If you’re not sure how to verify file size, simply right click on the image file and select Properties.

File format

What file format is the image in? The two most commonly used image file formats that are cross-browser compatible are .jpg (or .jpeg) and .gif. Either one will work for a particular image, although .jpg is best for photo-realistic images while .gif is better for simple graphics. Newer file formats such .png is becoming more and more popular for use for graphics that require more colors than .gif files. However, it’s still not ideal to use .png for photo-realistc images given that it’s file size is larger than using .jpg. Never use formats such as .tiff and .bmp as these file sizes are huge and not ideal for online.

Image dimensions

How big (in terms of pixels) is the image? Your website’s content area has a maximum fixed width 410 pixels (px) within the content area. But if want to have two images side-by-side, saving them 200 pixels wide will allow you to have two images with the same width while leaving 10 pixels gap separating the two images.

Image Dimension Alignment & margin
Full-column landscape 410px (width) x 270px (height) Align: Center

Margin-bottom: 18px

» View sample
Half-column landscape 198px (width) x 126px (height) Align: Left

Margin-right: 14px
Margin-bottom: 18px

» View sample
Align: Right

Margin-left: 14px
Margin-bottom:18px

Half-column portrait 198px (width) x 306px (height) Align: Left

Margin-right: 14px
Margin-bottom: 18px

» View sample
Align: Right

Margin-left: 14px
Margin-bottom:18px


Image resolution

A fourth consideration with images that sometimes comes up is image resolution or DPI. Monitors can only display up to 72 DPI. While you do not necessarily have to adjust your images to this resolution, you will find that you can get your file size smaller if you do. Some digital cameras by default have settings in 300 DPI. And as a result, images from digital cameras will always need to save in 72 DPI for best possible image quality and file size ratio when uploading to the web.

Image Software

In addition to the above, you may also need to crop your images to focus on one part of the image. This could be done via WordPress and also image softwares prior to uploading them on to the site. There are thousands of software or web-based tools out there which allows you resize images for the web. Here are some suggestions:

Computer Softwares

Web-based alternatives (Free)

Most of these softwares mentioned above have online tutorials and materials on using them. Refer to their own website for more information.

Final Note

The above are just a glimpse on optimising images on your website. There are millions of resources out there that is impossible to cover on this website. The information covered in this chapter is simply the basics when using images and graphics on the web.

Article rewritten from: http://groundwire.org/support/articles/preparing-images-for-the-web



This Chapter Images & graphics for the web
Published in General tips & best practice Next Chapter Copying content from Microsoft Word
↑ Top