Aalto.fi website

Advanced tips on using images

Using images is a big part of content creating at aalto.fi. In this blog post, we’ll go more into depth regarding what kind of images to use for your content, how to modify the images so that they look good on any device and what to avoid when choosing an image for your page.

Images are a great way to enhance the visual look of a page and to draw the reader in. We recommend you use images, but there are a few things to consider when you upload a new image at aalto.fi. 

Here are some general guidelines to keep in mind for uploading new images:

  • The absolute maximum for a file size is 10 mb, but keep the image as small as possible without negatively affecting the resolution. Normally 1 mb max will be enough. 
  • The width of the image should be kept to a maximum of 2560 pixels. 1280 pixels is enough for images that are not used for full screen purposes, as a hero image or as main image for a hub. You can check the pixel size by right clicking the file on your computer and checking its settings/properties, or through an image editing program such as Photoshop.
  • Photographs should be saved in jpg format to enhance colors, while graphics and illustrations should be in png format to save filespace.

Image and media components for aalto.fi

There are several ways to display images and media at aalto.fi. Learn more about the media slider, gallery and video component.

Read more
Drupal abstract image for Comms use only, blue

Image with text component engages your reader

Learn about media placements and default and adaptive settings.

Read more
Three students sitting next to a wooden table, and studying. Two of them have laptops in front of them. Photo: Unto Rautio
Example of single image

Adapting your image to different formats and using focal point

When uploading a new image, it's stored in the original format and file size, but depending on where it’s used, Drupal will change the format to fit the component. The image will also show in other ratios and resolutions depending on the bandwidth and device that is used by people to access the page. The ratio is changed to fit different screens and the resolution changes so that the page won't take too long to load. Thus, check that the image will look okay in different formats and ratios before using it.

Also, be sure to learn how to change the focal point for your image in Drupal, so that the most important part of the image shows no matter the way it's used at aalto.fi

Learn more

Using text in images

Text in images is generally not recommended, since it’s not accessible by screen readers, scales badly on small screens and isn’t easily translated between the language versions on the website.
If you still want to use text in your image, make sure to check how it will look in different formats, as described above, and follow these general guidelines:

Drupal Example of text in image with focal point
  • Keep the text concise and clear so that it will show when used in different components.
  • Use text that is already represented in your written text, so that it’s accessible to people who use screen readers and can’t view images.
  • To make the text visible in any format and cropping, move the focal point to the centre of your text. Make sure that there is some space around your text; this will ensure that the text isn’t cropped.

Two examples of images that use text in a good way are shown below. 

Aalto.fi website

Here, you can find instructions on how to make the most out of aalto.fi to visualise your pages and make your content findable. This page is also for the latest Drupal news and events.

Read more
Art piece from exhibition Crystal Flowers in Halls of Mirrors in 2013, yellow threads stretched and "floating" between two points in an angle. Photo by Aalto University / Mikko Raskinen
  • Published:
  • Updated:
Share
URL copied!