Images and image sizes
The images you upload to Drupal are used by the system in several different places. How your image will be displayed can therefore not be predicted exactly.
The image you use as the main image in a news article can also be used in a listing of several news items. In one place an image can be used with certain proportions, while a slightly different crop can be used in another context. These cropping is done automatically by Drupal, so it is important that you upload images that are large enough to handle the different sizes.
How your image will be displayed in different contexts and on different devices can therefore not be predicted exactly.
Recommended image sizes - general
The recommendation we want to give is that in most cases you make sure that your image has a width of at least 1500 pixels. This is enough so that the image does not become pixelated in the usual sizes.
The exception is the panoramic image that can be used on landing pages. In order for it not to be pixelated if, for example if you show the page on a projector or large TV in a meeting, it needs to have a width of 3840 pixels.
Specify focus in the image using "focal point"
With the help of the "focal point" function, when you upload an image in Drupal, you can use a small cross to tell Drupal what is important in the image, so that the automatic cropping works as good as possible. The function is not waterproof, but is well worth a try. Also note that it does not work for image boxes.
Specific image sizes
With that said, there are of course in the background also here pixel sizes that the system uses as it gives off images that are sent in the right format to your particular device. On a regular screen, you can imagine your web page divided into 12 columns. Such a column is never used alone, but merges, for example, 3 pieces to create the column width for the regular right column.
In layout mode, you create sections of different types where the number of columns and their sizes are specified using these twelve columns.
The width of the images that apply to different numbers of columns is shown below (the maximum height of the image is 640 px):
- 3 columns: 298 px
- 4 columns: 408 px
- 6 columns: 628 px
- 9 columns: 848 px
- 12 columns: 1288 px
If you feel completely confident that your image will only be used in a single context, for example in an infobox, you can crop the image as above to make sure it has certain proportions. Since it is difficult to predict in which contexts an image can be displayed, this should be seen as a last resort, it is always best to upload the image at least 1500 pixels wide and use focal point in the first place.
If you have any questions, please contact Servicedesk.
E-mail: servicedesk [at] lu [dot] se
Always enter the URL of the website or page to which the case concerns.