Git-Mirrors/privacyguides.org
1
0
Fork 0
mirror of https://github.com/privacyguides/privacyguides.org.git synced 2024-12-18 12:24:35 -05:00
Code Issues Packages Projects Releases Wiki Activity
a334e449cb
privacyguides.org/docs/meta/uploading-images.md
Redoomed 84d33ed944
docs: Add recommendation for WebP optimization (#2666) 
Signed-off-by: Jonah Aragon <jonah@triplebit.net>
Signed-off-by: Daniel Gray <dngray@privacyguides.org>
Signed-off-by: kimg45 <138676274+kimg45@users.noreply.github.com>
2024-07-25 16:36:40 +09:30

2.6 KiB
Raw Blame History

title
Uploading Images

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:

  1. File Save As..
  2. 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