{"id":715,"date":"2019-06-19T18:12:43","date_gmt":"2019-06-19T23:12:43","guid":{"rendered":"https:\/\/bostonianadam.com\/?p=715"},"modified":"2022-07-07T17:01:32","modified_gmt":"2022-07-07T22:01:32","slug":"using-srcset-your-images-more-image-delivery-techniques","status":"publish","type":"post","link":"https:\/\/bostonianadam.com\/2019\/06\/using-srcset-your-images-more-image-delivery-techniques\/","title":{"rendered":"Using &#8220;srcset&#8221; for your images and more image delivery techniques"},"content":{"rendered":"\n<p>After watching a recent video posted by <em>Google Chrome Developers<\/em> on YouTube, I wanted to blog about using the &#8220;srcset&#8221; attribute in the &#8220;img&#8221; tag in your HTML code to make more web developers aware of this easy-to-use\/add code that will help your website. Definitely make sure to watch the video and check out the example HTML code using &#8220;srcset&#8221; in an &#8220;img&#8221; tag all down below.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Reduce image size: use srcset to automatically choose the right image (from Google Chrome Developers YouTube channel)<\/h4>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Reduce image size: use srcset to automatically choose the right image\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/SyVKRnusyqM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>So to implement the &#8220;srcset&#8221; attribute into your &#8220;img&#8221; tag all you need to do is use the HTML as in the below example.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"images\/default.jpg\" srcset=\"images\/default-200.jpg 200w, images\/default-400.jpg 400w, images\/default-600.jpg 600w\"&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>As stated in the above video, the web browser will do all of the hard work as it will decide what image best fits on the website and if the web browser doesn&#8217;t support &#8220;srcset&#8221; then it will default to the image in the &#8220;src&#8221; attribute. Need more information about &#8220;srcset&#8221;? Then check out <a rel=\"noreferrer noopener\" aria-label=\"MDN's documentation on responsive images (opens in a new tab)\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images\" target=\"_blank\">MDN&#8217;s documentation on responsive images<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">July 2022 update<\/h4>\n\n\n\n<p>Jashele, of devjashele.tech, a developer I follow on LinkedIn and Twitter, wrote an article, <a href=\"https:\/\/devjashele.tech\/2022\/07\/06\/simple-ways-to-improve-website-image-performance\/\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"Simple Ways to Improve Website Image Performance\">Simple Ways to Improve Website Image Performance<\/a>, and also posted a YouTube video (see below) talking about responsive images using &#8220;srcset&#8221; step-by-step. Make sure to check out Jashele&#8217;s article and video, and give her a follow.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Responsive Images with HTML to Improve Site Performance<\/h4>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"\ud83c\udfde Responsive Images with HTML to Improve Site Performance\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/06qE0RwUvHU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>After watching a recent video posted by Google Chrome Developers on YouTube, I wanted to blog about using the &#8220;srcset&#8221; attribute in the &#8220;img&#8221; tag in your HTML code to make more web developers aware of this easy-to-use\/add code that will help your website. Definitely make sure to watch the video and check out the [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[64],"tags":[66,13,25,30],"aioseo_notices":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/posts\/715"}],"collection":[{"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/comments?post=715"}],"version-history":[{"count":1,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/posts\/715\/revisions"}],"predecessor-version":[{"id":2590,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/posts\/715\/revisions\/2590"}],"wp:attachment":[{"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/media?parent=715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/categories?post=715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/tags?post=715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}