Image formatting for screen and web
It is important to know what images file to use when designing and building your web apps or sites.
There are four file formats for us to use.
.jpg - Joint Photographic Experts Group
.gif - Graphics Interchange Format
.png - Portable Network Graphics
.svg - Scalable vector graphics
Each of these formats has different strengths and applications.
JPG
Good for:
photographic images
Gradients
complex tonal areas
Natural colours
JPG uses a lossy compression algorithm. Lossy compression simplifies an image and tries to remove unnecessary pixels without altering the overall image overtly. When using lossy compression we must ensure that we strike a good balance between file size and quality. More compressed images are smaller, less compressed images are better quality. Lossy compression can cause blurriness and unpleasant pixelation artifacts.
Not good for:
Block of solid colour
Text
Simple shapes
GIF
GIFs are good for images like logos, line art or illustration.
GIFs use a lossless compression algorithm which reduces the image to a total of 256 colours. It builds a colour table for the image and peach colour is assigned to a pixel. Kind of like painting by the numbers. GIFs support transparency and can also include simple animation.
PNG
Uses the deflate compression method. Similar to ZIP files. Works for both line art and photographic images. Makes larger files than JPG for photographic images but quality is often better. PNG supports alpha transparency which make them very versatile for web design. They don’t support animation.
SVG
Retain the vector information inside the file so they are scalable and resolution independent. They also save at small file sizes. You can use HTML, CSS and JS to interact with SVG files to create animation and interactivity.
Web images
Your web design will often use multiple file formats for different purposes. Make sure your imagery is optimised for web delivery. Images that are too large can cause a site to run slowly and impact the experience of the reader/viewer. A balance between file size and compression is required for an optimised viewing experience.
Image colour space for web images
When preparing images for the web sRGB is recommended. sRGB defines the color space of devices used to view images on the web. RGB is what is called an additive colour mode. A light source within a device creates particular colours by mixing amounts of red, green and blue. Colour in RGB starts with the absence of light, black. Red, green and blue light is added to create colour and lightness.. White is the combination of equal parts red, green and blue.
Colour on the web
When choosing or mixing colours for our web designs, we generally manipulate the colour’s RGB values. Each channel has values that range from 0 to 255. The higher the value the lighter the colour or tone. For example R=255, G=255, B=255 is white. When all the values are equal to 0 we have black. Neutral gray is R=128, G=128, B=128. In HTML, we write this like rgb(128,128,128). When referencing colours in web design we can also use the HEX system, Hexadecimal. A HEX colour is expressed as a six-digit combination of numbers (0-9) and letters (a-f). A HEX colour code is shorthand for its RGB values. We can easily find the HEX code of a colour by using the Photoshop colour picker. We write a HEX colour with a # preceding the six-digits. For example, #ffffff is white.
Retina screens
Traditionally we have worked at 72PPI when making images for the web, because that was the resolution of standard computer screen and monitors. Recently, devices have been manufactured with screen of higher pixel density, meaning they pack more pixels into every unit of space. This has made it necessary to create images with many more pixels or to create multiple images for different screen densities.
A note on file size
It is really important that your sites and apps load efficiently for your audience. A slow loading site can create a poor user experience. Make sure that your images are optimised and scaled to an appropriate size. You’ll want to ensure that images look as good as they can but also don’t drag the performance of your site or app. Bandwidth should also be considered, bandwidth is a resource and has cost associated with it. If images are unnecessarily large transferring that data can be an unwanted cost.
Naming files
It is very important to name your files cleanly. Always make sure that you include the appropriate file extension, ie: .jpg. Do not leave any spaces or weird characters in the file name. A browser may find it difficult to interpret and render a poorly named file causing broken links in your website or app.