Best practice for using images on a website

2. Choose the format of the image for the website

Everyone knows about jpg images and that is the most common format around today for photographs and is supported by all browsers. There are other formats to be considered:

Progressive JPG where the photograph is loaded in stages

PNG which is usually reserved for graphic images

SVG or Scalable Vector Graphics which is actually code loaded to the website telling it to draw lines in certain directions and if necessary fill them with colour. This is probably the single most efficient way to display a graphic image on a website and it will be sharp and clear, no matter what size you present it in, hence the scalable part.

3. Compress and resize images

When a website loads an image to your device over wifi or a mobile signal all it cares about is how much data it is downloading. For a website to perform effectively over 3g, 4g or wifi the faster you can make the page load the better and the better Google will like your site when it is ranking it. Slow sites over a mobile device will always rank lower than fast sites, all things being equal so it is vital to compress your images and size them appropriately.

3.1 Size

For most desktop devices 1920 is the absolute maximum width in pixels that you need and usually 1200 pixels wide is fine as that is the width of most websites.

For a mobile 640 pixels wide will fill a mobile screen width in portrait mode.

4. Define the image aspect ratio on the website

It is good practise to define the size of your images on the website. This will tell your browser what to expect and the browser will reserve that space for the image which is about to be downloaded. Not defying the size of the image will still work but not as efficiently. The browser won't know what is coming and will have to shuffle items around once the image is downloaded. This is referred to as a layout shift. The layout has to then change to accommodate the image, whereas if you define that size before hand  then no layout shift needs to occur.

5. Lazy load images that are beneath the fold

The 'fold' is the bottom of what you can see when you first load a page up. You will probably see some headings, a logo, a menu and a banner image and the you have to start scrolling to see the rest of the page. What you can do is defer the loading of images further down the page, until they are needed and this is what is referred to as lazy loading.

In the Foundation 6 Picture stack you can define: for images above the fold to never lazy load and for images below the fold to always lazy load them. Raincheck can also be used to defer the loading of images until they start to scroll into view.

6. Structure your image alt text appropriately

The alt text which is meta data about an image can contain a unique piece of text that describes the image and this is used by search engines that are trying to find images. It is also used by screen readers when websites are being read and converted to speech for partially sighted and blind people.

So it is very important to have your alt text for each image (except background images) defined in a way that is clear and correctly describes the photo and what is happening without being too loaded with keywords. 'Beautiful landscape at sunset' could be a reasonable alt text for the image I have attached to this post.

7. Check whether schema markup is appropriate for your image pages

In some circumstances, it may be appropriate for a page to carry a schema markup section which will describe to search engines what the page is about. For example, product pages or recipe pages are prime examples where a schema markup section would be appropriate.

8. Stop/deter others from downloading your images and using them on their websites

If you can then you may choose to prevent downloads of images from your site. Alternatively you could specify ownership of each image in a separate photo credits pop up lightbox.

9. Define the length of time that images are stored in browser cache

Most browsers can retain a copy of a page or a single image in its storage area also know as cache. As a developer you have the opportunity to tell the browser how long to store certain file types in cache by using the htaccess file. I have the following code set up in this sites htaccess file which tells browsers to store images for one year:

ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" 

This stops of course once someone clears their browser cache but it does mean that if they come back to your site a second time  within the year that most of the image resources are readily available in cache and do not need to be downloaded again which makes second visits to your site super fast.

 Photo credit: Mark Harper, Lake Atitlán, Guatemala on Unsplash

if you would to know more about designing for the web then please contact me.