How can we reduce the size of a image, while editing?

Question

When someone post a question with an image on it that is really huge (most of the time an iPhone screenshot), is there a way to reduce the size of the image with an edit in order to make the question more readable?

I'm referring at questions like this one: The Storage "Used" does not add up

Answer 1

Use img tags with a custom width attribute. In the example you linked to, I've edited it to do just that. Check the revision history to see what I've done.

<img src="https://i.sstatic.net/1vIgO.png" width="375">

• iPhone 4–5s: 320
• iPhone 6–6s: 375
• iPhone 6+–6s+: 540

If you resize an image and re-upload it as a suggested edit, I'm likely to ‘reject and edit’ it and use the above instead on the original image. Resizing the image loses detail.

Feel free to use even smaller numbers for side-by-side images (e.g. 300) and add []() or [][] link formatting around the img element to link to the full-size image.

Answer 2

Late Note:
This was broken for several months, but is now working again.

---

I Like grg's method, & in fact use it myself quite a lot for quick edits to posts.

There is another method, slightly more work, but this not only reduces the apparent size on screen, but also the actual image size - useful for if you're on the phone, etc.

Assuming it's your own upload, start by dragging your image into the uploader as usual, this will generate markdown like this

[![enter image description here][1]][1]  
  [1]: https://i.sstatic.net/skJEn.jpg

take that bottom line & duplicate it..

[![enter image description here][1]][1]  
  [1]: https://i.sstatic.net/skJEn.jpg
  [1]: https://i.sstatic.net/skJEn.jpg

Then you make two changes...
in one link, add a character after the last existing character of the file name (not the extension)
You can use m for 'mobile' or s for 'small square'
In the other, change [1] to [2]

so

[1]: https://i.sstatic.net/skJEn.jpg
[1]: https://i.sstatic.net/skJEn.jpg

becomes

[1]: https://i.sstatic.net/skJEnm.jpg
[2]: https://i.sstatic.net/skJEn.jpg 

You then change the original inline tag to reflect both versions...
[![enter image description here][1]][2]
in this, the first ref [1] is the display & the second [2] is the linked image.

The result is this...

[![enter image description here][1]][2]  
  [1]: https://i.sstatic.net/skJEnm.jpg
  [2]: https://i.sstatic.net/skJEn.jpg

It doesn't actually matter which line becomes which option, so long as your inlined link refers to the smaller image for display & the larger for click-through.

Which then displays as this...
If you click it, it will open full size.

or alternatively as a small square...
Note I've duplicated the mobile line & added a small square as [3] so both versions refer to [2] as their full-size version.

[![enter image description here][3]][2]  
  [2]: https://i.sstatic.net/skJEn.jpg
  [3]: https://i.sstatic.net/skJEns.jpg

Which then displays as this... more useful for gallery views than rectangular pictures.

As pointed out by grg in chat, this is actually an Imgur feature rather than SE.
There are various sizing options...

s = 90×90, b/t = 160×160, m = 320×320, l = 640×640, h = 1024×1024.

Answer 3

I'm not aware of any way to edit images within the site. What you can do though:

• Download image to your computer
• Use the editing tool of your choice to reduze the image size
• Edit the original post and replace the image with your reduced-size version