How do I make png files display smaller?

Question

I just submitted this question, and I don't like the way my .png image renders. I often make diagrams in questions and answers using Microsoft paint, which produces a .png. In Physics stack exchange it displays always as big as humanly possible. Is there a way to make the picture display smaller?

Answer 1

I think you should not do what ACuriousMind suggested – directly linking to downscaled image URLs on Imgur – because the Stack Exchange software isn't aware of it, and as a result:

• The downscaled image is used even on high-DPI screens, where it looks fuzzy. On my phone, the m and l sized images in ACuriousMind's answer appear the same size; the only difference is that the m image is blurrier. Even on my 100dpi laptop screen, the l image and the full-sized image are the same width, but the l image is blurrier.

• Clicking/tapping the image to follow the link to the Imgur page still shows you the downscaled image.

If you use a downscaled image, then the full-sized image might as well not exist, except to the 0% of users (like me) who will manually edit the URL to delete the extra character. I assume the downscaled images are meant for thumbnail pages. I don't think it makes sense to use one of them as the only version of the image that will ever appear to anyone who sees your question. If the image really is overlarge, you should downscale it before uploading it to Stack Exchange.

There is a way to adjust the size of the presented image without reducing the pixel size, by writing an <img> tag with a width or height attribute instead of the ![] Markdown syntax:

[<img src="https://i.sstatic.net/4x2NJ.png" width="400" title="enter image description here">][1]
[<img src="https://i.sstatic.net/4x2NJ.png" width="250" title="enter image description here">][1]

It's annoyingly verbose, but it does the right thing on high-DPI screens, and it gives you more flexibility in choosing a size.

Note: HTML in posts is censored by an annoyingly restrictive regex. The attributes must be in the order src, width, height, title (with the last three optional), and must all be quoted.

Answer 2

You can get three different sizes from imgur pictures by manipulating the URL directly: For your example, we start with https://i.sstatic.net/4x2NJ.png and append either s, m or l in front of the file extension:

[![enter image description here][1]][1]

  [1]: https://i.sstatic.net/4x2NJs.png

yields

[![enter image description here][1]][1]

  [1]: https://i.sstatic.net/4x2NJm.png

yields

and

[![enter image description here][3]][3]

  [3]: https://i.sstatic.net/4x2NJl.png

yields