An editor should be able to upload a useful source image without manually producing every size used by the website. The implementation should then serve an appropriate version for a small card, an article header, and other placements.
Start with the places images appear
List your image placements and their intended proportions. A wide article card may need a consistent crop, while a diagram should usually remain fully visible. We recommend defining these rules with sample content before editors begin uploading a large library.
Drupal image styles provide reusable image transformations. Responsive image styles can map image styles to breakpoints or size rules for different displays. See the responsive image style guide for the relationship between those settings.
Use representative examples
Try a landscape photograph, a portrait, an illustration, and an image containing labels. A crop that works for scenery may remove the important part of a portrait or make a diagram unreadable. Build an exception into the content workflow when a placement cannot safely crop a particular image.
Inspect the delivered file
A page can display an image at 320 pixels while downloading a much larger source. Use the browser’s network panel to inspect the actual image URL, dimensions, format, and transferred size. Repeat the check on a narrow viewport and after a fresh load.
Below-the-fold images are good candidates for lazy loading. Give the main visible article image appropriate loading behavior so the visitor does not wait unnecessarily for the content they came to read.
Support editors with short guidance
- Explain the intended subject and crop for each image field.
- Require useful alternative text for meaningful images.
- Keep originals available for future layout changes.
- Show an example of an image that works well in a card.
Image optimization is easier to maintain when the rules live in Drupal configuration and the upload instructions are clear. For help with image presentation and page weight, discuss your Drupal website with our team.