The best graphic formats for websites
Without images, graphics and animation, the World Wide Web would be quite boring. Appealing visual effects are important to make a website really interesting. Photos, animations and graphics loosen up the displayed text and encourage users to engage with it. There are many different digital image formats. But which formats are particularly suitable for being displayed on screens and placed on your website? How do you optimize images for the web? This article gives an overview of what is important:
Selecting the right color model
Caution: Various types of monitors can display colors differently: Colors may look different on a poorly adjusted monitor than on a well-adjusted one. Therefore, you should calibrate your monitor.
There are two standard color models that are used for digital images: RGB and CMYK. Only the RGB color model is suitable for display on screens, e.g. placed on a website.
RGB is a so-called additive color space. Each color can be defined by its red, green and blue components. CMYK, on the other hand, is a subtractive color space that cannot be displayed by a monitor. CMYK is the technical basis for four-color printing and represents the three color components cyan, magenta, yellow and the black component (key).
Pay attention to the image and file size
Long loading times of websites are mainly caused by too large image files in the wrong format. This not only annoys website visitors, but is also penalized by search engines like Google. If the pagespeed is too slow, this directly affects the ranking in the search results. The loading speed of a website can be checked in Google's PageSpeed Insights, for example.
To improve the page speed, it is important to include images and graphics in the appropriate format and optimized image and file size. The image size includes the number of pixels, the file size the required storage space for it. Generally, the more pixels per inch, the larger the resolution and, accordingly, the more storage space is required. The maximum size for website images should be 1920x1080 pixels. This corresponds to a common monitor resolution in Full HD. If the image should not be displayed over the entire monitor size, a smaller number of pixels can be selected and the file size can be compressed. Especially for the mobile display, there are often possibilities for optimization. Depending on the content management system used, images may already be automatically optimized for mobile viewing by the system. It is always important to find a compromise between the smallest file size and optimal image quality on all devices. Some graphic formats are therefore particularly well suited for website usage.
Graphic formats - advantages and disadvantages for websites
JPG or PNG format?
The most popular graphic formats are the JPEG and PNG file formats. Both formats are so-called raster or pixel formats and are well suited for the integration into web pages. The JPEG file format is especially suitable for photos. Compression is lossy, but JPGs still offer a good compromise between file size and image quality. Transparency is not supported by JPG files. The PNG graphics format, on the other hand, is well suited for illustrated graphics or when transparency is required. This graphic format can also be used for icons in an optimal way. A PNG file can store more information than a JPEG file, so the file size can be larger than a JPEG. Before inserting it on the website, it should always be checked if the file size can be further reduced by compression. PNG compression is lossless.
Using GIF for animations or rather an alternative?
The GIF file format is often used for animations. GIF files can be easily generated as a loop. However, they can have a relatively large file size depending on the compression and animation. Other formats such as the mp4 or WebM file format require less storage capacity while offering better quality, which is why these formats are more suitable for including short animations on a website.
SVG vector graphics for a responsive web design?
For the inclusion of geometric shapes or elements in a responsive web design that adapts depending on the screen size, the vector format SVG can be well used. It can be scaled without quality loss and has a smaller file size than the presented raster graphics.
WebP - the new standard?
Google recommends the modern WebP format for integration into websites. Compared to the JPEG format, the file size can be reduced even further without loss. The format is not supported by older browsers, but the integration is evaluated positively by Google. You can check which browsers support which graphic formats here: https://caniuse.com/
Which graphic format is least suitable for the Internet?
Graphic formats that are primarily intended for printing are not suitable for web site integration. These include, for example, TIFF or PDF files due to their file size. File formats that are intended purely for editing, such as PSD or AI files, also do not belong on a website. Photos are saved in a raw format such as RAW, CR2 or DNG, depending on the camera model. These should definitely be edited and the file size compressed before using them on the web.
Add filename and alt tag for search engine optimization
Once the appropriate graphic format has been selected and the file has been compressed to the appropriate size, it only needs to be inserted on the website. For search engines like Google to recognize the content of the image, you should ensure that the file name is meaningful (without spaces, special characters or umlauts) and add a description for the image via the ALT tag.
Automatically optimize website images with Digital Asset Management
When processing and optimizing image files for your website, you often end up with a lot of duplicate files that can cause chaos. A digital asset management system like Cavok can help you store all your images in a clear and centralized way, and also optimize them automatically for your website. For example, the DAM system can automatically convert and compress the files into the appropriate formats (e.g. from TIFF to JPEG) and deliver the images directly to your website.
Learn more about how Grube KG uses Digital Asset Management and how it can support website owners and e-commerce shops.