{"id":4061,"date":"2021-06-18T08:46:33","date_gmt":"2021-06-18T08:46:33","guid":{"rendered":"https:\/\/infyblog.zluck.in\/?p=4061"},"modified":"2025-07-17T06:29:31","modified_gmt":"2025-07-17T06:29:31","slug":"how-to-display-responsive-image-in-device","status":"publish","type":"post","link":"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/","title":{"rendered":"How to display responsive image in different devices"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4061\" class=\"elementor elementor-4061\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6201b0b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6201b0b\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c6e72f3\" data-id=\"c6e72f3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\n\t\t<div class=\"elementor-element elementor-element-9d581dc elementor-widget elementor-widget-text-editor\" data-id=\"9d581dc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Today we are going to see how we can image based on resolution. We have the most common issue of loading big images in small devices take time. So, the basic solution is to use the picture element to load a different image in different devices and resolutions.<\/p><p>The <span style=\"color: #e83e8c;\">&lt;picture&gt;<\/span> element will be for the art direction of responsive design.<\/p><p>The element contains two tags.<\/p><ul><li><span style=\"color: #e83e8c;\">&lt;source&gt;<\/span><\/li><li><span style=\"color: #e83e8c;\">&lt;img&gt;<\/span><\/li><\/ul><p>So, the browser will look for the first<span style=\"color: #e83e8c;\"> &lt;source&gt;<\/span> element where the media query matches the current width, and then it will display the image. The <span style=\"color: #e83e8c;\">&lt;picture&gt;<\/span> element is required as the last child of the <span style=\"color: #e83e8c;\">&lt;picture&gt;<\/span> element.<\/p><p>Let me show you an example of how to display a different image in different widths.<\/p><p>Here is a Code example,<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14e10a7 elementor-widget elementor-widget-code-highlight\" data-id=\"14e10a7\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><picture>\r\n    <source media=\"(min-width:900px)\" srcset=\"infyom_logo_lg.jpg\">\r\n    <source media=\"(min-width:700px)\" srcset=\"infyom_logo_md.jpg\">\r\n    <source media=\"(min-width:500px)\" srcset=\"infyom_logo_sm.jpg\">\r\n    <img decoding=\"async\" src=\"infyom_logo_xl.jpg\" alt=\"Flowers\" style=\"width:auto;\">\r\n<\/picture><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\n    <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content  wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"<p>Today we are going to see how we can image based on resolution. We have the most common issue of loading big images in&#8230;<\/p>\n","protected":false},"author":2,"featured_media":4063,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"two_page_speed":[],"footnotes":""},"categories":[9],"tags":[19,14],"class_list":["post-4061","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","tag-learning","tag-tips"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to display responsive image in different devices<\/title>\n<meta name=\"description\" content=\"Techniques to display responsive images on various devices, optimize with srcset, sizes, image formats, and smart loading strategies.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to display responsive image in different devices\" \/>\n<meta property=\"og:description\" content=\"Techniques to display responsive images on various devices, optimize with srcset, sizes, image formats, and smart loading strategies.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog | InfyOm Technologies\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/infyom\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-18T08:46:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-17T06:29:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-display-responsive-image-in-device-1-1-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"772\" \/>\n\t<meta property=\"og:image:height\" content=\"484\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InfyOm\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InfyOm\" \/>\n<meta name=\"twitter:site\" content=\"@InfyOm\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InfyOm\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/\"},\"author\":{\"name\":\"InfyOm\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754\"},\"headline\":\"How to display responsive image in different devices\",\"datePublished\":\"2021-06-18T08:46:33+00:00\",\"dateModified\":\"2025-07-17T06:29:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/\"},\"wordCount\":146,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/infyom.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-display-responsive-image-in-device-1-1-1.png\",\"keywords\":[\"Learning\",\"Tips\"],\"articleSection\":[\"Laravel\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/\",\"url\":\"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/\",\"name\":\"How to display responsive image in different devices\",\"isPartOf\":{\"@id\":\"https:\/\/infyom.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-display-responsive-image-in-device-1-1-1.png\",\"datePublished\":\"2021-06-18T08:46:33+00:00\",\"dateModified\":\"2025-07-17T06:29:31+00:00\",\"description\":\"Techniques to display responsive images on various devices, optimize with srcset, sizes, image formats, and smart loading strategies.\",\"breadcrumb\":{\"@id\":\"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/#primaryimage\",\"url\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-display-responsive-image-in-device-1-1-1.png\",\"contentUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-display-responsive-image-in-device-1-1-1.png\",\"width\":772,\"height\":484,\"caption\":\"How to display responsive image in different devices\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/infyom.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to display responsive image in different devices\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/infyom.com\/blog\/#website\",\"url\":\"https:\/\/infyom.com\/blog\/\",\"name\":\"Blog | InfyOm Technologies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/infyom.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/infyom.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/infyom.com\/blog\/#organization\",\"name\":\"InfyOm Technologies\",\"url\":\"https:\/\/infyom.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png\",\"contentUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png\",\"width\":88,\"height\":41,\"caption\":\"InfyOm Technologies\"},\"image\":{\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/infyom\",\"https:\/\/x.com\/InfyOm\",\"https:\/\/www.instagram.com\/infyomtechnologies\/\",\"https:\/\/in.linkedin.com\/company\/infyom-technologies\",\"https:\/\/github.com\/infyomlabs\",\"https:\/\/x.com\/infyom\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754\",\"name\":\"InfyOm\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g\",\"caption\":\"InfyOm\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to display responsive image in different devices","description":"Techniques to display responsive images on various devices, optimize with srcset, sizes, image formats, and smart loading strategies.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/","og_locale":"en_US","og_type":"article","og_title":"How to display responsive image in different devices","og_description":"Techniques to display responsive images on various devices, optimize with srcset, sizes, image formats, and smart loading strategies.","og_url":"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/","og_site_name":"Blog | InfyOm Technologies","article_publisher":"https:\/\/www.facebook.com\/infyom","article_published_time":"2021-06-18T08:46:33+00:00","article_modified_time":"2025-07-17T06:29:31+00:00","og_image":[{"width":772,"height":484,"url":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-display-responsive-image-in-device-1-1-1.png","type":"image\/png"}],"author":"InfyOm","twitter_card":"summary_large_image","twitter_creator":"@InfyOm","twitter_site":"@InfyOm","twitter_misc":{"Written by":"InfyOm","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/#article","isPartOf":{"@id":"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/"},"author":{"name":"InfyOm","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754"},"headline":"How to display responsive image in different devices","datePublished":"2021-06-18T08:46:33+00:00","dateModified":"2025-07-17T06:29:31+00:00","mainEntityOfPage":{"@id":"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/"},"wordCount":146,"commentCount":0,"publisher":{"@id":"https:\/\/infyom.com\/blog\/#organization"},"image":{"@id":"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/#primaryimage"},"thumbnailUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-display-responsive-image-in-device-1-1-1.png","keywords":["Learning","Tips"],"articleSection":["Laravel"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/","url":"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/","name":"How to display responsive image in different devices","isPartOf":{"@id":"https:\/\/infyom.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/#primaryimage"},"image":{"@id":"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/#primaryimage"},"thumbnailUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-display-responsive-image-in-device-1-1-1.png","datePublished":"2021-06-18T08:46:33+00:00","dateModified":"2025-07-17T06:29:31+00:00","description":"Techniques to display responsive images on various devices, optimize with srcset, sizes, image formats, and smart loading strategies.","breadcrumb":{"@id":"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/#primaryimage","url":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-display-responsive-image-in-device-1-1-1.png","contentUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-display-responsive-image-in-device-1-1-1.png","width":772,"height":484,"caption":"How to display responsive image in different devices"},{"@type":"BreadcrumbList","@id":"https:\/\/infyom.com\/blog\/how-to-display-responsive-image-in-device\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/infyom.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to display responsive image in different devices"}]},{"@type":"WebSite","@id":"https:\/\/infyom.com\/blog\/#website","url":"https:\/\/infyom.com\/blog\/","name":"Blog | InfyOm Technologies","description":"","publisher":{"@id":"https:\/\/infyom.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/infyom.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/infyom.com\/blog\/#organization","name":"InfyOm Technologies","url":"https:\/\/infyom.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png","contentUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png","width":88,"height":41,"caption":"InfyOm Technologies"},"image":{"@id":"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/infyom","https:\/\/x.com\/InfyOm","https:\/\/www.instagram.com\/infyomtechnologies\/","https:\/\/in.linkedin.com\/company\/infyom-technologies","https:\/\/github.com\/infyomlabs","https:\/\/x.com\/infyom"]},{"@type":"Person","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754","name":"InfyOm","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g","caption":"InfyOm"}}]}},"_links":{"self":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/4061","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/comments?post=4061"}],"version-history":[{"count":18,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/4061\/revisions"}],"predecessor-version":[{"id":8121,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/4061\/revisions\/8121"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/media\/4063"}],"wp:attachment":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/media?parent=4061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/categories?post=4061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/tags?post=4061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}