How do I prepare images for use on a Website?
Reduce website load time by editing your images for the web
This article covers the basics of image resolution, dimensions and file size, and why these need to be considered when preparing an image for use on a website.
There are many applications available for editing images, and the article gives brief overview of some of the more popular choices among web developers.
Understanding resolution, dimensions and file size
Loading times are an important consideration for User Experience (UX) both in terms of uploading for the developer and downloading for the visitor. Large files also use up server space, server bandwidth and user data allowance. Also, Google uses page load time as a factor in their ranking algorithm.
Resolution - dpi
Resolution is a measure of how many dots of information are in a sqaure inch (dpi)
Typical computer monitors display at 72dpi (print resoluition is typically 300 to 1,000 dpi). Higher resolution images have slower upload and download times. An image with a resolution higher than 72dpi is pointless for computer motnior use.Higher resolution images have slower download times without visual improvement
Set web images at 72dpi
Image dimensions - pixels
Image physical size: how wide and high an image is - this is measured in pixels (px). Digital camera mega pixels and capture settings determine the size of a digital image.
Generally images from digital cameras need to be compressed as default settings are usually around 5,000 pixels wide.
The bigger the physical size, the larger the file size will be and the longer it will take to download on a web page. Few screens are wider than 2,000 pixels wide.
Resize web image dimensions to around 1,200 pixels wide if you don't need full screen images, which allows you to keep the image size less than 300kb without much pixelation.
File size - kb /mb
File size refers to how big the file is measured in kilobytes (KB), or mega bytes (MB).
Default settings on typical digital cameras create an image of approx 1 Mb (1000 KB)
The bigger the file size the longer it will take to upload/download.
Compress web images to around 500kb
File type - .jpg / .png / .gif
Wrong file type affects image quality and file size
Photos should be JPEG (.jpg) file type, and simple line art (eg logos) with few colours should be GIF (.gif), PNG (.png) or SVG (.svg) file types
Images added to web pages must be optimised. Resolution must be reduced to 72dpi, image dimensions (w x h) must be appropriate for the page, file size should be compressed (faster to download) but still retain image quality. Decide which file type is best suited to the image.
Only upload images if they add value to your website. Poor images can be detrimental to your website, and can be a waste of time.
Keep the originals of your images saved on in a location other than your web server, you may need them for print use, or to crop out areas of the image for use elsewhere on the website. Editing images with a non-destructive editor such as Adobe Lightroom ensures you do not lose the quality of the original image.
Avoid uploading images with watermarks, logo's, text overlays etc. Such additions to images can be illegible on smaller thumbnail versions of the images, will lilely not match the font of the website, and will likely distract from the quality of an image. Copyright and other text information can be added to the image through meta data etc.
Image editing software
Adobe Photoshop and Adobe Lightroom are excellent tools for image resizing and compressing. Adove Creative Cloud / Photography package combines both Lightroom and Photoshop for a reasonable monthly fee.
Alternative editing software include online tools for image editing:
GIMP is an open-source, free image editing software app that can be downloaded to run on Windows, Mac or Linux.
It can do much of what Photoshop can do.
Once you have prepared an image for a website, the next step is to name the file correctly for use on the web, upload it into an organised folder structure on the website CMS, and then place it onto the website, making sure you add in captions and meta data where relevant.
The next article in our blog gives an overview and tips on image organisation, naming and metadata.