\nThe basics are fairly simple to learn, but once you\u2019ve mastered them, you\u2019ll find that scaling images is only the beginning \u2014 you might also have performance and art direction conundrums to solve. You\u2019ll be faced with a wide field of responsive image solutions<\/span> to choose from, each with its own strengths and weaknesses \u2014 and none of them is perfect! This article leads you through the basics, and then arms you with the information you\u2019ll need to pick the best responsive image solution for your situation.<\/p>\n
<\/p>\n
The above Fig Says,<\/p>\n Let\u2019s say you\u2019ve got a beautiful wide image on your home page. It shows a wide bucolic expanse of fields and forest, blue sky and fluffy clouds above, and a happy family having a picnic on the grass.<\/p>\n Now scale it down to 300 pixels wide, mobile-style. At this scale, our vacationing family looks more like the ants at the picnic!<\/p>\n <\/p>\n The above Fig Says,<\/p>\n Herein lies what we call the \u201cart direction\u201d problem. Some images just don\u2019t scale well; fine detail is lost, and dramatic impact is reduced. In the case of our hero image, it would be much nicer visually if the mobile version of the photo was zoomed in, cropped and focused on our happy family. To solve this problem, we need a responsive image solution that enables you either to specify different versions of the image for different situations or to adjust the image on the fly.<\/p>\n <\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" If you code websites, it\u2019s a good bet that at least one of your clients has asked about or requested a mobile-friendly website. If you go the responsive design route (whereby your website is flexible enough to adjust visually from mobile to desktop widths), then you\u2019ll need a strategy to make images flexible, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2566","post","type-post","status-publish","format-standard","hentry","category-whats-trending-web-design"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=2566"}],"version-history":[{"count":2,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2566\/revisions"}],"predecessor-version":[{"id":2630,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2566\/revisions\/2630"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=2566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=2566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=2566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"1\"](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2014\/02\/1-276x300.png\")
<\/span><\/a><\/div> \r\n\r\n\t\t\t\t ![\"image-2567\"](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2014\/02\/1.png\")
\r\n <\/div><\/a><\/p>\n<\/span><\/a><\/div> \r\n\r\n\t\t\t\t \r\n <\/div><\/a><\/p>\n