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:
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).
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.
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.
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.
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.
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/
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.
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.
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.
Press information
All relevant information can be downloaded in our brand portal.
For inclusion in our press mailing list, just write us a message with your contact details.
Press contact
Sylvia Naumann
+49 6151 27918 21
presse@peak-group.de
Cavok Demo version
Are you interested in Cavok and want to test the many options in a demo version? Simply fill out the form or give us a call at +49 6151 62944 20. We will provide you with demo access within the next 48 hours.
ATTENTION: Cavok is highly customizable. In order to show you a configuration that is as accurate and tailored to your requirements as possible, we recommend that you briefly describe your ideas in this message or ask for a call back to coordinate in advance.
Cavok product presentation
Would you like us to show you the diverse possibilities of Cavok in a product presentation? Then fill out the form or simply give us a call at +49 6151 62944 20. We will get back to you within the next 48 hours at the latest.
ATTENTION: Cavok is highly customizable. In order to show you a configuration that is as accurate and tailored to your requirements as possible, we recommend that you briefly describe your ideas in this message or ask for a call back to coordinate in advance.
Use of cookies
We want to offer you the best possible service. For this we use cookies on our website. You can find more information about the use of cookies and a way to withdraw your consent in our privacy policy.
More information
More information
More information
Accept all
Save selection
Required cookies
Required cookies are necessary for the proper functioning of the website. Therefore, it is not possible to deactivate them. This type of cookies is used exclusively by the operator of the website (first-party cookie) and all information stored in the cookies is sent only to this website.
Back
Analysis cookies
Analysis cookies collect information about how this website is used. The website operator uses these cookies to improve the attractiveness, content and functionality of the website.
Google Analytics
These cookies collect anonymised information for analysis purposes about how users use this website.
Cookies: _ga(Storage period: 2 Years), _gid(Storage period: 1 Day), _gat_*(Storage period: 1 Minute).
Back
Marketing cookies
Marketing cookies are used to analyse the behaviour of website visitors and to display personalised advertising. The website operator uses these cookies to evaluate advertisements and optimise future advertising campaigns.
Facebook Pixel
The Facebook Pixel from the social network Facebook is used to analyse the website, the targeting and effectiveness of advertising and to create Facebook Custom Audiences.
Cookies: fr(Storage period: 90 Days), _fbp(Storage period: 90 Days).
LinkedIn Insight tag
The LinkedIn Insight tag from the LinkedIn social network is used for website analytics, advertising targeting and effectiveness, and to create LinkedIn Matched Audiences.
Cookies: lang(Storage period: Session), lidc(Storage period: 1 Day), lissc(Storage period: 1 Year), bcookie(Storage period: 2 Years), UserMatchHistory(Storage period: 30 Days).
Back