Preparing images for your website with Photoshop

Images can enrich and bring life to a website. However, if your images are not prepared the right way, they can cause your web pages to load slowly. This makes for a poor user experience and will ultimately lower your page’s search engine ranking. Photoshop is commonly used to optimize images for use on websites. There are several factors to consider when preparing images.

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 pixel density, the clearer the image will be. Images for use on websites should ideally be 72 PPI.

Image size refers to the physical size of an image, width x height. This is also measured in pixels. The most used size is between 250 and 350 pixels in width and height. If you need images to display larger than this, smaller thumbnail images can be used that expand into a new window when clicked. This will not slow down your web page and the user will still be able to view large images.

Getting your images to the correct resolution and size for use on web pages is crucial. Large images with a high resolution will have a large file size and therefore take time to load when a user views your web page. For acceptable upload speeds, images should be no larger than 100KB. Images that are slow to load will not only frustrate the user, but also jeopardize the page’s ranking in search engines. Google monitors page speed and may soon be favoring websites that have faster page load speeds as they will provide a better user experience.

The file type you choose to save your image will depend on the theme of the image you are preparing. JPEG files are suitable for illustrations and photographs where there are many colors and where gradients need to be smooth. However, JPEG files can lose some quality when compressed or subjected to multiple edits, so they are not suitable for images where the data must be reproduced exactly.

GIFs are good for simpler images with few colors, ie logos, buttons, charts, diagrams, banners, and cartoons. A GIF file will keep sharp lines and flat colors. PNG file types are useful for images that have areas of transparency. They will retain the transparent area, while the equivalent image saved as a JPEG will replace the transparent area with a white background, making the file size much larger.

To save an image, use the ‘Save for Web’ option from the ‘File’ dropdown menu in Photoshop. Here you can select the file type you want to save your image as and view its file size. You can also adjust the image quality to reduce the file size if necessary. Do not overwrite your original image with your optimized image, create a new file name.

Taking the time to format your images correctly before adding them to a web page is invaluable. It will not only make your web pages look more attractive, but it will also help your page rank and improve your website user experience.