standardebooks/web
1
0
Fork 0
mirror of https://github.com/standardebooks/web.git synced 2025-07-16 03:16:36 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Convert front page images to avif and add explicit sizing in <img> elements

Browse source
This commit is contained in:
Alex Cabal 2022-01-23 16:34:15 -06:00
parent c9c621b9c8
commit 7a6e155d66
18 changed files with 64 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
www/images/code.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
www/images/code@2x.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
www/images/covers.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 32 KiB

BIN
www/images/covers@2x.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
www/images/endnote.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
www/images/endnote@2x.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
www/images/metadata.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
www/images/metadata@2x.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

50
www/images/no-drm.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Before After
Before After

BIN
www/images/proofreading.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
www/images/proofreading@2x.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
www/images/toc.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

BIN
www/images/toc@2x.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
www/images/typography-bad.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
www/images/typography-bad@2x.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
www/images/typography-good.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
www/images/typography-good@2x.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.4 KiB

30
www/index.php
View file

@ -22,12 +22,13 @@ require_once('Core.php');
</div>
<figure class="stacked">
<picture>
<source srcset="/images/typography-bad@2x.avif 2x, /images/typography-bad.avif 1x" type="image/avif"/>
<source srcset="/images/typography-bad@2x.png 2x, /images/typography-bad.png 1x" type="image/png"/>
<img src="/images/typography-bad@2x.png" class="bottom" alt="An example of bad typography."/>
<img src="/images/typography-bad@2x.png" class="bottom" alt="An example of bad typography." height="150" width="300"/>
</picture>
<picture>
<source srcset="/images/typography-good@2x.png 2x, /images/typography-good.png 1x" type="image/png"/>
<img src="/images/typography-good@2x.png" class="top" alt="An example of Standard Ebooks typography."/>
<source srcset="/images/typography-good@2x.avif 2x, /images/typography-good.avif 1x" type="image/avif"/>
<img src="/images/typography-good@2x.png" class="top" alt="An example of Standard Ebooks typography." height="150" width="300"/>
</picture>
<img alt="An arrow pointing from bad typography to good typography." class="arrow" src="/images/arrow-down.png"/>
</figure>
@ -42,8 +43,9 @@ require_once('Core.php');
</div>
<figure>
<picture>
<source srcset="/images/proofreading@2x.avif 2x, /images/proofreading.avif 1x" type="image/avif"/>
<source srcset="/images/proofreading@2x.png 2x, /images/proofreading.png 1x" type="image/png"/>
<img src="/images/proofreading@2x.png" alt="A text with proofreader’s marks."/>
<img src="/images/proofreading@2x.png" alt="A text with proofreader’s marks." height="200" width="400"/>
</picture>
</figure>
</div>
@ -56,8 +58,9 @@ require_once('Core.php');
</div>
<figure>
<picture>
<source srcset="/images/metadata@2x.avif 2x, /images/metadata.avif 1x" type="image/avif"/>
<source srcset="/images/metadata@2x.png 2x, /images/metadata.png 1x" type="image/png"/>
<img src="/images/metadata@2x.png" alt="Ebook metadata displayed in an ereader program."/>
<img src="/images/metadata@2x.png" alt="Ebook metadata displayed in an ereader program." height="200" width="400"/>
</picture>
</figure>
</div>
@ -85,12 +88,14 @@ require_once('Core.php');
</div>
<figure class="stacked">
<picture>
<source srcset="/images/endnote@2x.avif 2x, /images/endnote.avif 1x" type="image/avif"/>
<source srcset="/images/endnote@2x.png 2x, /images/endnote.png 1x" type="image/png"/>
<img src="/images/endnote@2x.png" class="bottom" alt="A screenshot of a popup endnote."/>
<img src="/images/endnote@2x.png" class="bottom" alt="A screenshot of a popup endnote." height="150" width="300"/>
</picture>
<picture>
<source srcset="/images/toc@2x.avif 2x, /images/toc.avif 1x" type="image/avif"/>
<source srcset="/images/toc@2x.png 2x, /images/toc.png 1x" type="image/png"/>
<img src="/images/toc@2x.png" class="top" alt="A screenshot of an ebook’s table of contents."/>
<img src="/images/toc@2x.png" class="top" alt="A screenshot of an ebook’s table of contents." height="150" width="300"/>
</picture>
</figure>
</div>
@ -106,7 +111,7 @@ require_once('Core.php');
<picture>
<source srcset="/images/covers@2x.avif 2x, /images/covers.avif 1x" type="image/avif"/>
<source srcset="/images/covers@2x.jpg 2x, /images/covers.jpg 1x" type="image/jpg"/>
<img src="/images/covers@2x.jpg" alt="An ebookshelf featuring Standard Ebooks covers."/>
<img src="/images/covers@2x.jpg" alt="An ebookshelf featuring Standard Ebooks covers." height="125" width="400"/>
</picture>
</figure>
</div>
@ -120,8 +125,9 @@ require_once('Core.php');
</div>
<figure>
<picture>
<source srcset="/images/code@2x.avif 2x, /images/code.avif 1x" type="image/avif"/>
<source srcset="/images/code@2x.png 2x, /images/code.png 1x" type="image/png"/>
<img src="/images/code@2x.png" alt="The source code for an ebook."/>
<img src="/images/code@2x.png" alt="The source code for an ebook." height="200" width="400"/>
</picture>
</figure>
</div>
@ -134,9 +140,9 @@ require_once('Core.php');
<p>And while all of the ebooks we feature and the cover art we draw from are <em>already</em> believed to be in the public domain in the U.S., Standard Ebooks releases all of the work we put in to each ebook into the public domain too. That makes each and every one of our ebook files not just free, but <a href="https://en.wikipedia.org/wiki/Gratis_versus_libre">libre</a> too—because the world deserves more unrestricted culture.</p>
</div>
<figure class="oss">
<img alt="The Git SCM logo." src="/images/git.svg"/>
<img alt="The no-copyright symbol." src="/images/no-copyright.svg"/>
<img alt="The anti-DRM symbol." src="/images/no-drm.svg"/>
<img alt="The Git SCM logo." src="/images/git.svg" height="150" width="150"/>
<img alt="The no-copyright symbol." src="/images/no-copyright.svg" height="150" width="150"/>
<img alt="The anti-DRM symbol." src="/images/no-drm.svg" height="137" width="150"/>
</figure>
</div>
</section>