<h1>img sizes='auto' for native lazy loading</h1>
<p>The image further down this page</p>
<ul>
<li>Lazy loads - Only loads as it scrolls into view</li>
<li>Will automatically select the correct size of image from the srcset attribute, for the specific use of the image on the page (taking into account image width on page, screen pixel density, etc.)</li>
<li>Without needing to write <a href="https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/#aa-creating-accurate-sizes">a detailed 'sizes' attribute</a></li>
<li>Without needing any JS</li>
<li>sizes='auto' has been "in the wild" in browsers since June, and <a href="https://caniuse.com/mdn-html_elements_img_sizes_auto">already works in 50%+ of browsers as of Sept. 2024.</a></li>
</ul>
<p>Resize the screen width and check the dev console Network tab to see what's loading.</p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam eaque mollitia quod, amet ullam accusantium? Placeat, esse fugiat corporis, ad quam eaque laborum modi quasi autem officia fugit! Eveniet libero assumenda odit, nulla vel repellat cupiditate, quod consequuntur optio esse dolor ipsa at quas commodi! Cum sint mollitia aliquid laborum. Doloribus perferendis amet iure ratione eum, blanditiis, in, reiciendis id quis fugiat veniam minus. Sed minima perferendis similique. Quis, voluptate. Iure perferendis incidunt aliquam, excepturi dolores quis nihil, placeat adipisci porro quas natus pariatur voluptate, similique ut veniam quae voluptatibus itaque. Modi corporis dicta fugit est maiores enim qui maxime nemo, incidunt blanditiis eos saepe labore ducimus doloribus quaerat. Quo minima recusandae architecto cum debitis, in tenetur voluptates reprehenderit. Dolores enim vitae aspernatur sunt quasi quae vero a aliquam ullam. Exercitationem corrupti architecto veritatis, quis laboriosam, maiores labore sequi esse corporis voluptatem odio est incidunt cumque ex, inventore in cum doloremque velit. Laudantium, quidem? Error cum vitae, voluptate dicta laborum quisquam nemo eveniet, ipsam libero dignissimos repellat voluptatum ab at et mollitia tempora minima asperiores doloribus aliquid quae! Earum, laboriosam accusantium. Magnam tempora explicabo consectetur facere modi natus et nam doloremque nulla, facilis omnis cum quis, a deserunt aliquid officiis.</p>
<p>Sit, fugiat delectus harum porro reiciendis deleniti voluptate eos pariatur, ipsa accusantium ipsam ut, dolorum perspiciatis a tempora distinctio officia. Mollitia dolores, magnam aliquid magni fugit eveniet! Eaque repellendus velit nam tempore saepe? Ea sit iure molestias, officia sequi consequuntur? Dignissimos quas, eligendi, delectus omnis doloremque possimus quibusdam animi corporis assumenda unde a rerum quae saepe? Laudantium ex, voluptatibus inventore, molestias iure architecto hic aliquid placeat iste velit quaerat quos esse? Aspernatur magni exercitationem ab cupiditate laudantium, placeat eum neque fugiat reiciendis adipisci veritatis numquam optio, animi quos rerum voluptatum soluta recusandae odit nemo. Asperiores doloremque non consectetur. Qui consequuntur perspiciatis non aliquid placeat aut odio. Quibusdam nostrum ratione culpa placeat odio sed reiciendis dicta, voluptatum laudantium beatae. Itaque labore officiis voluptatibus veniam deserunt qui doloremque illum maxime excepturi dolores, quam minima quisquam sed assumenda tempore culpa ab. Quaerat, magnam, tempore odit recusandae delectus numquam libero consequuntur doloribus, facilis quo nesciunt autem suscipit quidem quae? Nihil cum laudantium sunt fugiat eius, asperiores laboriosam velit assumenda quisquam, accusamus sit perspiciatis modi atque iusto exercitationem optio, eveniet omnis voluptatum temporibus consectetur fuga eaque voluptatibus eos! Exercitationem ipsa laudantium ullam voluptate amet! Perspiciatis, consectetur fuga. Tempora voluptatem sequi voluptatum harum neque, magnam ipsam!</p>
<p>Odio ut repellendus sapiente praesentium cumque, velit fuga reiciendis recusandae, deleniti fugiat omnis amet maiores, aperiam nostrum quis repudiandae corrupti autem distinctio nemo atque! Sunt, odit dolor in animi fuga alias necessitatibus temporibus quam voluptatum assumenda tempore, corrupti id ullam voluptas culpa delectus perferendis vero debitis molestias facere sapiente aliquid ipsa fugiat voluptatibus. Sequi repellendus minus vitae eum. Adipisci beatae fugiat, quis placeat natus voluptas praesentium commodi totam nulla fugit quaerat animi? Quisquam iure perferendis consequatur mollitia impedit cupiditate ipsa sapiente nulla tenetur eligendi nam, nesciunt earum at ad, ex enim cumque, incidunt et deserunt vitae placeat sequi. Error autem fugiat culpa tempora? Vel obcaecati voluptate suscipit facilis eum quo quaerat blanditiis exercitationem et sed labore cum accusamus ex voluptas molestiae, quam magni, possimus laboriosam ratione. Placeat provident cupiditate veritatis est minima blanditiis saepe temporibus quidem quas voluptas sit eligendi, at minus fugit corporis quo. Tempore excepturi enim pariatur quasi consequatur ea ex atque, perferendis, quos minima dolores beatae debitis placeat consequuntur quis maxime numquam sint deleniti quod est. Expedita nulla quasi, numquam, id aliquam necessitatibus sint debitis similique ut, nostrum eius sed ad? Dolor eos officiis ut, quas voluptates hic quaerat molestiae amet? Iure aliquam aperiam possimus illum rerum.</p>
<p>Quas, dolore eum aliquid tempora molestias deserunt odit libero et exercitationem provident, vitae inventore assumenda. Natus ea ab dicta nemo nisi tempora debitis ad totam consequuntur praesentium esse, dolores eius quidem rem at doloribus incidunt ullam sequi aut et reprehenderit molestiae deserunt ex molestias? Laboriosam sit minus, inventore ab illo modi, excepturi ut rem nam, voluptate debitis ipsam! Incidunt, debitis earum. Voluptatibus facilis eligendi voluptatum molestias aliquam consequatur accusantium nostrum dolores numquam ea culpa natus dolorem quisquam labore, iure provident dolore? Perspiciatis neque soluta eveniet tenetur in veritatis totam, id minima deserunt voluptatem eligendi? Cum distinctio, maiores veritatis, minima laborum veniam aspernatur assumenda autem praesentium quidem at ullam? Tempore unde amet esse quo repellendus nam eum. Natus vel quam asperiores ut enim laudantium id perferendis eius! Impedit quos, cum iure aspernatur quis sint. Fugit ipsa et expedita error dignissimos non, obcaecati nihil quos eum quae neque ad, necessitatibus saepe impedit ipsum, architecto placeat dolorum accusamus sequi debitis maxime accusantium eaque enim. Minus, quos? Amet suscipit voluptate adipisci sint, earum sunt corporis delectus voluptates quam nam eius consectetur maxime id itaque error eos enim nisi porro nulla exercitationem iure vero consequuntur. Quam, facere aperiam tempora saepe nobis in ipsam optio! Aspernatur!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat sit suscipit quisquam corrupti enim fuga, molestias rerum mollitia dolorum natus iste, animi, eligendi optio voluptatem pariatur fugit? Voluptas voluptate qui, ab est autem quis assumenda aspernatur quam pariatur sed nisi voluptatum, repudiandae iure dicta eos maiores? Ducimus veritatis placeat amet, quis commodi repudiandae laboriosam nisi assumenda unde impedit sed reprehenderit magni nesciunt dicta odio obcaecati. Labore quos consequuntur sunt illum dolores, dolorum dignissimos quasi velit neque pariatur sed deleniti perspiciatis laboriosam corrupti nisi? Molestias magnam quibusdam nesciunt corporis sequi deserunt est inventore iure nemo assumenda, magni quo aut accusamus voluptates?</p>
<p>Alias molestiae est voluptatibus consequuntur neque nihil inventore possimus delectus facilis. Similique, ducimus iusto! Minus reprehenderit facilis culpa et, amet in rerum. Ratione ex harum molestiae, sed eaque quisquam dignissimos nobis dolor culpa, laboriosam non et voluptatem, repellendus veniam. Deleniti similique ea sint doloremque impedit rem omnis facilis, reiciendis eius? Ipsum, officiis? Iste architecto dolor assumenda fugit illum iure velit sit, voluptatum sunt unde necessitatibus maxime rerum soluta quis maiores nemo facere debitis nulla quos? Eos molestias unde perferendis est commodi, saepe ut suscipit quos similique consequatur dolore officiis voluptatem aliquam aliquid sequi perspiciatis mollitia ad repellat consectetur dicta quas!</p>
<p>Recusandae accusamus minus commodi illum beatae deserunt, inventore harum aut consequuntur reprehenderit tempora vero rem laudantium modi ipsa vitae eligendi molestias explicabo eum, aliquam autem optio quidem reiciendis? Recusandae placeat quis quia dolorum eius doloremque, doloribus ut maiores nam nulla amet explicabo tempora culpa ea esse aliquid. Ipsa doloremque nostrum dolor dolore perspiciatis temporibus eveniet facere omnis quibusdam vero enim eum sequi, doloribus nihil dicta! Ipsa maiores rem repellat magnam neque voluptate sequi reiciendis aspernatur quo itaque similique soluta, necessitatibus hic dicta voluptatum aut velit. Accusantium laboriosam nam illum quis dolores? Iste eligendi vero tenetur! Ut illum ex neque sequi!</p>
<p>Sint voluptatum voluptatibus facilis, deleniti ex placeat error? Vitae in, dicta praesentium sit aspernatur saepe est pariatur, atque impedit asperiores eaque! Cupiditate ipsum, suscipit rerum corporis nostrum, ipsam non architecto deleniti eligendi blanditiis delectus quaerat nisi quos. Earum provident iure voluptas quos necessitatibus quas error pariatur fuga culpa praesentium dolore, autem sed maiores, sit dolor. Non expedita incidunt, magni earum debitis id, aliquid repellat, voluptas harum recusandae voluptatibus. Doloribus nobis cupiditate explicabo fugiat exercitationem? Aperiam esse vero blanditiis cum tempora ipsum nam amet dicta accusamus numquam corrupti temporibus ut eos quae quia quibusdam hic non ipsam adipisci, itaque consequuntur obcaecati.</p>
<p>Ut voluptates quisquam harum labore hic laborum recusandae dignissimos, atque beatae quas at repellendus? Ducimus cum provident blanditiis nam. Magni nam explicabo atque commodi dolores voluptates est officiis dolore quod tenetur, pariatur fuga assumenda alias, temporibus dolorem enim aut consequuntur facere aperiam accusantium veniam modi possimus impedit! Sequi incidunt aut inventore possimus? Sequi distinctio officia voluptates similique voluptate placeat nam provident illo qui, asperiores natus illum! Quos atque molestiae minus fugiat ea laboriosam reprehenderit vero ipsam repudiandae optio officiis iusto harum, nisi omnis quidem voluptas repellat consectetur possimus id eligendi ratione earum ut at! Iusto consequuntur voluptatem quae explicabo? Provident?</p>
<p>Nam, excepturi debitis ipsa modi illo ea pariatur quas! Aliquid natus dolorem omnis inventore exercitationem. Nam itaque neque, pariatur est vero cupiditate nostrum, accusantium expedita voluptates rerum aliquam ducimus labore dicta quos iusto eligendi aperiam quibusdam autem atque! Magni possimus quos doloremque commodi dolores in exercitationem sapiente, praesentium cupiditate porro rem ipsam voluptates alias explicabo ut error ratione sint illo? Libero sit iusto pariatur eos. Asperiores, maxime error nostrum quia nihil recusandae similique ea hic. Tempore vero numquam beatae quas a ipsum tenetur laboriosam iusto rerum ut praesentium voluptas aperiam quidem, dolorum possimus. Dolor rem architecto voluptatum ex quos consequuntur!</p>
<p>Voluptatibus necessitatibus dolorem nesciunt. Dolorem distinctio amet molestias saepe, exercitationem dolores ullam eaque sapiente consequuntur suscipit sed quia placeat nemo dicta ratione corrupti enim omnis, ducimus quam velit quisquam fugit tempore. Suscipit nesciunt nisi ratione blanditiis, voluptates rem facilis amet excepturi delectus ipsa necessitatibus ad magnam dicta veniam voluptatum cumque, soluta atque minus, beatae consectetur laboriosam odio quae. Reprehenderit id odit distinctio natus iure perspiciatis corporis fuga, earum, porro eveniet modi sapiente voluptatem impedit est dolores, aperiam deleniti. Nostrum enim excepturi illum tempore ducimus eaque animi labore, eum, porro exercitationem distinctio rerum quia ipsa molestias unde dolorum totam architecto consequuntur!</p>
<p>Nesciunt qui laboriosam velit. Repellendus officia illo modi dolorem sint iure consequuntur itaque ipsum. Hic mollitia velit totam culpa fugiat ab nemo ad delectus distinctio deleniti, expedita ea, blanditiis quae aspernatur soluta enim consequatur architecto porro minima, numquam aliquid iure dolores! Iusto distinctio odit, quo nisi fugiat dignissimos! Aliquam alias laudantium incidunt accusantium ea assumenda ad delectus facilis optio culpa odit quae fuga dolorum, nostrum pariatur rem illo ipsa molestiae. Aut officia assumenda saepe placeat cum quo voluptatibus, molestiae accusantium tempore ab aliquid tempora eius id! Minus laboriosam recusandae sed eos labore. Et, iste quia perferendis odit molestiae beatae minus.</p>
<p>Quas ipsa tempora sed et? Rem soluta dolores quasi adipisci voluptatem, quod blanditiis molestias odio saepe maiores et quibusdam fugiat deserunt excepturi exercitationem, cupiditate reiciendis hic! Magnam voluptatibus consequatur id officiis voluptatem repellat saepe dignissimos pariatur praesentium, aliquam nostrum magni ipsa ad ratione blanditiis! Illum aut voluptas sapiente ex cum quis. Ut quisquam quidem quam nemo debitis perferendis dignissimos accusantium animi inventore aut iste fuga quis voluptate deserunt tempore, praesentium soluta voluptatem optio aliquid facere provident! Laborum ducimus, deleniti nesciunt minima dignissimos molestias hic animi accusamus, optio vitae a, reprehenderit necessitatibus molestiae quasi omnis veritatis exercitationem alias beatae sint enim.</p>
<p>Eaque minima aliquam iste! At laudantium vel nulla fugit voluptas. Illum maiores nostrum nulla velit vitae, vel maxime illo. Ipsum quia doloribus corporis fuga deleniti minima sit, labore pariatur esse vero distinctio aliquid ipsam reprehenderit velit aliquam rerum optio? Quos nisi, iusto qui labore voluptatibus, earum eveniet autem quisquam ratione eius eligendi possimus ad perferendis eaque distinctio? Nam incidunt voluptates nesciunt assumenda veniam, enim dolor architecto officia corporis voluptatibus tenetur id ipsam voluptate consequatur autem ut in at dignissimos reiciendis doloribus? Corporis nihil neque laudantium ullam qui optio animi temporibus consequatur labore! Quia tenetur eaque sed earum ipsa debitis error!</p>
<img width="1920" height="864" loading="lazy" sizes="auto" srcset="https://wvusstatic.com/www/uploads/2024/03/going-to-the-ends.jpg 1920w, https://wvusstatic.com/www/uploads/2024/03/going-to-the-ends-1280x576.jpg 1280w, https://wvusstatic.com/www/uploads/2024/03/going-to-the-ends-1536x691.jpg 1536w, https://wvusstatic.com/www/uploads/2024/03/going-to-the-ends-640x288.jpg 640w, https://wvusstatic.com/www/uploads/2024/03/going-to-the-ends-200x90.jpg 200w, https://wvusstatic.com/www/uploads/2024/03/going-to-the-ends-360x162.jpg 360w, https://wvusstatic.com/www/uploads/2024/03/going-to-the-ends-850x383.jpg 850w, https://wvusstatic.com/www/uploads/2024/03/going-to-the-ends-1140x513.jpg 1140w" >
!
