We've already learned how to integrate user-provided images uploads to our application in 205 basic file uploads and image versions. In this bonus chapter, we want to dive deeper.
Common web apps often include static images like icons and application logos next to the dynamically created images versions of uploaded files. To serve all of those with limited bandwidth and high quality, images formats and compression strategies have to be carefully selected.
Learn
Image formats
- Understand the difference between raster images (like
.png,.jpgand.webp) and vector images (like.svg). - Understand why a print designer talks a lot about physical measurements like "cm" and "DPI" and why this rarely matters to us.
- Understand how JPEG compression degrades the image quality every time you save the file.
- Understand the strengths and weaknesses of the following file formats:
- Rasterized formats:
webp,png,jpg,gif - Vector format:
svg
- Rasterized formats:
- Read why we want to use WebP instead of PNGs and JPGs in the future
High density displays
Browse the internet in order to:
- Understand the distinction between virtual pixels vs. physical pixels.
- Understand how raster images prepared for a 1:1 pixel ratio look like on high density displays.
- Understand which classes of devices typically have high-density displays (Smartphones, Macs) and which don't (most PCs, cheap phones, TVs).
Since we rarely know which device will be displaying our applications, we need to deal with both.
Browse the internet and get familiar with the following ways to embed raster images for high-density displays:
- Always embed images in larger resolution
- Use vector graphics
- Create multiple sizes of the image
- Use media queries that test for
min-device-pixel-ratio - Use
<img srcset="..."> - Use
<picture>
- Use media queries that test for
- Ignore the issue
Discuss the pros and cons of each approach with your mentor.
Resources
- Images done right Show archive.org snapshot
- HTML Standard Show archive.org snapshot
- A collection of 300.000+ SVG Vectors and Icons Show archive.org snapshot
- MDN: Responsive Images Show archive.org snapshot
- img srcset und sizes Show archive.org snapshot 🇩🇪
- Halve the size of images by optimising for high density displays Show archive.org snapshot
- TinyPNG Show archive.org snapshot
Exercises
Application logo
Add a logo image to MovieDB. The logo image should not look pixelated on both high- and low-density displays.
Menu icons
Add icons to the menu items of your MovieDB.
Integrate Feather Show archive.org snapshot for this. You might need such a compiler to "activate" the icons:
import feather from 'feather-icons'
up.compiler('[data-feather]', feather.replace)
