Image Sizes and Drupal
When uploading images to Drupal, Drupal will take the images and optimize them after initial upload. This initial optimization will do the bulk of the work to ensure that images don’t get flagged as too large when passed through Google’s ranking system. There are a few things to keep in mind that will make uploading images better for the site both in page speed and quality.
Image Scaling
Images can be scaled down nicely, but not scaled up. Fitting a 500x500px image into a 100x100px box will work just fine with the use of Drupals cropping tool. But a 100x100 image will be forced to get blown up when trying to fit it in a 500x500px box, resulting in a severe pixelation and quality drop. It’s always best to err on the side of larger than smaller.
General Sizes Guide
Not all banners and card images are the same at every viewport. To ensure quality images at every viewport size a good guideline to follow can be the following:
- Banners: 2000x600px
- Cards: 600x600px
- People:300x300px
- Logos: 250x250px
These sizes are estimates but fairly good guidelines to follow. The actual sizes rendered will be determined in the content type on Drupal, where the image will then process through an “image style” that will crop the image.
Note about image style cropping: Cropping always is from the center, and scale-to-fit. So if there is important parts of the image on the very sides of the image, they have the potential to be lost. Choose photos with the focal point in the center to allow for this cropping process.
Optimizing before upload
While Drupal does optimize your image, there is a lot that the user can do beforehand to really bring down the sizes for page speed optimizations. Images on the web should always be saved at 72DPI and saved for web. This can be found in the “Image Size” option set in photoshop.
Image > Image Size
Important note! The cropping tool does not necessarily scale with image! Cropping will get you the proper ratio, but in order for that image size to be correct, it must be changed here.
After ensuring that your image resolution is 72, and your image size is where you want, you will want to save this for web. File > Export > Save for web
Double check your image size and make sure you are saving it as the correct file type with a good descriptive file name with no spaces.
File types. JPGS are used for your every day images. Banners, photos, cards. PNGs should only be used for things with transparent backgrounds such as logos, images with text, screenshots etc.
Further Image Optimization
An extremely useful tool for exceptionally large images (such as detailed large banners) should be further compressed using tools that retain the clarity but drop the size. A great option is https://tinypng.com/ Running your most complex and largest images through this first does a great deal in helping with page speed.