Working with Images

Follow

General Overview

NOTE: We've recently introduced a sophisticated new system for resizing images responsively. The current image file size limit is 5mb. Find out more about responsive design, image compression, and focal points here: Responsive Image Sizing.

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.

NOTE: The image you can add in the "aside" position will always be 37.5% of the width of the article. The article width varies depending on whether or not it has a right side column. The height will be variable, depending on the image proportions you upload.

 

Image Proportions

Images appear mostly in 4:3 proportions, which are 1200x900px or 1024x768px. In some areas where images are used much wider, the widescreen proportion is used which is 16:9, for example 1200x675px.

Our advice is to always avoid images where the visual experience will be affected if it gets clipped - like text at the edges. Imagine this as a sort of safe zone, like margins on printed pages.

4:3 is still the most common image aspect ratio for images that will be used on Sprockets in general. If you generally keep the important parts of an image in the center, any 4:3 or 16:9 shifts will not impact the visual experience. 

The Posterboard has no fixed proportion (= aspect ratio); it goes any which way to fill the available space. Sliders, on the other hand, are perfectly square.

Also, steer away from text on images in general. It is more problematic if something gets cut off or a caption or description is overlayed and it isn’t good for accessibility either.

Here are two image examples that show how an image may be clipped in the varying proportions:

metro-publisher-aspect-ratios-example-1.jpg

metro-publisher-aspect-ratios-example-2.jpg

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

NOTE: Audio and video files must be hosted externally. You cannot upload audio or video files directly to your Metro Publisher file center.

 

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

NOTE: For SEO and organizational purposes it is essential that you give your images a useful filename instead of the default "IMG123456", for example!

 

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.

NOTE: Removing the file title means no so-called "alt tag" text appears for visually impaired persons!

Have more questions? Submit a request

Comments

Powered by Zendesk