Skip to content

Clarify and update screenshot recommendations

Marcel Amirault requested to merge docs-styleguide-images into master

What does this MR do?

Updates the screenshot guidelines for documentation. The 1000px recommendation is much too low, and the decrease in visual quality is magnified the larger the original image is.

I've been testing different compression techniques and resizing options, and in the end it seemed like the best "bang-for-the-buck" is just to:

  • Make sure your browser window is as small as possible, to prevent the need for resizing.
  • Compress it as-is, without resizing.

If you resize it before compressing, it seems to introduce graphics artifacts that reduce the efficiency of pngquant. If you use the unresized original images, pngquant seems to be very capable of getting very small file sizes.

The main benefit in skipping the resize is the huge increase in visual quality.

If you resize (and then compress), often screenshots are extremely blurry and unprofessional looking. This effect is not only amplified by how big the original image was, but also based on the size of your display. If you have a large display, the image looks even worse. If we use larger original images, the website is able to scale the images automatically, and it continues to look good on large displays.

Solution

Remove the 1000px limit, and be more careful about making sure all images are compressed properly. Let TW reviewers judge each screenshot on a case by case basic and determine when images are too big and need to be resized. The vast majority of the oversized images we've seen are from earlier times when the TW team was much smaller and weren't able to review every new screenshot added. I don't think we're at any risk of many more exceedingly oversized images being added.

Examples

Related issues

Resolves #284065 (closed)

Author's checklist

If you are only adding documentation, do not add any of the following labels:

  • ~"feature"
  • ~"frontend"
  • ~"backend"
  • ~"bug"
  • ~"database"

These labels cause the MR to be added to code verification QA issues.

Review checklist

Documentation-related MRs should be reviewed by a Technical Writer for a non-blocking review, based on Documentation Guidelines and the Style Guide.

  • If the content requires it, ensure the information is reviewed by a subject matter expert.
  • Technical writer review items:
    • Ensure docs metadata is present and up-to-date.
    • Ensure the appropriate labels are added to this MR.
    • If relevant to this MR, ensure content topic type principles are in use, including:
      • The headings should be something you'd do a Google search for. Instead of Default behavior, say something like Default behavior when you close an issue.
      • The headings (other than the page title) should be active. Instead of Configuring GDK, say something like Configure GDK.
      • Any task steps should be written as a numbered list.
      • If the content still needs to be edited for topic types, you can create a follow-up issue with the docs-technical-debt label.
  • Review by assigned maintainer, who can always request/require the above reviews. Maintainer's review can occur before or after a technical writer review.
  • Ensure a release milestone is set.
Edited by Marcel Amirault

Merge request reports