{"id":341020,"date":"2021-05-27T07:25:29","date_gmt":"2021-05-27T14:25:29","guid":{"rendered":"https:\/\/css-tricks.com\/?p=341020"},"modified":"2021-05-27T13:30:48","modified_gmt":"2021-05-27T20:30:48","slug":"how-to-show-images-on-click","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-show-images-on-click\/","title":{"rendered":"How to Show Images on Click"},"content":{"rendered":"\n<p>Most images on the web are superfluous. If I might be a jerk for a bit, 99% of them aren\u2019t even that helpful at all <a href=\"https:\/\/www.cjr.org\/innovations\/you-may-hate-metrics-guardian-audience-twitter-images.php\" rel=\"noopener\">(although there are rare exceptions<\/a>). That&#8217;s because images don\u2019t often complement the text they&#8217;re supposed to support and instead <em>hurt<\/em> users, taking forever to load and blowing up data caps like some sort of performance tax.<\/p>\n\n\n\n<p>Thankfully, this is mostly a design problem today because making images performant and more user-friendly is so much easier than it once was. We have better image formats like&nbsp;<a href=\"https:\/\/developers.google.com\/speed\/webp\" rel=\"noopener\">WebP<\/a>&nbsp;(and soon, perhaps,&nbsp;<a href=\"https:\/\/twitter.com\/addyosmani\/status\/1379841205098311681?lang=en\" rel=\"noopener\">JPEG XL<\/a>). We have the magic of&nbsp;<a href=\"https:\/\/css-tricks.com\/a-guide-to-the-responsive-images-syntax-in-html\/\">responsive images<\/a>&nbsp;of course. And there are tons of great tools out there, like <a href=\"https:\/\/imageoptim.com\/mac\" rel=\"noopener\">ImageOptim<\/a>, as well as resources such as <a href=\"https:\/\/shop.smashingmagazine.com\/products\/image-optimization\" rel=\"noopener\">Addy Osmani\u2019s new book<\/a>. <\/p>\n\n\n\n<p>Although perhaps my favorite way to improve image performance is with&nbsp;<a href=\"https:\/\/web.dev\/browser-level-image-lazy-loading\/\" rel=\"noopener\">lazy loading<\/a>: <\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;img href=\"image.webp\" alt=\"Image description\" loading=\"lazy\"><\/code><\/pre>\n\n\n\n<p>This image will only load when a user scrolls down the page so it&#8217;s visible to the user\u2009\u2014\u2009which removes it from the initial page load and that&#8217;s just great! Making that initial load of a webpage lightning&nbsp;fast is a big deal.<\/p>\n\n\n\n<p>But maybe there are images that should <em>never<\/em> load at all. Perhaps there are situations where it&#8217;d be better if a person could opt-into seeing it. Here\u2019s one example: take the text-only version of&nbsp;<a href=\"https:\/\/text.npr.org\/\" rel=\"noopener\">NPR<\/a>&nbsp;and click around for a bit. Isn\u2019t it&#8230; just so great?! It\u2019s readable! There\u2019s no junk all over the place, it respects me as a user and\u2009\u2014\u2009sweet heavens\u2009\u2014\u2009is it&nbsp;<em>fast<\/em>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2080\" height=\"1236\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-19-at-18.20.41@2x.png?resize=2080%2C1236&#038;ssl=1\" alt=\"\" class=\"wp-image-341022\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-19-at-18.20.41@2x.png?w=2080&amp;ssl=1 2080w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-19-at-18.20.41@2x.png?resize=300%2C178&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-19-at-18.20.41@2x.png?resize=1024%2C608&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-19-at-18.20.41@2x.png?resize=768%2C456&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-19-at-18.20.41@2x.png?resize=1536%2C913&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-19-at-18.20.41@2x.png?resize=2048%2C1217&amp;ssl=1 2048w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/CleanShot-2021-05-19-at-18.20.41@2x.png?resize=1000%2C594&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Did I just show you an image in a blog post that insults the very concept of images? Yep! Sue me.<\/figcaption><\/figure>\n\n\n\n<p>So! What if we could show images on a website but only once they are clicked or tapped? Wouldn\u2019t it be neat if we could show a placeholder and swap it out for the real image on click? Something like this:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls muted src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2021\/05\/2021-05-19-19.47.26.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>Well, I had two thoughts here as to how to build this chap (the golden rule is that there\u2019s never one way to build anything on the web).<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-method-1-using-img-without-a-src-attribute\">Method #1: Using <code>&lt;img&gt;<\/code> without a <code>src<\/code> attribute<\/h3>\n\n\n<p>We can remove the <code>src<\/code> attribute of an <code>&lt;img&gt;<\/code> tag to hide an image. We could then put the image file in an attribute, like <code>data-src<\/code> or something, just like this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;img data-src=\"image.jpg\" src=\"\" alt=\"Photograph of hot air balloons by Musab Al Rawahi. 144kb\"><\/code><\/pre>\n\n\n\n<p>By default, most browsers will show a broken image icon that you\u2019re probably familiar with:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_poeNmNb\" src=\"\/\/codepen.io\/anon\/embed\/poeNmNb?height=250&amp;theme-id=1&amp;slug-hash=poeNmNb&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed poeNmNb\" title=\"CodePen Embed poeNmNb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Okay, so it&#8217;s sort of accessible. I guess? You can see the <code>alt<\/code> tag rendered on screen automatically, but with a light dash of JavaScript, we can then swap out the <code>src<\/code> with that attribute:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">document.querySelectorAll(\"img\").forEach((item) => {\n  item.addEventListener(\"click\", (event) => {\n    const image = event.target.getAttribute(\"data-src\");\n    event.target.setAttribute(\"src\", image);\n  });\n});<\/code><\/pre>\n\n\n\n<p>Now we can add some styles and ugh, oh no:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bGqBJGM\" src=\"\/\/codepen.io\/anon\/embed\/bGqBJGM?height=700&amp;theme-id=1&amp;slug-hash=bGqBJGM&amp;default-tab=result\" height=\"700\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGqBJGM\" title=\"CodePen Embed bGqBJGM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><em>Ugh<\/em>. In some browsers there\u2019ll be a tiny broken image icon in the bottom when the image hasn\u2019t loaded. The problem here is that browsers don\u2019t give you a way to remove the broken image icon with CSS (and we probably shouldn\u2019t be allowed to anyway). It&#8217;s a bit annoying to style the <code>alt<\/code> text, too. But if we remove the <code>alt<\/code> attribute altogether, then the broken image icon is gone, although this makes the <code>&lt;img&gt;<\/code> unusable without JavaScript. So removing that <code>alt<\/code> text is a no-go.<\/p>\n\n\n\n<p>As I said: <em>Ugh<\/em>. I don&#8217;t think there&#8217;s a way to make this method work (although please prove me wrong!).<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"method-2-using-links-to-create-an-image\">Method #2: Using links to create an image<\/h3>\n\n\n<p>The other option we have is to start with the humble hyperlink, like this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"image.jpg\">Photograph of hot air balloons by Musab Al Rawahi. 144kb&lt;a><\/code><\/pre>\n\n\n\n<p>Which, yep, nothing smart happening yet\u2009\u2014\u2009this will just render a link to an image:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNpoWbg\" src=\"\/\/codepen.io\/anon\/embed\/WNpoWbg?height=250&amp;theme-id=1&amp;slug-hash=WNpoWbg&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNpoWbg\" title=\"CodePen Embed WNpoWbg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>That works accessibility-wise, right? If we don&#8217;t have any JavaScript, then all we have is just a link that folks can optionally click. Performance-wise, it can\u2019t get much faster than plain text!<\/p>\n\n\n\n<p>But from here, we can reach for JavaScript to stop the link from loading on click, grab the <code>href<\/code> attribute within that link, create an image element and, finally, throw that image on the page and remove the old link once we&#8217;re done:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">document.querySelectorAll(\".load-image\").forEach((item) => {\n  item.addEventListener(\"click\", (event) => {\n    const href = event.target.getAttribute(\"href\");\n    const newImage = document.createElement(\"img\");\n    event.preventDefault();\n    newImage.setAttribute(\"src\", href);\n    document.body.insertBefore(newImage, event.target);\n    event.target.remove();\n  });\n});<\/code><\/pre>\n\n\n\n<p>We could probably style this placeholder link to make it look a bit nicer than what I have below. But this is just an example. Go ahead and click the link to load the image again:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzZpMXZ\" src=\"\/\/codepen.io\/anon\/embed\/YzZpMXZ?height=675&amp;theme-id=1&amp;slug-hash=YzZpMXZ&amp;default-tab=result\" height=\"675\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzZpMXZ\" title=\"CodePen Embed YzZpMXZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>And there you have it! It isn\u2019t groundbreaking or anything, and I\u2019m sure someone\u2019s done this before at some point or another. But if we wanted to be extremely radical about performance beyond the first paint and initial load, then I think this is an okay-ish solution. If we&#8217;re making a text-only website then I think this is definitely the way to go.<\/p>\n\n\n\n<p>Perhaps we could also make a web component out of this, or even detect if someone has&nbsp;<a href=\"https:\/\/css-tricks.com\/creating-websites-with-prefers-reduced-data\/\"><code>prefers-reduced-data<\/code><\/a>&nbsp;and then only load images if someone has enough data or something. What do you think?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most images on the web are superfluous. If I might be a jerk for a bit, 99% of them aren\u2019t even that helpful at all (although there are rare exceptions). That&#8217;s because images don\u2019t often complement the text they&#8217;re supposed to support and instead hurt users, taking forever to load and blowing up data caps [&hellip;]<\/p>\n","protected":false},"author":223806,"featured_media":341099,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"How to Show Images on Click by @robinrendle","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1006,908,947,592],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/musab-al-rawahi-KsfH7IYFn98-unsplash.jpg?fit=2400%2C1600&ssl=1","jetpack-related-posts":[{"id":304054,"url":"https:\/\/css-tricks.com\/in-browser-performance-linting-with-feature-policies\/","url_meta":{"origin":341020,"position":0},"title":"In-Browser Performance Linting With Feature Policies","date":"February 26, 2020","format":false,"excerpt":"Here\u2019s a neat idea from Tim Kadlec. He uses the Modheader extension to toggle custom headers in his browser. It also lets him see when images are too big and need to be optimized in some way. This is a great way to catch issues like this in a local\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/kadlec-fp-linting-modheader.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305212,"url":"https:\/\/css-tricks.com\/the-low-hanging-fruit-of-web-performance\/","url_meta":{"origin":341020,"position":1},"title":"The Low Hanging Fruit of Web Performance","date":"September 12, 2018","format":false,"excerpt":"There is so much to know about making websites fast. It\u2019s rather incredible. Things like understanding servers and networks, how browsers parse things and make decisions, efficient coding choices, and file format nuances make being a performance expert a full-time career in itself. But you don\u2019t have to be an\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/ImageOptim-app@2x.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":340716,"url":"https:\/\/css-tricks.com\/the-humble-img-element-and-core-web-vitals\/","url_meta":{"origin":341020,"position":2},"title":"The Humble `img` Element And Core Web Vitals","date":"May 17, 2021","format":false,"excerpt":"Addy Osmani on images in HTML: The humble\u00a0<img>\u00a0element has gained some superpowers over the years. Given how central it is to image optimization on the web, let\u2019s catch up on what it can do and how it can help improve user experience and the\u00a0Core Web Vitals. Addy does a good\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/11-humble-img-element-and-core-web-vitals.png?fit=1200%2C736&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":342257,"url":"https:\/\/css-tricks.com\/start-serving-optimized-images-in-vue\/","url_meta":{"origin":341020,"position":3},"title":"Start Serving Optimized Images in Vue","date":"June 17, 2021","format":false,"excerpt":"Images have become extremely important to the effectiveness of websites. They speak a 1000 words, attract attention, and stimulate emotions. However, web performance is also a growing problem for most websites. And images are at the heart of many web performance issues. According to HTTP Archive, images are at least\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/imageengine_host.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":350644,"url":"https:\/\/css-tricks.com\/frameworks-helping-image-usage\/","url_meta":{"origin":341020,"position":4},"title":"Frameworks Helping Image Usage","date":"September 9, 2021","format":false,"excerpt":"I recently blogged about how images are hard and it ended up being a big ol' checklist of things that you could\/should think about and implement when placing images on websites. I think it's encouraging to see frameworks\u2009\u2014\u2009these beloved tools that we leverage to help us build websites\u2009\u2014\u2009offering additional tools\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/09\/flexible-images.jpg?fit=800%2C566&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":334315,"url":"https:\/\/css-tricks.com\/maximally-optimizing-image-loading-for-the-web-in-2021\/","url_meta":{"origin":341020,"position":5},"title":"Maximally optimizing image loading for the web in 2021","date":"February 16, 2021","format":false,"excerpt":"Malte Ubl's list for: 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. Fluid width images in CSS, not forgetting the height and width attributes in HTML so you get proper aspect-ratio on first render.Use\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/resp-images-thumb.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/341020"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=341020"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/341020\/revisions"}],"predecessor-version":[{"id":341534,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/341020\/revisions\/341534"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/341099"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=341020"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=341020"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=341020"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}