--- title: Optimal Images in HTML | daily.dev description: Shopify Storefront Build is the most powerful no-code solution for Shopify merchants to drive growth Pricing Blog.io & Elastic Path on 12/13 Use Cases Landing... canonical: https://daily.dev/posts/optimal-images-in-html-jns-kqls twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Optimal Images in HTML | daily.dev og:description: Shopify Storefront Build is the most powerful no-code solution for Shopify merchants to drive growth Pricing Blog.io & Elastic Path on 12/13 Use Cases Landing... og:url: https://daily.dev/posts/optimal-images-in-html-jns-kqls og:image: https://api.daily.dev/og/posts/JNs_kQLs_.png og:image:alt: Optimal Images in HTML og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Optimal Images in HTML **[Community Picks](https://daily.dev/sources/community)** · 1 min read · 321 upvotes · 20 comments ## Summary Shopify Storefront Build is the most powerful no-code solution for Shopify merchants to drive growth Pricing Blog.io & Elastic Path on 12/13 Use Cases Landing Pages Customize and optimize high performing landing pages within your existing site or app Headless CMS. Visually create and seamlessly manage content on any tech stack. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@abbeydawn** · 7 upvotes > Very cool and well written! Image optimization has come a long way and it was nice have a refresher as well as be introduced to some new tricks. **@jberrios94** · 5 upvotes > I saw this on Twitter and was mind-blown, that I retweeted it to reference it in the very near future but I am glad its a community pick because I will be bookmarking it and it will be much easier to find than on Twitter lol **@ezerangel** · 3 upvotes > The blogpost is great but it seems the description here is for another post! **@donguillotine** · 2 upvotes > Thanks for the informative post! Normally I would use the Intersection Observer API for lazy loading the images as the page is scrolled, but this is really great. **@boxiboxi** · 1 upvotes > Using the "picture" element to provide different versions of an image for different screen sizes and resolutions. This is a simple solution ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html), [#browsers](https://daily.dev/tags/browsers), [#shopify](https://daily.dev/tags/shopify) [View this post on daily.dev](https://daily.dev/posts/optimal-images-in-html-jns-kqls) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Optimal Images in HTML","url":"https://daily.dev/posts/optimal-images-in-html-jns-kqls","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/optimal-images-in-html-jns-kqls"},"datePublished":"2023-01-27T06:55:42.325Z","dateModified":"2023-12-07T12:02:45.284Z","description":"Shopify Storefront Build is the most powerful no-code solution for Shopify merchants to drive growth Pricing Blog.io & Elastic Path on 12/13 Use Cases Landing...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a407463794dacd7aeb3c6bd154d0a05b","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a407463794dacd7aeb3c6bd154d0a05b","isAccessibleForFree":true,"articleSection":"Community Picks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Community Picks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1655817725/logos/community","url":"https://daily.dev/sources/community"},"commentCount":20,"discussionUrl":"https://daily.dev/posts/optimal-images-in-html-jns-kqls","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":321},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":20}],"keywords":"css,html,browsers,shopify","timeRequired":"PT1M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":3,"name":"Optimal Images in HTML"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/optimal-images-in-html-jns-kqls","comment":[{"@type":"Comment","text":"Very cool and well written! Image optimization has come a long way and it was nice have a refresher as well as be introduced to some new tricks.","datePublished":"2023-01-27T14:57:11.962Z","url":"https://daily.dev/posts/JNs_kQLs_#c-hSurFXN_t","author":{"@type":"Person","name":"Katelin Frederick","url":"https://daily.dev/abbeydawn","image":"https://avatars.githubusercontent.com/u/22903987?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":7}},{"@type":"Comment","text":"I saw this on Twitter and was mind-blown, that I retweeted it to reference it in the very near future but I am glad its a community pick because I will be bookmarking it and it will be much easier to find than on Twitter lol","datePublished":"2023-01-27T19:21:23.400Z","url":"https://daily.dev/posts/JNs_kQLs_#c-RKCIgCRpA","author":{"@type":"Person","name":"Joshua Berrios","url":"https://daily.dev/jberrios94","image":"https://avatars.githubusercontent.com/u/64435634?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"The blogpost is great but it seems the description here is for another post!","datePublished":"2023-01-27T16:45:32.026Z","url":"https://daily.dev/posts/JNs_kQLs_#c-fKk2lKeBw","author":{"@type":"Person","name":"Ezequiel Rangel","url":"https://daily.dev/ezerangel","image":"https://avatars.githubusercontent.com/u/1395261?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"Thanks for the informative post! Normally I would use the Intersection Observer API for lazy loading the images as the page is scrolled, but this is really great.","datePublished":"2023-01-29T17:56:16.282Z","url":"https://daily.dev/posts/JNs_kQLs_#c-_Mru_jXM5","author":{"@type":"Person","name":"Donald Nwokoro","url":"https://daily.dev/donguillotine","image":"https://media.daily.dev/image/upload/v1676926426/avatars/avatar_nqFB0lL74stL0Tn7Wm7rc.jpg"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Using the “picture” element to provide different versions of an image for different screen sizes and resolutions. This is a simple solution","datePublished":"2023-01-28T08:22:37.580Z","url":"https://daily.dev/posts/JNs_kQLs_#c-NeQXuBHKh","author":{"@type":"Person","name":"Boxi Cook","url":"https://daily.dev/boxiboxi","image":"https://media.daily.dev/image/upload/s--O0TOmw4y--/f_auto/v1715772965/public/noProfile"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```