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.
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:
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.
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
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.