Clarify and update screenshot recommendations
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
-
The MRs that originally caused me to create this issue:
-
Some of the updated images were originally large, but resizing them down to 1000px to get under the recommended limit didn't work very well. Some screenshots ended up extremely blurry, and not rendering very well on the site. For example, one screenshot looked like this in the page:
-
I updated some of the screenshots from the MR above here. The images have slightly large file sizes, but the quality is so much better:
-
-
A newer example: !71167 (23793c04)
In this case, Russell pushed a commit to resize the images to the recommended 1000px limit, but if you compare, again you'll see resizing reduced the image quality a lot, and file sizes are larger, so resizing was a net loss in every way. I went and recompressed these resized images (which now have a pixel count less than half the originals), and it barely saved any space. 3KB smaller for one image, 7KB smaller for the other, but the visual degradation is clear:
Originals (compressed-only):
- https://gitlab.com/gitlab-org/gitlab/-/blob/b81f803100e34aaef74a00a76c2e44e11488cfa4/doc/ci/pipelines/multi_project_pipelines.md#multi-project-pipeline-visualization
- https://gitlab.com/gitlab-org/gitlab/-/blob/b81f803100e34aaef74a00a76c2e44e11488cfa4/doc/ci/pipelines/parent_child_pipelines.md
Resized to 1000px max:
Related issues
Resolves #284065 (closed)
Author's checklist
-
Consider taking the GitLab Technical Writing Fundamentals course -
Follow the: -
Ensure that the product tier badge is added to topic's h1
. -
Request a review based on: - The documentation page's metadata.
- The associated Technical Writer.
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 likeDefault behavior when you close an issue
. -
The headings (other than the page title) should be active. Instead of Configuring GDK
, say something likeConfigure 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.