{"id":1037,"date":"2019-12-18T23:04:06","date_gmt":"2019-12-18T16:04:06","guid":{"rendered":"https:\/\/lab.wptips.dev\/?p=1037"},"modified":"2020-06-21T09:47:58","modified_gmt":"2020-06-21T02:47:58","slug":"common-mistakes-responsive-image","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/common-mistakes-responsive-image\/","title":{"rendered":"3 Common Mistakes when Creating Responsive Images"},"content":{"rendered":"\n<p>I often see a site unknowingly load both desktop and mobile images. But that is understandable since the way image loading works is quite weird.<\/p>\n\n\n\n<p>In this article, we will take a look at common mistakes when hiding images for responsive purpose.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Using Multiple IMG elements<\/h2>\n\n\n\n<p>Any Image that has <code>src<\/code> attribute <strong>will always load<\/strong> even if you hide it.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre title=\"\" class=\"wp-block-code is-style-wrong\"><code lang=\"html\" class=\"language-html\">&lt;!-- All 3 images are loaded -->\n\n&lt;img src=\"mobile-logo.png\" class=\"show-on-mobile\">\n&lt;img src=\"tablet-logo.png\" class=\"show-on-tablet\">\n&lt;img src=\"logo.png\" class=\"show-on-desktop\"><\/code><\/pre>\n\n\n\n<p>To fix that, use <code>&lt;picture&gt;<\/code> element:<\/p>\n\n\n\n<pre title=\"\" class=\"wp-block-code is-style-correct\"><code lang=\"html\" class=\"language-html\">&lt;!-- Only 1 is loaded depending on screen size -->\n\n&lt;picture>\n  &lt;source srcset=\"mobile-logo.png\" media=\"(max-width: 480px)\">\n  &lt;source srcset=\"tablet-logo.png\" media=\"(max-width: 767px)\">\n  &lt;img src=\"logo.png\">\n&lt;\/picture><\/code><\/pre>\n\n\n\n<p><strong>My rule of thumb<\/strong>: put the largest image in <code>&lt;img&gt;<\/code> tag for IE compatibility. The source should be ordered ascendingly and uses <code>(max-width)<\/code> media query.<\/p>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-text-color has-black-color has-background has-yellow-background-color\" href=\"https:\/\/codepen.io\/hrsetyono\/pen\/vYEgWdv\" target=\"_blank\" rel=\"noreferrer noopener\">Check the demo in Codepen<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">2. Doesn&#8217;t Wrap All Background Image in Media Query<\/h2>\n\n\n\n<p>The background image that is not wrapped in media query <strong>will be loaded on all screen sizes<\/strong>.<\/p>\n\n\n\n<p>In the example below, both images will load on mobile screen:<\/p>\n\n\n\n<pre class=\"wp-block-code is-style-wrong\"><code lang=\"css\" class=\"language-css\">.hero {\n  background-image: url('desktop-banner.jpg');\n}\n\n@media (max-width:767px) {\n  .hero {\n    background-image: url('mobile-banner.jpg');\n  }\n}<\/code><\/pre>\n\n\n\n<p>To fix that, wrap both properties with media query:<\/p>\n\n\n\n<pre class=\"wp-block-code is-style-correct\"><code lang=\"css\" class=\"language-css\">@media (min-width:768px) {\n  .hero {\n    background-image: url('desktop-banner.jpg');\n  }\n}\n\n@media (max-width:767px) {\n  .hero {\n    background-image: url('mobile-banner.jpg');\n  }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">3. Hide the Wrong Element<\/h2>\n\n\n\n<p>Unlike <code>&lt;img&gt;<\/code>, you can stop a background image from loading <strong>by hiding its parent<\/strong>.<\/p>\n\n\n\n<p>But I often see people hid the background element itself, which doesn&#8217;t stop it from loading:<\/p>\n\n\n\n<pre class=\"wp-block-code is-style-wrong\"><code lang=\"html\" class=\"language-html\">&lt;!-- Both images still loads -->\n\n&lt;figure style=\"display: none;\" style=\"background-image:url('desktop-banner.jpg');\">\n  ...\n&lt;\/figure>\n\n&lt;figure style=\"background-image:url('mobile-banner.jpg');\">\n  ...\n&lt;\/figure><\/code><\/pre>\n\n\n\n<p>To fix that, add a wrapper and hide that instead:<\/p>\n\n\n\n<pre class=\"wp-block-code is-style-correct\"><code lang=\"html\" class=\"language-html\">&lt;!-- This will only load mobile banner -->\n\n&lt;div style=\"display: none;\">\n  &lt;figure style=\"background-image:url('desktop-banner.jpg');\">\n    ...\n  &lt;\/figure>\n&lt;\/div>\n\n&lt;div>\n  &lt;figure style=\"background-image:url('mobile-banner.jpg');\">\n    ...\n  &lt;\/figure>\n&lt;\/div><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Extra Tip<\/h3>\n\n\n\n<p>If you don&#8217;t want to add parent wrapper, you can set the background value to <code>none<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code is-style-default\"><code lang=\"html\" class=\"language-html\">&lt;figure class=\"desktop-bg\" style=\"background-image:url('desktop-banner.jpg');\">\n  ...\n&lt;\/figure>\n&lt;figure class=\"mobile-bg\" style=\"background-image:url('mobile-banner.jpg');\">\n  ...\n&lt;\/figure><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code is-style-default\"><code lang=\"css\" class=\"language-css\">@media (min-width:768px) {\n  .mobile-bg {\n    display: none;\n    background-image: none !important;\n  }\n}\n\n@media (max-width:767px) {\n  .desktop-bg {\n    display: none;\n    background-image: none !important;\n  }\n}<\/code><\/pre>\n\n\n\n<p>We add <code>!important<\/code> because we want to override the inline style. You don&#8217;t have to add that if the background is not inline.<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>It&#8217;s a big performance loss if your site loads both desktop and mobile images.<\/p>\n\n\n\n<p>After following these tips, use the Network tab in DevTool to check whether they are loaded properly.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Leave a comment below if you have further question about responsive images \ud83d\ude42<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>I often see a site unknowingly load both desktop and mobile images. But that is understandable since the way image loading works is quite weird.<\/p>\n","protected":false},"author":1,"featured_media":1140,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[21,40],"class_list":["post-1037","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-css","tag-html"],"blocksy_meta":{"page_structure_type":"default","page_enable_vertical_spacing":"yes","has_hero_section":"default","hero_section":"type-1","hero_alignment1":"left","hero_alignment2":"center","hero_height":"230px","page_title_bg_type":"color","7dc2573d4bf9fa1735dad62edb0e816d":"","custom_hero_background":{"attachment_id":null},"parallax":{"desktop":false,"tablet":false,"mobile":false},"25cb90fae37cc00bc026a14e842f5602":"","single_meta_elements":{"author":true,"date":true,"categories":true,"comments":true,"updated":false,"tags":false},"has_meta_label":"yes","date_format_source":"custom","single_meta_date_format":"M j, Y","6ed7ba5bcb274b0b8fdec72b67f9fe0b":"","page_excerpt_visibility":{"desktop":true,"tablet":true,"mobile":false},"pageTitleFont":{"family":"Default","variation":"Default","size":{"desktop":"32px","tablet":"30px","mobile":"25px"},"line-height":"1.3","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageTitleFontColor":{"default":{"color":"var(--paletteColor4)"}},"pageMetaFont":{"family":"Default","variation":"n6","size":{"desktop":"12px","tablet":"12px","mobile":"12px"},"line-height":"1.3","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"uppercase","text-decoration":"CT_CSS_SKIP_RULE"},"pageMetaFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageExcerptFont":{"family":"Default","variation":"n5","size":"CT_CSS_SKIP_RULE","line-height":"CT_CSS_SKIP_RULE.65","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageExcerptColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageTitleOverlay":{"default":{"color":"rgba(41, 51, 60, 0.2)"}},"pageTitleBackground":{"default":{"color":"#EDEFF2"}},"d88bd0f841a26e4500b20893c550199d":"","4a38817726da8471f2218e38a0ed964e":"","d3f8cff80d7a3f396261a5ae47c2a8d3":"","7ff9c7b8a8b9a8381564fe7f5e410258":"","dff0d14f9052c61389ff35dc11e0012c":"","7263c6fd03d3ceeef129f4581a1a9c52":"","fa13ee03afff052250eb803a9972d71a":"","5c3e862052f032a84873dba98e7d8133":"","6122005eb53c08927d56bb7e9cd2d7f3":"","c320b88ff45222d587228c4d42a43621":"","46f372f2838a2b1515b8450915d17420":"","afbd7ab5c7dbf7bf724c6b4b6661396c":"","3c854a64776d65af329bc8fa3dbda4b3":"","795763fca51581a9c2cfd5a04defbc78":"","e06350e8ed1060c3b83fd98940bd6d1f":"","eb07fd4ee3b9e9ca66f69d61e74cc90f":"","361b0a39575e8cdd08ee710a082757db":"","d978369a1fcfeab30c0a0fdaf02f5891":""},"_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=1037"}],"version-history":[{"count":9,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1037\/revisions"}],"predecessor-version":[{"id":1582,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1037\/revisions\/1582"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/1140"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=1037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=1037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=1037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}