If you make changes to this website that involve adding new images or replacing existing ones, here are a couple of general recommendations:
Images¶
- We prefer SVG images, but if those do not exist we can use PNG images. Additionally, for cover images, we prefer that they are obtained from Unsplash and are in the WebP format.
Company logos have canvas size of:
- 128x128px
- 384x128px
Optimization¶
PNG¶
Use the OptiPNG tool to optimize PNG images:
optipng -o7 file.png
SVG¶
Inkscape¶
Scour all SVG images.
In Inkscape:
- File Save As..
- Set type to Optimized SVG (*.svg)
In the Options tab:
- Number of significant digits for coordinates > 5
- Turn on Shorten color values
- Turn on Convert CSS attributes to XML attributes
- Turn on Collapse groups
- Turn on Create groups for similar attributes
- Turn off Keep editor data
- Turn off Keep unreferenced definitions
- Turn on Work around renderer bugs
In the SVG Output tab under Document options:
- Turn off Remove the XML declaration
- Turn on Remove metadata
- Turn on Remove comments
- Turn on Embeded raster images
- Turn on Enable viewboxing
In the SVG Output under Pretty-printing:
- Turn off Format output with line-breaks and indentation
- Indentation characters > Select Space
- Depth of indentation > 1
- Turn off Strip the "xml:space" attribute from the root SVG element
In the IDs tab:
- Turn on Remove unused IDs
- Turn off Shorten IDs
- Prefix shortened IDs with >
leave blank - Turn on Preserve manually created IDs not ending with digits
- Preserve the following IDs >
leave blank - Preserve IDs starting with >
leave blank
CLI¶
The same can be achieved with the Scour command:
scour --set-precision=5 \
--create-groups \
--renderer-workaround \
--remove-descriptive-elements \
--enable-comment-stripping \
--enable-viewboxing \
--indent=space \
--nindent=1 \
--no-line-breaks \
--enable-id-stripping \
--protect-ids-noninkscape \
input.svg output.svg
WebP¶
Use the cwebp command to convert PNG or JPEG image files to WebP format:
cwebp -q 70 -m 6 input_file -o output.webp