Tour sections: prepare Image Derivates for web and mobile

[chrisdaaz]

The images in PWA Images are the originals we need to use throughout the website.

If you come across an image whose filename starts with a number (example: 1. Tuareg camel saddle), it is likely that we already have derivatives for that image in the img/fragments/ directory. No additional processing is needed here.

Resizing images

Every other image will likely need some processing. An easy way to make web or mobile friendly images is to resize them. All .jpg and .png files can be resized in MS Paint. Images in .tif file formats might need special software like Gimp to resize them. You can also use a command-line tool like Imagemagick if you feel like learning about automated image processing.

• Create an mobile friendly images with a 300 pixel width and suffix the filename with _300
• Create an web friendly images with a 800 pixel width and suffix the filename with _800

Naming Derivative Image Files

The filenames are a little messy, so I recommend these guidelines (I don't have strict rules about this)

• Use short, lowercase names
• Use hyphens or underscores instead of spaces
• No periods or spaces, please

Saving the images to a folder

Here's a starter tour folder you can use. Some may already be there, others may be missing. Use it to get started and upload a finished version to Box.

Done looks like

• A folder called tour is uploaded to Box containing all image derivatives
• The folder has subfolders that represent pages within the tour sections (usually to correspond to the layout html files the images are used within for example:

tour
├── driving-desires
│   ├── ....jpg
 |── saharan-echoes
│   ├── intro_300.jpg
│   └── intro_800.jpg
├── saharan-frontiers
│   ├── sijilmasa
│   │   ├── 6-glazed-ceramic-inscribed-vase.jpg
│   │   ├── gate_300.jpg
│   │   ├── gate_600.jpg
│   │   ├── map_300.png
│   │   └── map_800.png