Using images correctly in TYPO3

Last modified:

The correct use of images on the website is important for two reasons:

  1. Images that load quickly benefit the user experience and thus also the search engine ranking  (see our article on the Pagespeed
  2. Since the meaning of images is difficult for machines to understand, they must be described. This supports accessibility and finding them in Google Image Search, which accounts for up to 20% of all search queries.

In this article we describe the necessary measures for the optimal provision of images with TYPO3.

If you have any problems or questions about this topic, our Support will be happy to help.

1. choose the right image format

The most commonly used image formats are:

JPG

The JPG format is the most commonly used format for photos, i.e. non-structured images with high colour depth. JPGs can be compressed very well to make them suitable for the web, but they do not offer any transparency.

PNG

Compared to the JPG format, the PNG format offers lossless compression of images. However, the format is less suitable for use on the web because the files are significantly larger than those of jpg images. Compared to JPG, however, the PNG format offers transparency.

GIF

GIF files have a maximum colour depth of 256 colours. This means they are not suitable for photos. On the other hand, they are small, offer transparency and allow animations. When using it as an animation, however, you should consider using videos.

WEBP

The format developed by Google is considered the successor to the jpg format. It is better compressible, more flexible (lossless or lossy), generally smaller with the same quality and offers transparency. Big disadvantage: It is still not supported by all browsers. Coverage is currently around 70-80%.

SVG

In contrast to the previous formats, these are vector graphics. This means that the pixels are not saved as a matrix, but are calculated on the basis of formulas. The big advantage: they are extremely small and can be enlarged without any loss (scalability). However, Svg's are not suitable for photos. But they are suitable for infographics, logos, icons, etc. Moreover, SVGs allow transparency, animations and interactions (e.g. interactive maps).

Format Transparency Scalability Quality Size Animation
jpg no no high large no
png

yes

no very high very large no
gif yes no low small yes
svg yes yes very high very small no

 

So the question which format you should use depends very much on the intended use and the requirements for the image.

 

2. provide image in maximum required dimensions

Try to upload and embed images only in the maximum necessary size in TYPO3. For example, if you want to embed an image in the size of 600px width, upload it also exactly in the size not something with 800 or 900 width.

If you provide an image larger than it needs to be, two undesired effects may occur, depending on the TYPO3 configuration:

  1. TYPO3 automatically formats the image before it is delivered to the browser (so that the transfer size is optimised) and caches it (so that the process does not have to be repeated for each call). However, this method costs server time (when the cache has been emptied), leads to very unattractive image URLs (e.g. "csm_pagespeed_wacon_f2a074099f.jpg") with limited validity (bad for image indexing by Google) and unnecessarily "clutters up" your web space.
  2. TYPO3 delivers the image in its original size. This leads to unnecessary loading time, which worsens the user experience.(see Pagespeed-Optimisation) and thus endanger the search engine ranking.

How to recognise if your image has the right dimensions

  1. Open the page with the Chrome browser
  2. Go to the image with the mouse, click the right mouse button and select "Examine".
  3. Go with the mouse from the image URL("src attribut")

Rendered vs. Intrinsic Image Dimensions

If the image loaded from the server has larger dimensions than required (e.g. because it should be displayed smaller according to the HTML/CSS code), two values are displayed. The so-called rendered size indicates the image dimensions of the displayed image while the intrinsic size indicates the actual image dimensions.

You should avoid this if possible and always provide only the images in the dimensions they are to be displayed:

NOTE: The comparison made here is not so simple if, for example, you offer an enlargement function via on-click. Many solutions already load the larger image with the page call, which is why the browser then also outputs its intrinsic property.

3. web-optimise JPEGs and PNGs

Optimise your photos as much as possible. Most images have a print-ready quality. However, this is not necessary for the display in the browser. Here, the human eye is sufficient as a "measuring stick". These pictures are then also called "web-optimised". Various free tools such as irfanview  (Install PlugIn too!) or gimp offer the possibility of such optimisation. A useful online tool is TinyPNG, with which both PNGs and JPGs can be compressed.

4. use responsive images

Always include responsive images, i.e. an image should only be delivered in the size required for the display. Images for mobile devices are therefore usually much smaller than for desktop devices.


TYPO3 is able to automatically scale images for different resolutions. We show how this works  here.

5. describe pictures

The image description is possible in TYPO3 in three fields by default:

With alternative texts, you make it easier for machines to understand the content of the image. Google uses this information to interpret the image and to understand the whole page. The alternative text therefore plays an important role for both normal search and image search.

Screen readers use the alternative text to describe the image for people with visual impairments. Users with very poor internet connection may see the text instead of the image.

The title of an image is used for the so-called tool tip. This is a short text that appears when you move the mouse over the image.

The caption is the visible text under the image. This text is rated particularly highly by search engines because it is also displayed to the visitor and is therefore difficult to abuse.

Use all three fields to describe an image and the content of your page. Use an appropriate number of keywords that are important for the page and for the image search.

6. file names and structure

Only use lower case letters, numbers and hyphens for file and folder names. Under no circumstances should you use umlauts, spaces or special characters.

If possible, the file name should contain a suitable keyword.

Via the menu item "File list" you have the option of creating folders, which are then reproduced as path names in the URL. In this way you can create a structure and also give folders keyword-relevant names.

The URL of a product image could then ideally look like this:

www.mydomain.de/produkte/aquarien/zubehoer/filter/mein-produktfiler.jpg

Of course, this only makes sense if you offer a sufficient number of categories and products. In general, the shorter the URL, the better.

8. create a sitemap of images

An image sitemap is - in simple terms - a list of image URLs available on a website in the form of an XML file. It helps search engines to recognise the image structure of the website and increases the probability that images will be included in the search index.

Our favourite tool for creating sitemaps is ScreamingFrog, that can include 500 URLs in a sitemap in the free version.

Generate, upload and submit image sitemap

To provide an image sitemap with TYPO3, proceed as follows:

  1. Open ScreamingFrog and perform a crawl.
  2. Select the item "Image Sitemap" under Sitemap and save the file under a suitable name (e.g. images-sitemap.xml).
  3. Log into your TYPO3 backend. Go to Filelist and upload the file, preferably directly under "fileadmin".
  4. Log into the Google Search Console and enter the path and file name of the uploaded XML file under "Sitemaps -> Add new sitemap"
Provide an image sitemap in TYPO3