--- title: Responsive Images And Faster Downloads description: Providing a good user experience around images has never been more challenging. Between high-res screens and mobile devices, developers need to tackle a fundamental tradeoff between speed and quality. Luckily, the Drupal community has developed a tool that makes this challenge more manageable. image: https://cta.o8.agency/hubfs/26-1.jpg --- [![OriginEight](https://cta.o8.agency/hubfs/logo-o8-white.svg "OriginEight")](https://www.origineight.net/) - [Services](https://www.origineight.net/) - Web Design - [Website Design](https://www.o8.agency/projects/design-ux) - [UX Design](https://www.o8.agency/services/user-experience) - [UX Testing](https://www.o8.agency/web-design/ux-testing) - [Content Strategy](https://www.origineight.net/projects/drupal) - [Conversion Rate Optimization](https://www.o8.agency/services/conversion-rate-optimization) - [Translation](https://www.o8.agency/services/website-translation) - Digital Marketing - [Digital Innovation](https://www.o8.agency/digital-marketing/strategy-framework-dio) - [Branding](https://www.o8.agency/digital-marketing/branding) - [PPC + Search](https://www.o8.agency/digital-marketing/paid-search-ads-ppc) - [SEO](https://www.o8.agency/digital-marketing/seo) - [Social Media](https://www.o8.agency/digital-marketing/smm) - [Copywriting](https://www.o8.agency/digital-marketing/conversion-copywriting) - [Content Marketing](https://www.o8.agency/digital-marketing/content) - [CRM Integration + Marketing Automation](https://www.o8.agency/digital-marketing/crm-integration-automation) - [Digital Consulting](https://www.o8.agency/digital-marketing/consulting) - [Personalization Solutions](https://www.o8.agency/digital-marketing/personalization-solutions) - [Web development + CRM](https://www.o8.agency/web-development) - [Wordpress](https://www.o8.agency/projects/wordpress) - [Drupal](https://www.o8.agency/projects/drupal) - [Salesforce](https://www.o8.agency/web-development/salesforce-consulting) - [Hubspot](https://www.o8.agency/web-development/hubspot) - [eCommerce](https://www.o8.agency/services/e-commerce-solutions) - [24x7 Support](https://www.o8.agency/web-development/support) - Compliance + Security - [24x7 Monitoring](https://www.o8.agency/web-development/support) - [Security and Performance](https://www.o8.agency/compliance-security/o8-performance) - [ADA Compliance](https://www.o8.agency/compliance-security/accessibility-ada) - [Data Privacy Compliance](https://www.o8.agency/compliance-security/data-privacy-compliance) - [Website Audits](https://www.o8.agency/compliance-security/drupal-audit) - [Work](https://www.origineight.net/work) - [Clients, Reviews, Testimonials](https://www.origineight.net/clients) - [Case Studies](https://www.origineight.net/case-study) - [Digital Marketing](https://www.origineight.net/projects/digital-marketing) - [Design & UX](https://www.origineight.net/projects/design-ux) - [Wordpress](https://www.origineight.net/projects/wordpress) - [Drupal](https://www.origineight.net/projects/drupal) - [See all work](https://www.origineight.net/work) - [About](https://www.origineight.net/about) - [About Us](https://www.origineight.net/about) - [Minneapolis HQ](https://www.o8.agency/locations/minneapolis-mn) - [Team](https://www.origineight.net/team) - [Blog](https://www.origineight.net/blog) - [Proven Process](https://www.origineight.net/digital-impact-optimization) - [Careers](https://www.o8.agency/careers) - [Contact Us](https://www.o8.agency/contact) - Pricing - [Project Calculator](https://www.o8.agency/pricing) - [Monthly Packages](https://cta.o8.agency/o8-monthly-packages) - [Free Analysis](https://www.o8.agency/free-website-roi-report) [![Home](https://cta.o8.agency/hubfs/OriginEight_July2018%20Theme/Images/logo.svg)](https://www.origineight.net/) - [Contact Us](https://www.origineight.net/contact) - [Our Process](https://www.origineight.net/digital-impact-optimization) - Menu - [Solutions](https://www.origineight.net/) - Websites - [Design and UX](https://www.origineight.net/projects/design-ux) - [User Experience](https://www.origineight.net/solutions/strategy-marketing/content-strategy-user-experience) - [Content Strategy](https://www.origineight.net/solutions/strategy-marketing/content-strategy-user-experience) - [Drupal](https://www.origineight.net/projects/drupal) - [Wordpress](https://www.origineight.net/projects/wordpress) - [eCommerce](https://www.origineight.net/solutions/e-commerce-solutions) - Digital Marketing - [Digital Marketing Optimization](https://www.origineight.net/digital-impact-optimization) - [Copywriting That Converts](https://www.origineight.net/solutions/conversion-copywriting) - [Paid Advertising – SEO, SEM, PPC](https://www.origineight.net/digital-marketing/digital-marketing-services) - [Website Support](https://www.origineight.net/solutions/support) - [Support and Maintenance](https://www.origineight.net/solutions/support) - [Audits](https://www.origineight.net/solutions/drupal-audit-services) - [Performance](https://www.origineight.net/solutions/o8-performance) - [Security](https://www.origineight.net/solutions/o8-performance) - [Digital Rescue](https://www.origineight.net/solutions/o8-digital-rescue) - [Training](https://www.origineight.net/solutions/training) - Specialty - [Staff Augmentation](https://www.origineight.net/solutions/o8-staff-augmentation) - [Startups](https://www.origineight.net/solutions/startups-development-consultation-mvps-and-partial-cto-services) - [Web Hosting](https://www.origineight.net/solutions/web-hosting) - [Work](https://www.origineight.net/work) - [> Business & Enterprise](https://www.origineight.net/projects/business-and-enterprise) - [> Higher Ed](https://www.origineight.net/projects/higher-eduction) - [> Manufacturing](https://www.origineight.net/projects/manufacturing) - [> Health and Wellness](https://www.origineight.net/projects/health-and-wellness) - [Clients, Reviews, Testimonials](https://www.origineight.net/clients) - [Case Studies](https://www.origineight.net/case-study) - [Digital Marketing](https://www.origineight.net/projects/digital-marketing) - [Design & UX](https://www.origineight.net/projects/design-ux) - [Drupal](https://www.origineight.net/projects/drupal) - [Wordpress](https://www.origineight.net/projects/wordpress) - [See all work](https://www.origineight.net/work) - [About](https://www.origineight.net/about) - [About Us](https://www.origineight.net/about) - [Proven Process](https://www.origineight.net/digital-impact-optimization) - [Blog](https://www.origineight.net/blog) - [Team](https://www.origineight.net/team) - [How We Help Marketers](https://www.origineight.net/how-we-help-marketers) - [Blog](https://www.origineight.net/blog) - Pricing - [Project Calculator](https://www.o8.agency/pricing) - [Monthly Packages](https://cta.o8.agency/o8-monthly-packages) - [Contact](https://www.origineight.net/contact) # Responsive Images And Faster Downloads on October 25, 2018 Share # Responsive Images And Faster Downloads on October 25, 2018 ![Origin Eight](https://cta.o8.agency/hubfs/just_o8-square.png) ### Written by Origin Eight ### Categories [Drupal](https://cta.o8.agency/blog/tag/drupal) [UX](https://cta.o8.agency/blog/tag/ux) [Responsive Design](https://cta.o8.agency/blog/tag/responsive-design) It's 2016 and providing good user experience around images has never been more challenging. With high-resolution screens and lots of mobile devices at various browser sizes, developers need to tackle a fundamental tradeoff between a fast user experience (smaller images) and a high-quality user experience (larger images). Luckily - like imagecache/image styles before it - the Drupal community has developed a tool that makes this challenge much more manageable: the Picture module. But first, let's review what functionality we want around the display of images: - Minimize bandwidth demands on the visitor - Provide images of a resolution appropriate to the visitor's device - Tailor scaling, cropping and other processing (image styles) to screen size In other words, we want to both maximize performance and ensure high quality art direction on our sites. Luckily, new HTML techniques - srcset and picture - have been advanced to provide the sophistication needed to meet these needs. The details of how these work are outside of the scope of this article, but you can find lots of [background(link is external)](http://alistapart.com/article/responsive-images-in-practice) [articles(link is external)](http://www.webdesignerdepot.com/2015/08/the-state-of-responsive-images/) if you're interested. Suffice to say that the picture element provides multiple image sources to the browser, along with instructions regarding which to load for the visitor. The browser then only downloads and displays the appropriate image source. The [Picture module(link is external)](https://www.drupal.org/project/picture) takes care of all the low-level mechanics for you. It works extensively with two other modules: core's Image Styles and [Breakpoints(link is external)](https://www.drupal.org/project/breakpoints). The high-level steps are as follows: - Decide the screen widths at which your site's design will change in a responsive manner (breakpoints) - Identify the art direction needed for images on the site - Create image styles that provide the proper art direction and resolution for each width (image styles) - Map sets of image styles to breakpoints (picture mappings) ### Breakpoints It's worth reading [the documentation(link is external)](https://www.drupal.org/node/1904690) on breakpoints, especially [the warning(link is external)](https://www.drupal.org/node/1904690#warning) about how to order them. The process is a little picky. This step codifies the "what" you are responding to in your responsive web design. These are generally the same widths that your theme already has in the form of media queries in its CSS. Deciding on breakpoints is also outside of the scope of this article (and somewhat dependent on your theme's design), but let's just use these as an example: - wide: (min-width: 1200px) - normal: (min-width: 979px) - narrow: (min-width: 768px) - mobile: (min-width: 0px) Breakpoints are set at Admin menu > Configuration > Media > Breakpoints. Make sure to check the multiplier checkboxes - ie "2x" - that you want in order to serve higher resolution images to devices with "retina" style screens. Once set, save your breakpoints to a group. ### Art Direction Art direction is another subjective question that mostly depends on your theme and content needs. Art direction is a term that covers all of the visual choices you make about presenting images on the site. Does the image take up the full width of the column, or only a certain fraction of it (with text flowing around)? Is the image cropped a certain way? Is a watermark or other effect applied to it? These are questions we're used to answering via Image Styles. However, there's a potential extra wrinkle when considering responsive design: does the art direction change when the screen size changes? What if you have a really wide-and-short (super landscape) image style? That works well on desktop, but might obscure important details from the image on a skinny screen. You might choose a different art direction in that case. Perhaps cropping the image so that it is relatively taller (and narrower). Like breakpoints, these are really design and user experience decisions. Drupal configuration flows from them. ### Image styles OK, you have breakpoints and art direction. Here's the tedious part: now create an image style for (almost) each combination of art direction and breakpoint. Let's say you decided you want one art direction where the image is the full width of a column (called 'article-full-width'), and another where the image is only a third of the column's width (called 'article-third-width'). Let's assume that the column is 66% the width of the layout at breakpoints narrow and above (below that, 100% of the width), and maxes out at 1000 pixels wide (even on a desktop with a large screen). Here are the styles you'd need, given the example breakpoints above: - article-2000 (scaled to 2000px width) - article-1584 - article-1536 - article-1294 - article-1000 - article-792 - article-768 - article-660 - article-647 - article-524 - article-508 - article-428 - article-330 - article-262 - article-254 - article-214 Lot of styles, huh? I've created [a spreadsheet that demonstrates the calculations I'm doing](https://docs.google.com/spreadsheets/d/1_SpwpESZkInLNuIIFYI7fLbyei7Ne6eRClcR28NY1wQ/edit?usp=sharing) to decide on these. Given the permutations of browser width, column width, image-width-as-fraction-of-column, and mobile exceptions, it's not easy to keep track in my head. ### Picture mappings Here's where everything comes together. A picture mapping is what drives how Picture module spits out the picture HTML elements. Think of each picture mapping as a distinct art direction (or a set of related art directions, in cases where browser width changes the art direction). For that art direction, it maps an image style to each of your breakpoints. In this example, we'd create just two mappings: - Article - Full width - Article - Third width Note that in our examples above, the mobile styles are actually wider than some of the others, because in this example, the theme's design switches the column to full-browser-width and the image to full-column-width when the browser is under 768px wide. ### Apply your mappings to image fields Now you have the Picture system completely set up. But not yet doing anything! The last step is to activate the system for displaying content. One of the easiest ways to do that is to use Picture to display the content of image fields. I'll assume you already have a Content Type configured that has at least one Image field: - Go to Admin > Structure > Content Types > \[your content type\] - Click the Manage Display tab - Under the Format column, choose "Picture" in the drop-down associated with the image field - Click the "gear" icon to change display settings for the field - Choose the appropriate Picture mapping value - Click "Update" - Click "Save" Great! Now your image field is set to display the image as a Picture element. Clear caches as necessary, and check out your content at a variety of browser widths. Please enable JavaScript to view the [comments powered by Disqus.](https://disqus.com/?ref_noscript) ## An Agile Approach to Better Websites and Digital Marketing How can you better meet your marketing and business goals in a way that's low-risk and based on actual data? ### [Learn more >>](https://www.origineight.net/digital-impact-optimization) ### Subscribe To Our Blog! ### Related posts - [![Twin Cities Drupal Camp talk: ](https://cta.o8.agency/hs-fs/hubfs/Post%2060%20bb.jpg?width=100&name=Post%2060%20bb.jpg)](https://cta.o8.agency/blog/twin-cities-drupal-camp-talk-change-your-customers-behavior-with-a-brain-based-data-driven-approach) [Twin Cities Drupal Camp talk: "Change your customer's behavior with a brain-based, data-driven approach"](https://cta.o8.agency/blog/twin-cities-drupal-camp-talk-change-your-customers-behavior-with-a-brain-based-data-driven-approach) - [![Case Study: Drupal 8 redesign for a Community College](https://cta.o8.agency/hs-fs/hubfs/57-1.jpg?width=100&name=57-1.jpg)](https://cta.o8.agency/blog/case-study-drupal-8-redesign-for-a-community-college) [Case Study: Drupal 8 redesign for a Community College](https://cta.o8.agency/blog/case-study-drupal-8-redesign-for-a-community-college) - [![Does Font Choice Affect User Experience?](https://cta.o8.agency/hs-fs/hubfs/56.jpg?width=100&name=56.jpg)](https://cta.o8.agency/blog/-does-font-choice-affect-user-experience) [Does Font Choice Affect User Experience?](https://cta.o8.agency/blog/-does-font-choice-affect-user-experience) - [![Drupal vs Sitecore: It's 2018, Which Should I Choose?](https://cta.o8.agency/hs-fs/hubfs/53.jpg?width=100&name=53.jpg)](https://cta.o8.agency/blog/drupal-vs-sitecore-its-2018-which-should-i-choose) [Drupal vs Sitecore: It's 2018, Which Should I Choose?](https://cta.o8.agency/blog/drupal-vs-sitecore-its-2018-which-should-i-choose) - [![Why Drupal Remains a Leading CMS in 2018](https://cta.o8.agency/hs-fs/hubfs/51.jpg?width=100&name=51.jpg)](https://cta.o8.agency/blog/why-drupal-remains-a-leading-cms-in-2018) [Why Drupal Remains a Leading CMS in 2018](https://cta.o8.agency/blog/why-drupal-remains-a-leading-cms-in-2018) - [![HelpSystems.com: Responsive Drupal Website Redesign and Digital Impact Optimization](https://cta.o8.agency/hs-fs/hubfs/content-strategy-user-experience.jpg?width=100&name=content-strategy-user-experience.jpg)](https://cta.o8.agency/blog/helpsystems.com-responsive-drupal-website-redesign-and-digital-impact-optimization) [HelpSystems.com: Responsive Drupal Website Redesign and Digital Impact Optimization](https://cta.o8.agency/blog/helpsystems.com-responsive-drupal-website-redesign-and-digital-impact-optimization) ### Do Better Digital Marketing All websites and digital marketing campaigns are losing conversions and therefore *money*. Our proven process plugs the leaks and saves you time! [Learn more >>](https://www.origineight.net/digital-impact-optimization) ## Find Out More - [Blog](https://www.origineight.net/blog) - [Contact Us](https://www.origineight.net/contact) - [Solutions](https://www.origineight.net/solutions-archive) - [Portoflio](https://www.origineight.net/work) - [Support](https://www.origineight.net/support-maintenance) - [Careers](https://www.origineight.net/careers) - [Privacy Policy](https://www.iubenda.com/privacy-policy/99860277) - [Cookie Policy](https://www.iubenda.com/privacy-policy/99860277/cookie-policy) - [Terms of Service](https://www.origineight.net/terms-service) ## Search [Agency Partnerships](https://www.origineight.net/digital-and-marketing-agency-partners) ## Let's Connect - - - - - ## Origin Eight [323 N Washington Ave Second Floor, Suite #23 Minneapolis MN 55401](https://www.google.com/maps/place/323+N+Washington+Ave,+Minneapolis,+MN+55401/@44.9841524,-93.2772068,17z/data=!3m1!4b1!4m5!3m4!1s0x52b3328ee56acea7:0xa4a68ec4ba46099c!8m2!3d44.9841486!4d-93.2750181) [![O8 Minneapolis Office](https://cta.o8.agency/hubfs/OriginEight_July2018%20Theme/Images/staticmap.png)](https://www.google.com/maps/place/323+N+Washington+Ave,+Minneapolis,+MN+55401/@44.9841524,-93.2772068,17z/data=!3m1!4b1!4m5!3m4!1s0x52b3328ee56acea7:0xa4a68ec4ba46099c!8m2!3d44.9841486!4d-93.2750181) Phone: [612-276-5880](tel:612-276-5880) Email: [Contact Us](https://www.origineight.net/contact)  - ## Drupal and WordPress Experts [![Drupal Association Organization Member](https://cta.o8.agency/hubfs/OriginEight_July2018%20Theme/Images/Drupal_Association_Organization_Member_1.png)](https://www.origineight.net/projects/drupal) - ## Community [![MN Tech Diversity Pledge](https://cta.o8.agency/hubfs/OriginEight_July2018%20Theme/Images/badge.png)](https://mntechdiversity.com/) ### We love higher ed! [![UMN](https://cta.o8.agency/hubfs/OriginEight_July2018%20Theme/Images/umn-footer-logo.png)](https://www.origineight.net/portfolio-higher-ed) [Origin Eight is a Proud University-Wide Contract Vendor at the University of Minnesota](https://www.origineight.net/portfolio-higher-ed)