Posted almost 3 years ago. Visible to the public.

Images

Basics

  • Understand the difference between raster images (like .png) 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 your save the file.
  • Understand the strengths and weaknesses of the following file formats:
    • png
    • gif
    • jpg
    • svg

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:

Discuss the pros and cons of each approach with your mentor.

Exercises

  1. Add a logo image to MovieDB. The logo image should look unpixelated on both high- and low-density displays.
  2. Add icons to the menu items of MovieDB. Integrate FontAwesome for this.

Author of this card:

Avatar
Henning Koch
Last edit:
over 1 year ago
by Henning Koch
Keywords:
retina
Posted by Henning Koch to makandra Curriculum
This website uses cookies to improve usability and analyze traffic.
Accept or learn more