​CMS Tip: Size Images Correctly for Responsive and Old Templates

Posted on 10/7/2016 11:12:12 AM

This is part of a series of tips for web maintainers. The Web Team posts hints and tips about the CMS, MyIUP, IUP Mobile, and the interactive map each week.

Images are a great way to support your message and add visual interest to a page. Use the dimensions provided by the Web Team to make sure that your images are sized correctly for the page on which they will appear.

There is a whole section of how-to's just on images in the CMS. Using photo editing software, like Photoshop, you'll need to resize and possibly crop (i.e., cut off portion of) your image before you upload it.

If Your Site Is Unconverted

Your image will always appear at the dimensions you set, and in the position you place it. There is a comprehensive list of image sizes available in our how to section, covering galleries, news items, and more. Use the left- or right-aligned image style in the editor to position it on the page.

If Your Site Is Converted to Responsive

Your images will appear at different sizes and different positions on different screen sizes (because it is responsive, shown in the example below), but there are fewer dimensions to consider when sizing. Basically, you want to size your photo for the largest size it can appear: full width or smaller than full width. For consistency on the new pages, we recommend a 16:9 ratio for most images, which results in the following dimensions:

  • 750px by 422px for full-width images
  • 737px by 415px for anything smaller than full width (use accompanying image styles to size and position the image)
Example of images in responsive design

Two views of the same page: At left, on a desktop; at right, on a small screen.

When you are saving your image (for example, with the Save for Web... option in Photoshop), try to get the smallest file size (in KB) with the highest clarity. Aim for a file size of 50–70 KB, or smaller if possible. If that results in a low quality or grainy image, increase the quality but don't exceed 100KB in file size.

If you have an image that, unedited, is smaller than the listed dimensions, don't try to make it larger. That will result in a blurry image. Instead, include an image-sizing class, available in the editor, to size it in the page.

Image styles on the format tabHand in hand with sizing the image is the application of image styles, mentioned throughout this tip, in the editor. These styles position and size your image, and help it interact better with the rest of the content on your page.

—Jessie Groll