CMS Tip: Size Images Correctly Before Placing on a Page

Posted on 10/30/2018 12:18:33 PM

This is part of a series of tips for web maintainers from the Digital Team about the CMS, MyIUP, IUP Mobile, and the interactive map.

Images are a great way to support your message and add visual interest to a page. Use the correct dimensions to make sure that your images are sized 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 (e.g., cut off a portion of) your image before you upload it.

Our Responsive Website

Because the IUP website is responsive, your images appear at different sizes and different positions on different screen sizes and on mobile devices (shown in the example below), but there are only a few dimensions to consider when sizing. You want to size your photo for the largest size it can appear: full width, or smaller than full width. For consistency, 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 the accompanying image styles to size and position the image)
Example of images in responsive design, shown on a desktop view and a mobile view

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

Always check the physical size and resolution of any image before uploading it from your computer to your page. You can easily do this by looking at the image’s properties.

Image properties details showing dimensionsFrom Windows, right-click on the image and choose Properties, then look at its dimensions (see example at right). If the image is oversized, then resize it in a photo editor, such as Photoshop.

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 100 KB 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 web editor (see below), to size it in the page.

Image styles on the format tabHand-in-hand with sizing the image is the application of image styles from the formatting toolbar in the editor. These styles position and size your image, and help it interact better with the rest of the content on your page. Remember to always choose one or more of the image styles after placing an image on the page.