The img Element
Images are added with the <img> tag. The src attribute is used to indicate which particular image we want to use. The src is short for source and is the path to the image we wish to use. As with hyperlinks the path to the image can be absolute or relative, most commonly relative.
Other attributes that you are likely to use with an image include width, height, and alt. The width and height indicate the dimensions of the image to be referenced and help speed up page loading. The alt attribute is used to provide alternate text for users who cannot see the image. It is also useful for improving your page's search engine ranking. This is a common SEO (Search Engine Optimisation) technique.
Attributes can be placed in any order but must be separated from each other by a single space. Therefore a fuller example of the HTML required to insert an image would be:
The values for width and height are in pixels. You do not need to explicitly declare them as being in pixels. As stated above, the actual order of attributes does not matter but generally web designers will place src first as this is the most important attribute to use with the <img> tag.
Image File Formats
The HTML is pretty straight-forward but what image types shouldc can we use.
TLDR; Use PNG/SVGs for graphics, JPEG/WebPs for images. Keep images as small as possible in terms of dimensions and file size whilst remaining fit for purpose.
There are six main types of image formats used on websites today:
GIF (Graphics Interchange Format): A legacy image format limited to 256 colours, making it best suited for images with few colours or large areas of flat colours, such as company logos, maps, or charts. GIF files support transparency, but only one colour can be transparent. They can also be animated, which remains popular for memes and short animations, particularly on social media. However, GIFs are becoming less popular overall with the rise of more advanced formats like PNG and WebP.
PNG (Portable Network Graphic): A format that emerged as a more versatile successor to GIF. PNG files support millions of colours and multi-colour transparency (with alpha channels), making them excellent for graphics requiring high-quality transparency, such as app icons, logos, or images with complex edges. Unlike JPEG, PNG uses lossless compression, preserving image quality at the cost of larger file sizes.
JPEG (Joint Photographic Experts Group): Widely known due to its use in digital photography, JPEG files support millions of colours, making them ideal for photographs. However, JPEG does not support transparency and relies on lossy compression, which can lead to reduced quality if the image is compressed too much.
SVG (Scalable Vector Graphics): Vector images based on mathematics rather than a map of bits (bitmaps). They are resolution independent and work well for simple graphics with clear lines and curves
WebP: A modern image format developed by Google that supports both lossy and lossless compression, as well as transparency and animation. WebP files are generally much smaller than JPEG and PNG files for comparable quality, leading to faster page load times. This format is increasingly used in web development due to its balance of quality and file size.
AVIF (AV1 Image File Format): The latest image format, offering even better compression efficiency than WebP while retaining high quality. AVIF supports HDR, transparency, and various colour depths, making it a powerful choice for both photography and web graphics. Despite being newer, AVIF is quickly gaining support across major browsers and platforms due to its superior compression and image quality.
Tip: CloudConvert is an online service that can convert images between many formats, including WebP and AVIF, with support for advanced settings and compression options
Size is Important - Dimensions and Storage
When working with images make sure your images are fit for purpose. A common 'newbie' error is to use images captured on phones etc that tend to be way too large for use on a web page. A basic mobile camera will capture images at 8MP that is 3264 x 2448 pixels. So what dimensions should images be? For information you are viewing this on a screen that is pixels. In addition, here are some useful values as a guide:
| Device | Screen Size |
|---|---|
| Desktop screen | 1366 x 768 |
| iPad | 1024 x 768 |
| iPhone Screen 5s | 320 x 568 |
| Camera images from iPhone 5s | 3264 × 2448 (4:3) |
| iPhone Screen 13 | 390 x 844 |
| Camera images from iPhone 13 (12MP) | 4000 × 3000 (4:3) |
When we talk about image size we should really be clear we mean two things, dimension and file storage size. The dimension refers to the width and height of the image in pixels, while the file size is the amount of storage the image file occupies (measured in bytes). A 8MP camera image is likely to be megabytes in size. For a web image we should aim for kilobytes. Your site visitors will appreciate smaller file sizes, as they speed up page loading times and use less of their mobile data if they’re browsing on their phones.
If you require the dimensions, you are most commonly storing less pixels, so the file size, storage required is reduced as well.
There are lots of tools built into modern operating systems as well as online tools, so you don't need fancy image editors to resize images. When resizing do take care that you respect the aspect ratio. That is when you take an image with you mobile it has a given width and height. The ratio of width to height is known as the aspect ratio. The 8MP dimensions above of 3264 x 2448 px are 4:3. If you resize the width to 400 pixels, the height should be proportionally adjusted to 300 pixels. Most image resizing tools offer an option to keep the aspect ratio locked when changing dimensions. If you don’t maintain the aspect ratio, your images could appear squashed or stretched (and let’s be honest, that looks unprofessional!).
Experiment with the Aspect Ratio Calculator.
Lighthouse Audits
Google Chrome comes with a built-in audit tool called Lighthouse. You can use to test various metrics including the performance of your page. Lighthouse will push the use of the modern image types such as WebP.
By way of comparison here is the same mobile camera image compressed first as a JPEG and then as WebP and AVIF.
Note that the WebP is nearly half the size of the JPEG, with little reduction in quality.