(Image) Size Matters
Over the last few months, our team has been working with our agency customers to convert their platform websites to mobile-friendly versions of their existing websites. If you're one of our agencies, you've heard us talking about the Responsive Migration for a while now; if you follow our blog, you've likely read other posts in our series on Responsive Design. If your site hasn’t already made the switch, you will before the end of 2014.
All of the changes in our website themes are in the interest of making our sites mobile friendly; you’ll typically see the difference simply in the shrinking and rearranging of columns as the width of any given the device shrinks. But another necessary shift in the interest of mobile friendly design is in how the platform handles images on each page.
One of the most bandwidth-intensive things a typical user will encounter as they navigate your site will be the images they encounter on each page. Not the images used for the overall design — those are loaded once and reused across the rest of the pages. Rather, it’s large images that are used to enhance individual pages that are more of a concern for mobile users.
Consider your site visitors who live in rural areas or other areas that experience slow connections to their mobile devices. Those users don’t want to have to wait for a large image to load on their phones. And as most phone plans limit the amount of data users can download per month, these large images can quickly eat up that limit without the phone owner even realizing it’s happening. But at the same time, users on a desktop computer and connected to Wi-Fi want to see those beautiful, large images and aren’t concerned about the file sizes.
How do we accommodate both?
Our response to the image size question was to add a new image field to our platform’s site pages — the Structured Image field. The Structured Image field is intended to show a full-width, landscape-oriented image at the top of your page, as a feature image. The graphic below shows how a Structured Image would appear on different devices within the sites.
What’s great about this field is that when you upload a large, beautiful image, it will display large and beautiful for devices with larger screens. Then the system will create smaller versions of the same image (with a smaller file size) for devices with smaller screens. This way we’re able to serve many needs with one image upload, without serving up large images to devices with data limits.
Unfortunately, the Structured Image functionality doesn’t apply to images uploaded to the Body content area of the page. Because those are just part of the general body content of the page, it will always serve up the uploaded version of the image, regardless of the device. The graphic below shows an image embedded into the Body content area.
What we CAN do for images in the Body is to shrink any image visually as the screen shrinks, to keep large images from getting cut off. To do that, the theme needs to be able to control image widths as they vary across devices.
As a result, as your sites move to our responsive themes, you will find that all your photos will show at the largest size it can fit on the page (that is, the size you uploaded them as), and will shrink down as the device gets smaller. For most images you won’t notice a difference at all, but if you uploaded a really large image and then manually shrunk it on the screen (by typing new dimensions or clicking-and-dragging the corner to resize it), you will see that the system overrides those manual dimensions to show at its larger size. This feature also ensures that users don't upload a large image with a large file size (difficult to load via mobile networks) when they intend to display a smaller image.
What does this mean for me?
For content managers on the GeorgiaGov platform, this means you will want to consider two things:
- If you have a large, landscape oriented image that can show at the top of your page, upload it to the Structured Image field to add it to your page.
- If you have an image (or images) that should show further down on your page, save your image at the desired size before you upload it.
For example, if you want your image to be 600px wide on a desktop, you will want to resize the image using a graphics tool so that it's 600px wide. If it should only be 320px wide with text wrapping around the left, then save it to 320px and upload that version. The theme will do the rest (resizing visually for smaller devices).
If you don’t have experience with graphics software for resizing images, we included some very quick and easy instructions on how to do this in the Making Your Content Mobile Friendly (PDF) manual.
It’s that easy!