NOTE: Fore additional information on ideal image sizes in Metro Publisher please visit our support document: Working with Images
What is Responsive Image Sizing?
Responsive design is the philosophy where the design elegantly fills any screen size. The most challenging aspect of responsive design is for the servers to provide responsive images, which means delivering appropriately sized images for every screen size and device context.
Beyond sizing the image to fit the screen, the servers should provide the appropriate file size (kilobytes of data) at a variety of screen sizes (aka breakpoints).
Example: The appropriately sized image is delivered
based on the user's device type.
How Does it Work in Metro Publisher?
In Metro Publisher, we have a something called Responsive Image Sizing. This feature will ensure that readers of your website will see the best images possible at any screen size (aka breakpoints).
Behind the scenes, this is what happens: Metro Publisher provides the browser with multiple images of different sizes, the browser chooses the "best" image depending on screen type (e.g. retina displays) and connection speed (e.g. 3G, 4G, WiFi, etc.) combined with display size (e.g. desktop, landscape, iPhone 6, etc.).
Say your reader is on a mobile device with a non-retina display and a 3G connection. For that reader a small image will be downloaded. If another reader is sitting at home looking at your site on a desktop computer with a large retina display monitor, a large image file will download. The result for the mobile visitor is a lighter site that loads faster.
In contrast, for a desktop visitor, the page that loads just as fast but with rich imagery – all user experiences are improved.
Responsive image sizing also means bandwidth savings for you. Recent test showed up to 40% reduction in file size, upon initial load, with this feature activated. Results will vary depending on how image heavy pages are and what kind of devices your readers are using.
NOTE: GIFs are not recompressed and therefore serve at the full size. That means that every time that animated file is loaded its full filesize is loaded, which may be an issue for mobile devices. Be careful that your GIFs ideally stay under 1MB by optimizing them. As a workaround you could use the media embed feature in the content editor to reference that image elsewhere (third-party host).
SVG files are also not affected by compression settings. SVG files are actually text files, not image files. so they cannot be handled the same way.
NOTE: Sites customized with CSS may need to be adjusted to ensure images load properly.
Options to Optimize Images
1. Compression setting for all images
To configure the default image compression quality for your whole website:
- Log in as an ADMIN
- Go to Settings > General.
- There you'll see a field labeled Image Lossy Compression Quality. If left blank, the default setting is 85%. That is a good balance between file size (i.e. bandwidth costs, usability) and quality.
2. Compression setting for individual images
To adjust the compression settings for a specific image:
- Log in as an Editor
- Go to Files, and then to the edit page for the image you want to edit.
- There you'll see a field labeled Image Lossy Compression Quality. If left blank, the default setting is 85%. That is a good balance between file size (i.e. bandwidth costs, usability) and quality.
3. Adjusting the focal point of an image
To adjust the focal point for an image:
- Log in as an Editor.
- Go to Files, to the edit page for the image you want to edit.
- In the upper right that is a preview of the image.
- Click the "Edit Focal Point" button (see screenshot above).
Troubleshooting Focal Point Issues:
Usually, focal point issues are due to the original image not having 4:3 proportions, but needing to fit into the designated landscape orientation space, e.g. a Carousel Sprocket. The focal point setting only displays the same on the admin side and pubic side if the image is in the correct orientation and proportion as the space for it in the particular Sprocket.
You should either crop the original image into a landscape orientation or use trial and error to determine the best focal point for an image to center in the Sprocket, if changing the orientation and adhering to a 4:3 image ratio is not feasible.
Focal point settings will not work for teaser images,since there are no preset proportions configured for them.
Watch the video below about Responsive Image Sizing:
Comments