JSFiddle - React, Tailwind, and code Playground
by teleject
HTML
<h1 id="needforaresponsivewebimageformat">Need for a Responsive Web Image Format</h1>
<p>The web boomed first due to images. </p>
<p>If it wasn’t for a then non-standard bit of HTML proposed by <a href="http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html">Marc Andresson</a> and put into Mosiac browser, we would probably still be buying encyclopedias on CD-ROMS today.</p>
<p>In his initial proposal, Andresson cited Xbm and Xpm as image formats worth supporting.</p>
<p>Thankfully, browsers have adopted more image file formats since then.</p>
<p>Many formats have indeed come and gone, but the few we deal with the most are PNG, GIF and JPEG. </p>
<h2 id="webpimageformat">WebP Image Format</h2>
<p>Google announced the creation of a new image format, WebP to join their ranks as standard methods for delivering images on the web.</p>
<p>WebP’s goal is to surpass compression file sizes of photographs–a role usually reserved by JPEG. But this JPEG clone has a special talent: It animates. </p>
<p>In essenece, the WebP image is merely an evolution of the web graphic, a hybrid of GIF and JPEG file format. </p>
<p>As modern browsers expand onto more and more onto mobile devices with high resolution displays, the web doesn’t need GIF and JPEG copycats. </p>
<p>The Problem with Mobile and Images</p>
<p>Problems that I discussed when I wrote about <a href="http://www.christopherschmitt.com/2012/01/31/adaptive-images-in-responsive-web-design/">the HiSRC jQuery plugin</a> when dealing with a then-hypoethical problem of sending an inline image to an iPad with retina display on a 3G network:</p>
<blockquote>
<ul>
<li>Do you deliver the low-resolution, mobile friendly version?</li>
<li>Or do you let the iPad 3 have the larger version, but with the longer download time?</li>
</ul>
</blockquote>
<p>Solutions involve sending a serious amount of JavaScript and speed detection tests to devices to be sure of the network speed. </p>
<p>While...