Working with Images

General Overview

Images are essential to any website. We'd like to give you some tips on making images work well for you.

If an image is too large for the position in which it will be used, Metro Publisher will automatically re-size the image to the proper dimensions. The minimum width that you will need for an image used in any of these placements is 1024 pixels wide.

TIP: If you start off with a landscape oriented image that is at least 1024 x 768 pixels, it will re-size appropriately throughout your site.

If you have images supplied by photographers, keep compression factors in mind: Lossless Image Compression Quality.

Recommendations for Working with Images

1. Use the biggest image (in pixels) that you can

• When you upload images to Metro Publisher, upload a large file that has at least the minimum width appropriate for your design but which is no more than 5mb in file size. This will allow the same image to be used anywhere throughout your site without requiring you or your editors to re-size or re-crop your images. Metro Publisher will automatically re-size them in the context of where they appear on your site. Some readers have very large monitors nowadays, so it's better to size up rather than down.

2. Landscape images are best

• Using landscape images allows your images to resize perfectly throughout your website.

3. For slideshows, crop your images the same size

• Generally speaking, make sure that the slides in your slideshows are cropped at the same size. This provides a nicer and smoother experience for your readers.
• Notes on avoiding whitespace are here: Cropping Images Properly.

4. Keep the important stuff in the center, avoid borders/frames

• Images get used in varying proportions (see Image Proportions below) so there is a chance the extremes will get clipped
• Avoid putting text or frames on the edges

5. Avoid images with a lot of text

• Sometimes images will have the Title + Description overlaid which would result in text over text and could be illegible to your reader. 

6. Always check your work

• NEVER add new content, upload images or publish without previewing your work. It takes only a few seconds to check your work and helps reduce the number of errors. In the end, your website will look more professional.

Image Proportions

• Images that appear in the layout list and gallery are 4:3 proportion
• Posterboard sprockets render any image proportion
• Carousel sprocket uses the 16:9 proportion  

If you keep the important image parts in the area that overlaps for all three, then your images will display best. You can also use the focal point tool in your file center to adjust your images accordingly.

Uploading Images

There are two ways to upload images to your Metro publisher work site.

1. Within a Piece of Content

• When creating a piece of content you can you can add images and other media by clicking the "Add Media" button in the content editor. You can add single images or upload a .zip file. (Please note that you are inserting images into so-called media slots here, which do not allow for linking. Please add any links to the image description text or to the piece of content in question.

2. Directly to the File Center

• Or you can add images directly to the file center where all of your images are centrally stored. You can add single images or upload a .zip file.
  
  To do that, log in as an Editor and go to "Files > Add." Then select either from either option – single or multiple files (ZIP).

Image Information

Image file names, that are automatically generated by cameras, e.g. IMG_123456, become part of the URL name of the image.
 
For SEO purposes, that file name should describe the image, e.g. longwood-gardens-fountain.jpg instead of a generic alphanumerical filename. Those filenames should therefore be changed if you would like Google & co. to display the images on your site whenever users search for the corresponding keywords.
 
If Google can’t find a good text match on your page for the snippet when it’s trying to return it as an image search result, it will show the image file name as the snippet. So the file name is important since it’s a potential keyword match and a potential image snippet.
 
The image title becomes the alt-text - that’s the text that appears when a visitor hovers over the image with a mouse and which is coded into the HTML. 
 
This is essential as a text alternative to the image for people using screen readers (because of visual impairment) or text browsers, or readers who just have images turned off for other reasons, like low bandwidth connections, for example. Google uses the <alt> tag as the subject of your image and that helps decide the image that best matches a user’s search.
 
Ideally that would become something like:
 
<img src=”longwood-gardens-fountain.jpg” alt=”Main fountain at Longwood Gardens”>

You should not be using the image titles for internal purposes, but rather for public purposes. It is best practice to display image titles on images.

You can overwrite the image titles by editing the image on the article edit pages themselves, however, meaning that if you don't want the file title to display on the public side under certain images, you should keep the title in the image but just type in a space in the title field for the media slot. That will override the information from the file center.