Screen shots & video guidelines

garrett commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 2 years ago

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

cockpit-project / cockpit-project.github.io