Using Adobe Photoshop to Format Your Images for Web Use

By Ruth Williams


Images can enrich and bring a website to life. Nevertheless, if your photos aren't prepared in the correct way, they can cause your web pages to upload slowly. This will make for a poor user experience and will subsequently lower your search engine page ranking. Photoshop is often used to optimise photos for use on websites. There are several aspects to take into consideration while preparing photos.

Image Resolution refers to how detailed an image is. Digital image resolution is measured in pixels per inch (PPI). A pixel is a single dot. The higher the density of pixels, the clearer the image will be. Images for use on websites should ideally be 72PPI.

Image size refers to the physical size of an image, width x height. This too is measured in pixels. The most commonly used size is between 250 to 350 pixels for width and height. If you require photos to be displayed at a larger size than this, smaller thumbnail images could be used which enlarge into a new window when clicked on. This will not slow your website down and the user can still see large images.

Making your photographs the correct resolution and size to be used on websites is crucial. Large photos with a high resolution will have a big file size and therefore be slow to upload whenever a user views your website. For satisfactory upload speeds, photos should not be any larger than 100KB. Images which are slow to upload will not only annoy the user but may even jeopardize the page's ranking within search engines like Google. Google monitors page speed and may soon be favouring web sites that have faster page loading speeds because they will provide a better user experience.

The file type you choose to save your image as will depend on the subject of the image you're optimising. JPEGs are ideal for illustrations and photos where there are lots of colours and where gradients need to be smooth. Even so, JPEGs can lose some quality if they are compressed or undergo a number of edits, and so are unsuitable for images in which detail needs to be reproduced exactly.

GIFs are good for less complex images with few colours, i.e. logos, buttons, charts, diagrams, banners and cartoons. A GIF file will keep sharp outlines and flat colour. PNG file types are useful for images that have patches of transparency. They'll keep the area of transparency whereas the same image saved as a JPEG will substitute the transparent area with a white background making the file size much larger.

To save an image, choose the 'Save for Web' option in the 'File' drop down menu in Photo shop. Here you can select the file type you want to save your image as and see its file size. You can also alter the quality of the image to lessen the file size if need be. Don't overwrite your original image with your optimised image, create a new file name.

Taking the time to format your images effectively before adding them on to a webpage is crucial. It will make your webpages look more attractive but also help your page ranking and improve the user experience of your website.




About the Author: