2

Look for example at the recent article about How to use external status checks for merge requests. Almost all the 12 figures in the article are either zoomed out too much or zoomed in too much. They are also almost every time stretched over the whole width of the article area. It doesn't look nice and makes the information much harder to digest than necessary.

What can be done about that?

Figures that are zoomed in too much, would benefit from not stretching the whole figure over the full width. The user could probably reduce the zoom factor manually, if the user would know how to do that.

Figures that are zoomed out too much, are more difficult to fix but maybe increasing the width of the articles area might alleviate the problem somewhat. Looking at the true width of the zoomed out figures, they were taken over the full width of the screen while the articles column is maybe only a third of the width of the screen for a typical screensize.

15
  • 3
    "They are also all stretched over the whole width of the article area." - No repro, figure under point 7 isn't stretched. Indeed the post looks exactly as I'd expect in a normal Q&A. Commented Sep 24, 2021 at 11:49
  • 1
    The author of the article could edit the images themselves to be at whatever zoom level they wish them to be at. You can use anchor and image tags in Markdown, so they could do something like <a href="https://imgur.com/someimage.png"><img src="https://imgur.com/someotherimage.png"></a>, where someimage.png shows everything and someotherimage.png shows an appropriately zoomed, but perhaps cropped image of what's interesting... Commented Sep 24, 2021 at 11:49
  • @Nick "..figure under point 7 isn't stretched.." Thanks, I'd missed it. And if it's the same as in normal Q&A, then at least it means it's a common problem. I'd still say that it doesn't look nice. Commented Sep 24, 2021 at 11:54
  • 2
    Indeed, it often doesn't look nice, a quick fix authors can do is to suffix the image name with a size character so imgur serves it in a more reasonable size, however this doesn't help much in articles which aren't community editable. Unless you want to leave a comment for OP to fix it ofc. Commented Sep 24, 2021 at 11:58
  • @Nick Okay, so I will leave a comment pointing the user to this. Btw. I cannot self-answer my question here. There is a funny popup asking me if I really want that and then there is only a cancel option. I won't dwell on it, just leave the comment and call it a day. :) Commented Sep 24, 2021 at 12:00
  • 1
    Can't repro either (Win 10, FF 92), but the comments have the same text size as the question. Commented Sep 24, 2021 at 12:25
  • 2
    What would you do if this was a normal post? The ones that are too small aren't fixable unless the screenshot is of a smaller region of the page, which means you have to carefully consider whether the entire image is necessary or not. If you can, you could download the image and crop it but that may not completely fix the problem - or click on the image to view in another tab. For images that are too big, this is because the resolution uploaded to imgur is high enough that it can be made full-width. To combat this, there are easy solutions but they're not always obvious to people.
    – Catija Staff
    Commented Sep 24, 2021 at 13:28
  • @Catija "What would you do if this was a normal post?" I'm only the one with the question not the answer. There is a lot of good advice in the comments here by Nick, Heretic Monkey and you and I would love to compile them in an answer, but the Answer question button won't let me. See i.sstatic.net/CC99M.png Commented Sep 24, 2021 at 13:43
  • 2
    :/ That's weird. I'm also struggling with something - I'm trying to write an answer but I can't, for some reason, resize one of the images. I'm getting a warning from imgur that the image isn't available. But I think I know what's causing it. Can you make a bug report for the missing button?
    – Catija Staff
    Commented Sep 24, 2021 at 13:48
  • 1
    @Trilarion Have you got any userscripts running? No repro on the missing answer button if I try to self-answer one of my meta posts Commented Sep 24, 2021 at 13:48
  • 1
    @Nick I have quite a number of userscripts running. They seem to shoot me in the foot from time to time like now again. Maybe today is not my day. Commented Sep 24, 2021 at 13:53
  • @Trilarion I'd try disabling them to see if it resolves the issue :p Commented Sep 24, 2021 at 13:54
  • @Nick That was it. Commented Sep 24, 2021 at 13:55
  • @Trilarion Yeah, so you can turn them back on one-by-one to identify which potentially causes the problem. Once done that, try with only that userscript enabled, that will tell you if it's caused directly by that script, or by some combination of scripts. Then you can submit a bug report to the author of the script :p Commented Sep 24, 2021 at 14:02
  • Is the font size for comments larger for anyone else? I am seeing this
    – Sabito
    Commented Sep 25, 2021 at 22:57

1 Answer 1

4

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

[![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:

dd status check dialog with filled values

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:

  1. 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:

expanding status checks widget

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.

5
  • 1
    N.B. You'll only notice a difference in the size of the images in this answer if using a suitably wide display. For example on my 1080x1920 display they appear identically, while on my 3840x2160 display the first appears larger and fills the width of the answer, while the second is smaller and does not fill the answer's width. Commented Sep 24, 2021 at 14:31
  • @Catija This tells people how to edit, fix images, and even the correct thing for the OP to have done, which is to think about how the information will be presented and take screenshots at widths which will display reasonably across a wide variety of screens. All of the information you've presented here is really good and helpful for anyone creating or editing. However, regular users, and even moderators, can't edit articles, or even suggest edits. So, telling us "just edit" isn't an effective solution for an article, because it's not possible for us to do that.
    – Makyen Mod
    Commented Sep 25, 2021 at 1:32
  • The answer isn't "just edit", @Makyen - the honest center of the answer is "there's not much we can do about the bulk of the Article" (or any similar images). I can add the html to the over-zoomed one but that's about it. The primary concern in the question is the top-small images (in my estimation) and those aren't "fixable" other than clicking the image to expand or using a userscript that opens the image in the tab and allows you to zoom as needed.
    – Catija Staff
    Commented Sep 25, 2021 at 1:38
  • 1
    BTW: The image that you use as an example of displaying too small can be edited into something like this, which can be sized reasonably for this context. As you've mentioned, the correct thing is for the original author to take the screenshots at a width that will display well in the article, which will cause what they are screen capturing to be properly laid-out for that width. But, absent the OP redoing them, some of the images can be improved with relatively minor image editing. Others would be a major effort, or just not reasonably possible.
    – Makyen Mod
    Commented Sep 25, 2021 at 2:03
  • Given that I misunderstood what you're trying to convey (which implies that there might be other people who also misunderstand), perhaps it would be a good idea to split this into two major sections A) what viewers of the page can do, and B) what editors or authors can do. Each of those sections could then have "too big" and "too small" subsections.
    – Makyen Mod
    Commented Sep 25, 2021 at 2:07

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .