For our web authors: Graphics on TU websites

Graphics are used in many places on our websites – whether as eye-catchers with a purely decorative function, content-expanding infographics or illustrative elements. When providing the images, there are various aspects to consider that have an influence on the user experience.

With regard to resolution and image size, you can use the following guidelines as a guide:

Header images

The header image can be integrated centrally in the file “config.inc” (please note: The English files have the extension .en at the end e.g. “config.inc.en” ) or individually in the header area of the individual page files via the variable $seitenbild. With $seitenbild_alt and $seitenbild_copyright, an image description and a copyright notice can also be set for the graphic. For purely decorative graphics, the alternative text can remain empty. The header graphics should have a dimension of 855×171 pixels (5:1).

Please note: The image size influences the loading times. If the file is too large, this becomes very noticeable, especially with limited data volume or slow network connections, and leads to unnecessary frustration of the user. In addition, the loading times can have a negative effect on the search engine rating. With manageable effort, a lot of influence can be exerted on the user experience.

You can find a small selection of images and the most important notes on header images on our web page “Usable page images” .

Tip: In image editing programmes you can usually fix the aspect ratio when cropping. You can then drag and position the cropping frame appropriately. While maintaining the aspect ratio, scale to the width of 855 after cropping.

Portrait pictures

On the contact pages of the professorships and faculties, portrait photos are often used in the business cards. Appealing staff and group photos are created, for example, by the TU Chemnitz photo service. Your portrait photo is then available in your personal photo area and is linked to the business card in the correct size (140×210).

If you would like to include your own portrait images, please note the following information:

• Place the images in the size in which you want to display them – for example, 140×210 pixels for the TUCAL business cards. Please note that with very large images, in addition to the loading times, access to the high-resolution image of the person shown is typically not desired. Using the right mouse button, the pictures can be called up in their original size – on some pages, unfortunately, in such a way that the eyelashes can be counted.
• Be sure to observe the image and usage rights. In the case of passport and job application photos in particular, the photographer often specifies a particular purpose, so that they may not be implemented in websites.
• Would you like to take portrait photos yourself? The Press Office supports you with a video tutorial (only German) for portrait photos.

Keyword accessibility: For pictures of contact persons, it is best to always state the name of the person in the alternative text. Do not use the description “dark-haired woman with a green blouse” here, as the function “contact person” is in the foreground. When using the business card module, the alternative text is automatically generated from the name.

Images in general

On the website of the TU Press Office you will find a style guide for your own images as well as legal information and contact details for cooperating photographers. In the image database, which is also linked, a number of images are available for use on TU websites: Image page of the Press Office with all links and references.

Again: If possible, place the images in the maximum size in which they are displayed on the website. Note that no horizontal scrolling should be required for websites on mobile devices, so graphics must scale accordingly. To achieve this, use the class “img-responsive” in the HTML source code:

<img src="bilddatei.jpg" class="img-responsive" alt="…" />

On our WWW pages you will find further information on Responsive Design as well as pop-ups and slideshows.

Keyword accessibility: Think about alternative texts for your graphics. Depending on the type and function of the image, there are different procedures for this, which we describe in a guide.

We will be happy to answer any further questions you may have via our central support address support@hrz.tu… or every Thursday from 11:00 a.m. at our BBB consultation hour, where our experts will be happy to advise you on both the topic of website creation and accessibility.