Utilizing Adobe Photoshop to Resize Your Images for Website Use

Written by Ival on April 1, 2012. Posted in Website Design

Images can enrich and bring a website to life. However, if your photos aren’t prepared in the correct way, they can cause your web pages to download slowly. This will make for a poor user experience and will subsequently decrease your search engine page ranking. Photo shop is commonly used to optimise photos to be used on web pages. There are a number of factors to consider when preparing photos.

Image Resolution refers to how detailed a picture 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 picture will appear. Images to be used 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 viewable 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 web page down and the user can still see large images.

Making your photos the right resolution and size to be used on web pages is essential. Large images with a high resolution will have a large file size and therefore will be slow to upload whenever a user views your web page. For satisfactory upload speeds, photographs should be no larger than 100KB. Images which are slow to upload won’t just frustrate the user but will also jeopardise the page’s ranking within search engines. Google monitors web page speed and could soon be favouring websites that have faster web page loading speeds as they will give a much better user experience.

The file type you choose to save your picture as will depend on the subject of the image you’re preparing. JPEGs are ideal for illustrations and photos where there are many colours and where gradients need to be smooth. Even so, JPEGs can reduce in quality if they are compressed or go through several edits, and so are unsuitable for images in which detail needs to be reproduced exactly.

GIFs are good for less complex images with fewer colors, i.e. logos, buttons, graphs, diagrams, banners and cartoons. A GIF file will maintain sharp lines and flat color. PNG file types are useful for images that have areas of transparency. They will preserve the area of transparency whereas the same image saved as a JPEG will substitute the transparent section with a white background making the file size much larger.

To save an image, use the ‘Save for Web’ option in the ‘File’ drop down menu in Photoshop. Here you can choose the file type you want to save your image as and see its file size. You can also adjust the quality of the image to reduce the file size if required. Do not 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 web page is invaluable. It will help to make your webpages look more appealing but also help your page ranking and improve the user experience of your web site.

Bird and Co are a creative agency providing graphic design in Bromsgrove – creating innovative designs in a variety of digital and print formats. Visit birdandcocreative.co.uk for further information.

Tags: , , , , , ,