A large image may show plenty of detail on a large screen, but is reduced to show only relevant information for smaller screens like the example of the image from Nokia\u2019s website.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i1.wp.com\/wowfall2020.londietmartin.com\/wp-content\/uploads\/2020\/10\/nokia-desktop-2.png?ssl=1\")
<\/figure><\/div><\/div>![\"\"](\"https:\/\/i0.wp.com\/wowfall2020.londietmartin.com\/wp-content\/uploads\/2020\/10\/nokia-tablet-4.png?ssl=1\")
<\/figure><\/div>![\"\"](\"https:\/\/i0.wp.com\/wowfall2020.londietmartin.com\/wp-content\/uploads\/2020\/10\/nokia-phone-2.png?ssl=1\")
<\/figure><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\nThis same image has been cropped to fit a particular viewport (screen size) to effectively communicate their message. As the viewport gets smaller, the image is cropped to remove some of the background and emphasize the woman. If they just scaled the image down to fit the screen, then the woman would be barely visible.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Art direction can mean changing the orientation like you see in the following example. <\/p>\n\n\n\n
Each image changes from portrait on a large screen, to landscape on a smaller screen so the content isn\u2019t lost as the screen size changes.<\/p>\n\n\n\n <\/p>\n\n\n\n For images that contain text, we can change the content (text and picture) and aspect ratio, like in the following example.<\/p>\n\n\n\n\n\n <\/p>\n\n\n\n If Nokia just resized the image, then the text would be too small to read. Instead, they used a different picture for smaller viewports, moved the text, and changed the aspect ratio to make the picture taller.<\/p>\n\n\n\n <\/p>\n\n\n\n To solve the art direction problem, you need the following elements and attributes:<\/p>\n\n\n\n <picture> To specify different images depending on device characteristics. <\/p>\n\n\n\n <\/p>\n\n\n\n The largest image size is the first source (min-width: 900px)<\/strong>. It\u2019s media attribute tells the browser that this first source should be used if the viewport is 900px or greater.<\/p>\n\n\n\n The media attribute of the smallest image size tells the browser to use the second source, (min-width: 750px)<\/strong>, if the viewport is equal to or greater than 750px, and less than 900px.<\/p>\n\n\n\n If no media query matches the list, then the <img> is used. <\/p>\n\n\n\n <\/p>\n\n\n\n If you want to provide different sizes of an image, but not change its content or aspect ratio, then consider using the resolution switching method. Unlike the picture element used in art direction, srcset presents a choice of multiple images and their true widths to enable the browser to select the best image.<\/p>\n\n\n\n View the Guardian website as an example.<\/p>\n\n\n\n They use resolution switching to tell the browser what the size of the image will be in relation to the screen size and how that relationship changes as the size of the screen changes. <\/p>\n\n\n\n <\/p>\n\n\n\n To get started, you must include the srcset and sizes attribute. The sizes attribute contains a list that describes the size of the image in relation to the viewport size.<\/p>\n\n\n\n <\/p>\n\n\n\n When the browser reads the list of values, it selects the value that meets the media condition.<\/p>\n\n\n\n If the viewport is 400 pixels or smaller, (max-width: 400px) 55vw<\/strong>, then the image will be 55% of the viewport width (vw). When none of the media conditions are met, then the default value, 250px<\/strong>, is used.<\/p>\n\n\n\n <\/p>\n\n\n\n There are so many methods to solving responsive images that it can be challenging to figure out the best method for your image. To know what method works best, you must know what use case you\u2019re planning for. Art direction and Resolution Switching are key methods to use. For more use cases to help you build responsively, check out The W3C Working Group.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" Images are important pieces of information and how they are shared on the web should vary across different devices. A large image may look great…<\/p>\n","protected":false},"author":37,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-255","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/posts\/255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=255"}],"version-history":[{"count":7,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/posts\/255\/revisions"}],"predecessor-version":[{"id":477,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/posts\/255\/revisions\/477"}],"wp:attachment":[{"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/i0.wp.com\/wowfall2020.londietmartin.com\/wp-content\/uploads\/2020\/10\/orientation-1.jpg?resize=774%2C676&ssl=1\")
<\/figure><\/li><\/ul><\/figure>\n\n\n\nNow let\u2019s get coding!<\/h2>\n\n\n\n
<img> and srcset To dictate what image the browser must use.<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/wowfall2020.londietmartin.com\/wp-content\/uploads\/2020\/10\/picture-element-1024x653.png?resize=774%2C494&ssl=1\")
<\/figure><\/li><\/ul><\/figure>\n\n\n\nWhat does this mean?<\/h2>\n\n\n\n
Responsive Images Using SRCSET<\/h2>\n\n\n\n
![\"\"](\"https:\/\/i1.wp.com\/wowfall2020.londietmartin.com\/wp-content\/uploads\/2020\/10\/guardian-desktop.png?ssl=1\")
<\/figure><\/div><\/div>![\"\"](\"https:\/\/i1.wp.com\/wowfall2020.londietmartin.com\/wp-content\/uploads\/2020\/10\/guardian-phone-1.png?ssl=1\")
<\/figure><\/div><\/div><\/div><\/div>\n\n\n\nNow let\u2019s get coding!<\/h2>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/wowfall2020.londietmartin.com\/wp-content\/uploads\/2020\/10\/srcset.png?resize=774%2C223&ssl=1\")
<\/figure><\/li><\/ul><\/figure>\n\n\n\nWhat does it mean?<\/h2>\n\n\n\n
Conclusion<\/h2>\n\n\n\n