Add diagrams for background info

[masakudamatsu]

The image width needs to be 605px on screens.

• The max-width of paragraphs on the desktop is 604.391px (33em).

To deal with retina displays (2x for iPhone 4 and above, 3x for iPhone 6plus and above), we need to prepare three resolutions: 605px, 1210px, and 1815px.

Sketch App can export the same image in different resolutions. So we need to create 605px x 403px images (aspect ratio of 1.5 to 1).

Then use the following syntax

        <FigureFrame>
          <Image
            src={imageMarginTop1x}
            srcset={`${imageMarginTop1x} 1x, ${imageMarginTop2x} 2x, ${imageMarginTop3x} 3x`}
          />
        </FigureFrame>

where the images are imported with

import imageMarginTop1x from '../img/margin-top1x.png';
import imageMarginTop2x from '../img/margin-top2x.png';
import imageMarginTop3x from '../img/margin-top3x.png';

References:

• Create React App official docs: https://create-react-app.dev/docs/adding-images-fonts-and-files/
• An example code for retina-display responsive images: https://stackoverflow.com/a/59404095/11847654
• Sketch App official docs: Use Export Presets https://www.sketch.com/docs/exporting/#how-to-create-and-use-export-presets

[masakudamatsu]

We do not use the image optimization for retina screens. We always use the 3x images.

• My MacBook Pro retina display fails to load the 2x image. The 1x image is instead loaded, with poor resolution.
• To avoid this possibility, we use the maximum image resolution of 3x.