Preparing Images for the Web
Drupal has built-in features to help you scale images, but it is still best to start by uploading images that follow web standards. Below are some resources to help with choosing the correct format, compressing, scaling, and cropping images.
- Resolution: When determining the correct size for an image intended for the web, the only numbers that matter are pixels (px) - how many pixels tall and how many pixels wide the image is. Resolution is meaningless on the web because the device (monitor, phone, etc.) that you are using to view the image will determine its resolution.
- Color profile: set to RGB
- Image dimensions: reduce the dimensions of images that are thousands of pixels wide. Images typically do not need to be more than 1,500 pixels wide for banners and 300 pixels wide for images floated right or left in the body of a page.
Use all lowercase and no spaces in filenames. In place of spaces, you can use underscores or dashes. Make the filename descriptive of what is in the image (do not leave a default image name such as IMG1234).
Choose the Correct Image Format
There are three image formats used on the web:
- JPG: Use jpg (or jpeg) for photos and images with a lot of different colors but no transparency. Note: jpg and jpeg are the same image type.
- GIF: used for simple logos, charts, illustrations and icons with high contrast, GIFs also support transparency.
- PNG: Generally preferred for logos, charts, illustrations, and icons. PNGs support transparency, as well as more complex use of color, gradients, and shading.
Learn more about web image formats in this quick tutorial:
Keep File Sizes Small
Upload images with a small file size to ensure fast downloads across platforms. If your image is multiple megabytes, always compress it before uploading to your site. Even images with large dimensions should have a file size of 200-300 KB or smaller when properly compressed.
Photoshop has a save for web feature that allows you to easily compress images while still retaining quality, as shown in this Lynda tutorial.
Important tip: When saving for web, always work from a copy of your original high-quality image. Keep the original in case you need it again. Once an image is compressed, the extra data (and image quality) is discarded.
Don't have Photoshop? Other basic photo editing tools will allow you to manually adjust the following settings to make your image web-ready.
Resizing and Cropping Images
When resizing an image, avoid stretching small images to a larger size, which creates pixelation. Large images can always be scaled down, but small images cannot be made larger without sacrificing image quality.
Need more control over the appearance of your images? Try cropping them before uploading them to your site. The Lynda tutorial below shows how to use the crop tool in Photoshop, which includes the ability to crop an image to a specific aspect ratio. This is particularly useful when sizing images to fit in a widescreen slideshow, or when you want to crop images to consistent dimensions for all of your pages.