Screen shots & video guidelines

[garrett]

• Sizes
• Names (variety of names)
• OS (Show screenshots from Fedora, CentOS, Arch, Debian, etc.)
• System name (use obvious system names, not just Twin Peaks references)

[garrett]

Screenshot guidelines

Content

• Do not use "localhost" as the hostname
• Do not use hostnames which might be considered offensive
  • including what may be construed to be political, such as commonly referred to first and last names of world leaders, like "Putin", "Donald", "Trump", "Johnson", etc.
• Don't show debug items in the menu (you may need to modify your DOM on the fly)
• Use a fictional username when possible (optional)

Browser rendering

• Use standard font size (reset your font zooming with ctrl+0)
• Do not override fonts
• Do not use subpixel anti-aliasing
• Do not use themes which may recolor the widgets

Sizing

• Try to minimize wasted space when possible (blank areas on the page) — this applies to the in-page elements, not dialogs
• Try to crop to the border (including the border) for dialogs
• Don't make things so narrow cause strings to wrap unnecessarily
• Browser width should be at minimum before the point responsive media queries kick in, unless the screenshots are demonstrating responsiveness or mobile
• Mobile screenshots should be the size of actual phones
• Screenshots should not be resized, only cropped; 1 pixel should say 1 pixel
  • Exception: If the mobile screenshot is high-res, it may be resized in half

Files

• Use PNG
• Do not use JPEG
• Optimize the images with optipng
  • or pngquant, in some cases — although this second tool may drop quality a bit (by lowering number of colors)
• Keep GIFs small (if you need to show something animated)

[larskarlitski]

Nice!

• should there be a rule about showing or not showing browser chrome?
• can we make optipng part of the blog post creation pipeline?

[jelly]

It seems it makes sense to run oxipng:

[jelle@t14s][~/projects/cockpit-project.github.io]%oxipng images/275-image-history.png
Processing: images/275-image-history.png
1493x406 pixels, PNG format
4x8 bits/pixel, RGBA
IDAT size = 113877 bytes
File size = 114198 bytes
Reducing image to 3x8 bits/pixel, RGB
Trying: 8 combinations
Found better combination:
zc = 9 zs = 0 f = 0 79150 bytes
IDAT size = 79150 bytes (34727 bytes decrease)
file size = 79278 bytes (34920 bytes = 30.58% decrease)
Output: images/275-image-history.png