The aspect ratio of an image is the width compared to the height. Many of the content types on our website support images with different aspect ratios. Before you use an image from the Media Library, you should be sure to select an image that is the correct size for your need.

Inserting an image

1. Once you have clicked into a content type that needs an image, you will click Select media. This will open a new pop-up window.
2. Use the left-hand navigation to expand the dropdowns and go to Categorised > minneapolismn.gov > Content Assets > Images.
3. Now on the right-hand size you can search for a photograph by keyword in the Filter field.
4. Be sure to check the full name of the image if you see duplicates of the same photo. The Name field should have " - Tile" or " - Hero" or " - Thumbnail" at the very end of the photo name, to help you see different aspect ratios.
5. On the Select Variant page, you will select the Original image on the page that asks you which variant to select.

Adding alternative text (alt text) for an image

Web accessibility guidelines require that we include alt text for all images that we add to our website.

Do not include the words "photo of" or "image of" in the description. Just use a few simple words to describe the image, e.g., firefighter by a house on fire.

Use this detailed alt text guide to how to properly make images accessible.  It includes:

• How to write effective alt tags
• When it is necessary to include text on the page and/or captions in addition to an alt tag

How to add alt text

• From an image content type
  If you use an image content type to add an image to a page (e.g., Feature Image/Video, Hero Image, Row of Images or Image in Tile), the content type screen will include an image alt box, where you can include a short description of the image. 
  
  
• From a scannable paragraph content type
  If you add an image to a scannable paragraph, you will need to double-click the image itself to add alt text. A box titled "Set media attributes" will appear. Add the alt text to the Description field on this box. Note: The Description field looks like it will only allow you to type a few characters. You can type past the end of the small field that appears.

Tile

Tile images are narrower then hero images and have a smaller file size. Tile images are 868 x 650. Good content types for portrait and square images include:

• Row of Images (with 2 - 3 images)
• Featured Image/Video
• Scannable paragraph
• Promotion & Sign Up Promotion
• Article (Hidden)
• Projects

Thumbnail

The thumbnail is a square aspect ratio. It is 200 wide at a minimum. Use this variant for:

• Multicolumn Content (3 - 4 columns, height may vary)
• Page header and summary with profile picture (200x200)

Hero

The hero image is a widescreen, landscape image. Hero images are 1600 x 800. 

Want to add some new images to your pages? Follow these steps to add new images to the website.

1. Make sure your images meet our image size guidelines.
2. Send an email of your images to the digital services team. Include in the subject line "Images to add to T4"
3. If your image has a Tennessen agreement, include that too. All images with identifiable faces are required to have one.
4. The digital services team will upload your image to T4, usually within a day. Your images will also be uploaded to Sharepoint if you included a Tennessen agreement.
5. The digital services team will notify you when your images are available.

Do

Hero images

For images that display across the full width of the page:

• Keep them under 200KB (Kilobytes) in size.
• They must be 1600 pixels wide.

Tile images

For images you use in tiles:

• Keep them under 50KB.
• Resize them to be 868 pixels wide.

Thumbnail images

For thumbnail images:

• Keep them under 20KB.
• Resize them to be 200 pixels square.

Don't

• Don't use animated gifs.
• Don't use images to display text.
• Don't use images larger than 200KB.

Reducing image size

Oversized images are often the main reason why pages load slowly. Slow pages can frustrate visitors and have a bad effect on search engine rankings. We need to treat images the right way so that they have small file sizes but still look great.

Choose the right format

Web browsers support 3 major image formats: .jpg, .gif, and .png.

GIF

Use the .gif format for images that have fewer than 256 colors.

• Logos
• Line drawings
• Cartoons

JPG

You'll use the .jpg format for most images (especially photographs.) This format supports various levels of compression. An image with higher compression has a smaller file size but results in a lower quality. Lower compression images are of higher quality but also large file sizes. Try to find a balance between the two.

PNG

The .png format results in larger file sizes than .gif and .jpg. Avoid this format when possible. Use it when you need to make available the highest quality images, such as for print material on gateway pages.

• The text of the page itself (the body copy)
• The alt text for the image

See W3C guidelines for images with text