Picture Preprocessing
Required Tools
Convert from heic to jpg
By default, Apple devices now store pictures in HEIF format (ending in e.g. .heic).
However, as of now (Jan 2023), no browsers support HEIF (source).
So, we have to convert these pictures to a better-supported format. One format is jpg.
To do so, we use the imagemagick mogrify command to convert images to jpg in batch.
magick mogrify -monitor -format jpg *.HEIC
Rename files
An optional step is to rename all the files according to the time they are taken. This helps organize the pictures by time.
The following command recursively renames all files in the target directory to the format of 2022-06/20220602_162412.jpg.
exiftool -r '-FileName<CreateDate' -d '%Y-%m/%Y%m%d_%H%M%S%%-c.%%le' <path/to/target>
It is adapted from a stack exchange post.
Purge EXIF and TIFF data
Before uploading your photo, it may contain sensitive EXIF and TIFF data (time taken, device, geo location, ...) that you want to remove.
You can use the following exiftool command to remove all EXIF and TIFF data of all pictures in current directory.
exiftool -all= .
Alternatively, you can also preserve certain fields while removing the rest. For example, the following command preserves the artist field.
exiftool -all= -tagsfromfile @ -artist
Responsive Images
In modern web development, the concept of responsive images help devices with different screen sizes and resolutions to load only what is necessary.
For the gallery of this website, I have written a python script to generate responsive images of different widths (1920, 1440, 1024, 640, 320 pixels). These values are inspired from a blog post.
Note that the script also removes EXIF and TIFF data. Also, it changes the color profile to sRGB (which may originally be Display P3 for iOS devices).
python srcset.py
Compression
It is also important to compress all images so they take less time to load and save bandwidth.
The following command optimizes all JPEG images. Although for most cases progressive images take less space, it may also be possible that a normal image takes less space. So you may want to run the command twice.
jpegoptim -s --all-progressive ./*.jpg")
jpegoptim -s --all-normal ./*.jpg")
For png files, you may use optipng.