Use of images
We should only use visual material when it is complementary to the content in the webpages.
When to use what
Use different types of visuals in different contexts:
Photographs: For dynamic content like news and people. Photographs can also be used in banners to communicate substance and emotions.
Illustrations: For static content that is transformable into something visual, such as topics and themes. Provided they are informative, and descriptive.
Infographics: Use these for visual storytelling to make complex information easier to understand. For example, an infographic could describe a workflow, how an investment plan works or the law-making process.
Image copyrights
Photographs, illustrations, and other images will generally be protected by copyrights as artistic works. This means that a user will usually need the permission of the copyright owner if they want to use it. To acknowledge a copyrighted work add three things to the image, the copyright symbol, the year of the copyright, and the name of the copyright holder.
Best practices
- your visual content is relevant to the topic of the webpage
- only add an image whenever it adds value to the webpage
- place images near the relevant text
- the most important image should be near the top of the webpage
- avoid embedding text in images, not all users can access them (page translation tools can't read images)
- text in HTML, provide alt text for images; follow rules of accessibility
- create good content is equally important as visual content for images
Widely supported image formats
| File type (short) | File type (long) | File extension |
|---|---|---|
| GIF | graphics Interchange Format | .gif |
| JPEG | joint Photographic Expert Group image | .jpeg .jpg |
| PNG | portable Network Graphics | .png |
| SVG | scalable Vector Graphics | .svg |
Raster graphic
Raster images are pixel-based. When you scale up a raster image you'll see jagged and blurry edges.
GIF (Graphics Interchange Format)
- fewer colours, file size is smaller than JPEG
- interlaced progressive loading, low-quality version first, more detailed image is loaded next
- fewer colours, file size is smaller than JPEG
- does not lose any data with compression
- best use for web graphics with few colours only, and line drawings
JPG/JPEG (Joint Photographic-Experts-Group)
- can display millions of colours, use JPEG format for photographs, still images, shading with light and dark
- use JPEG when file size is more important than the quality of the image
- optimising JPEG images; 60% - 75% is usually optimal for web publishing 16-bit data format
- compatible across many platforms and image editors
PNG (Portable Network Graphics)
- support transparency (alpha channel), allow a translucent look
- lossless compression, no loss of data
- manage high-contrast or detailed images better than JPEG
- they can go down to very small file sizes when there are limited colours, use an 8-bit colour palette instead of a 24 colour palette
- PNG images can be used in any colour background still maintain the original appearance
Vector graphic
Vector image format can produce results with high fidelity at every resolution setting. It is an ideal format for high-resolution screens. If you zoom into a vector graphic it will always remain the same quality.
SVG (Scalable Vector Graphics)
- SVG is in vector format – it does not lose any data when compressed
- SVG formats are supported by most contemporary browsers
- the image file size is lightweight and compressible supports transparency
Editing visuals
- don't apply effects, gradients, borders or filters. It can make the picture look manipulated
- don't pick photos with frames, rounded corners or drop shadows
- cropping. Pay attention to the copyright. In some cases you need prior consent from the author to alter the image