There are two distinct separate cases here. The first - images that are too big - can be addressed. For the second, while there are some mitigations, for the images in this article specifically, I don't see any specific solution. I feel it's kinda worth mentioning that this is normal behavior for images, network-wide. There's nothing special about this post and you can see similar issues in questions everywhere here. I frequently resize giant screenshots from mobile devices on MSE, for example.
Images that are too big
These can be adjusted in the standard way I personally do so - by adding an "m" to the imgur URL, which will resize them to a more normal size - though this does some sampling, which can make the image less clear - the way around this is to do what I've done in a few places and use actual image size constraints.
So, instead of this
[![Add status check dialog](https://i.sstatic.net/KOr2yl.png "Add status check dialog with filled values")](https://i.sstatic.net/KOr2y.png)
You constrain the width to a set size:
This uses HTML to resize the image:
[<img src="https://i.sstatic.net/KOr2yl.png" width="300" alt="Add status check dialog with filled values" title="Add status check dialog">](https://i.sstatic.net/KOr2y.png)
One major downside here is that the new editor (which is used for Articles) turns this into the mor usual format, stripping out all of the HTML whenever switching to the preview, so if you use this, you can't preview the post and keep your formatting. :/
NB: there is currently a bug here that's likely caused due to Articles having been designed for Teams - while we create the alternate image sizes when normally uploading to imgur for public posts, this doesn't seem to be done for images uploaded as parts of articles, so the handy tools to resize don't work.
Images that are too small
We address this by allowing anyone to click on images to view them in a new tab or window, allowing them to get to their desired level of zoom. Our pages have a fixed max width to the center section of the page, which means that screenshots that are at or wider than that width will have to be compressed to avoid stretching the page or causing the center to sidescroll.
There are ways to mitigate this when taking screenshots - for example it looks like they're using a relatively wide browser window, but the actual content is relatively compact in some cases (e.g. images in section 9, 10, 11) if the window was narrowed, it would allow the screenshots to be narrower - but then it may not give a realistic view of the UI.
When we're looking at elements like those in those images - this one for example:
- On the detail merge request window, scroll down until you see a section titled Status checks 1 pending. This is the merge request widget that lists all external status checks associated with merge requests. Click on the Expand button on the right hand side of this section:
There's a button on the right side of this image that must be included because that's what the bullet is describing - if we crop the image to the content on the left, the button will be missing and if we just crop to the button, the context will be missing.
I'm a bit unsure what the solution here is, other than just asking the patience of the reader to click on images if they'd like to see them in more detail.
<a href="https://imgur.com/someimage.png"><img src="https://imgur.com/someotherimage.png"></a>
, wheresomeimage.png
shows everything andsomeotherimage.png
shows an appropriately zoomed, but perhaps cropped image of what's interesting...