Resizing Images

Drupal Version

It is important to resize images to best fit the needs of a particular web page.  When an image is larger than necessary, this results in users wasting time and bandwidth (which they may have to pay for on mobile devices) to download image content that they will never actually see.

These days, photographs straight from a digital camera may be over 4000 pixels wide, which is much too wide for a web page.  Even if you are creating a photo gallery, most desktop monitors can only display around 2000 pixels in width.  So, you need to reduce the size of these images before uploading them to your website.

Image Resizing Guidelines

  • If you try to make a small image larger, it will simply become fuzzy (AKA pixelated), and the larger you make it, the fuzzier it will become.  However, you can easily make a large image smaller when needed.

  • For basic website pages, 400 pixels wide images are a good best-practice. For mobile compatibility, choose a width for your image that is less than 400 pixels.

  • If uploading large images for the press to use, your resolution should not be higher than 300ppi (pixels per inch) and the image should not be more than 3,000 pixels on it's longest side. If these images are not for the press, but are used as full-page-width decorations, you should make them even smaller.

  • If you are uploading an image for a headline / hero image (an image at the top of a main landing page that fills the page left to right), resize your image to no more than 1440 pixels wide.

  • When making an image smaller, don't sacrifice the quality of the image.  Instead, simply change the pixel length/width of the image.

  • Also, be sure to check "Scale proportionally" or "Maintain aspect ratio", so that your picture does not get skewed to where people have extra-wide heads that look strange.

How to Resize Images

Of course, you can use any graphic image editing program that you are comfortable with, such as Adobe PhotoShop, GIMP, etc.  If you are not sure how to resize images in one of these editors, just do a search in your favorite search engine on the editor's name and the phrase "resize image".