Drupal: 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 5 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. 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.
  • The recommended size for hero images is 798x798 pixels.
  • Photographs should be saved in jpg format to enhance colors, while graphics and illustrations should be in png format to save filespace.
  • Only photos and images owned by Aalto University are to be used on our website. No free or external image bank photos are used on the site.
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.

Learn more about image ratios

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 about editing focal point

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. 

Other instructions on images and components

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.

Adding images, ALT text, changing cropping and focal points

Learn how to upload images and add alternative text (alt text) for accessibility. Changing the focal point of an image will affect how the image is cropped on different screens.

Väre building in the campus. Inside shot of natural light filled dark wood staircase criss-crossing in white surroundings. Light through skylights. Photo by Aalto University / Tuomas Uusheimo

Image aspect ratio at aalto.fi

The new aalto.fi communications platform images feature different aspect ratios that allow the design to scale from small to big screens. Let’s learn how to control the image cropping and make sure that the images look good at any level of the platform.

Aspect Ratio Graphic with Aspect Ratio reading within a circle. The rectangle graph is in varying shades of red.
  • Published:
  • Updated: