When building a website, I often get asked about what type of file I need for photos and what is the best size. Photos can add a lot of value to your website, after all ‘a picture is worth a thousand words’.
Below are some key points that you should consider when adding photos to your website.
What are the format options?
JPG is generally the preferred format and work with complex images that have a lot of colours, gradients, embossed, etc.
PNG produce good quality, but are not always recognised by old browsers. PNG are good for images with a transparent background.
GIF is good for logos with one or two colours, animations and other simple images that don’t use gradients or complex image formatting. Are also good for images with transparent backgrounds.
What size should my images be?
The size of your images is very important. If images are too big, they will take too long to load, hence frustrating your visitor who may leave your site early. If images are too small, they don’t have the impact that you were looking for. The recommended format is a width of 800px, RGB colour and a maximum size of 3.5MB.
What resolution should my images be?
Like above, the resolution can affect the load time of your site. The preferred resolution for websites is 72 pixels per square inch (72px).
Do images make a difference to my search engine rankings?
While photos might make your site look good, they don’t help with optimising your site. Content (key words) are the main focus of the search engines, and so this should be the key focus of your site. When adding an image, make sure you add a title and tags.
However, your images can be optimised for image searches such as Google Images. Again, make sure you add a title (what is displayed when you hover over an image), a caption (can be displayed under an image) and alternative text (this is the text that is displayed while the image is loading). See the below image for an example.
Make good use of images on your website, but make sure they are good quality, but don’t take too long to load.