Images & graphics for the web
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:
- images/graphics that are too large and overwhelm your pages visually
- images/graphics files that are too large and slow down your page load time
- images/graphicsthat are in a non-standard file format and don’t load properly
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
- File format
- Image dimensions
- Image resolution
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.
- Maximum image width on your website: 410 pixels
- Note: To achieve the best possible image quality after resizing your images to a smaller size. It’s advisable to ‘sharpen’ them before saving them for the web. Most decent softwares will have sharpening or similar functionalities provided.
| 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 |
» View sample | |||
| Align: Right
Margin-left: 14px |
||||||
| Half-column portrait | 198px (width) x 306px (height) | Align: Left
Margin-right: 14px |
» View sample | |||
| Align: Right
Margin-left: 14px |
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
- Adobe Photoshop Elements (PC/MAC) – Inexpensive and popular. » Online Video tutorials
- GIMP (PC/MAC/LINUX) – It’s free and feature-rich. » Online user manual & tutorials
- Corel PaintShop Photo Express (PC only) – Affordable and easy to use.
- Pixelmator (MAC only) – Affordable and feature-rich. » Online user manual & tutorials
Web-based alternatives (Free)
- Pixlr – Easy to use.
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