Muxxy's Formatting Tips - Shrink Images

gmuxx(67)
Published in
#markdown
Words
476
Reading
3 min
Listen
Play
9y

laptop-820274.jpg

I was asked last night about the possibility of shrinking images directly in Steemit posts. I was unsure so I went looking for a solution, and found it. I want to share this with my followers looking to edit their pictures without resorting to taking them into Photoshop or similar.

The photo above is 4896 × 3264 pixels, way too large for our needs. It also takes a while to load into the post. Yes, when you add it into the post Steemit will shrink it down to fit the post, but what if you want it smaller?

The trick is to add https://steemitimages.com/0x0/ in front of the image's URL - where the first 0 is the width and the second is the height. I discovered you really only need to specify the width, the height is automatically calculated for you. Let me give you an example using the image above.

The first step is to edit the URL if you simply uploaded the image. This is what Steemit added when I uploaded the image.

![laptop-820274.jpg](https://steemitimages.com/DQmVwwZPGjHPXr8vUbjKzXcRscmBpkUu7CBkTbncGxDSwGa/laptop-820274.jpg)

We need to clean this up by removing everything before the open bracket, and the brackets themselves, as in:

https://steemitimages.com/DQmVwwZPGjHPXr8vUbjKzXcRscmBpkUu7CBkTbncGxDSwGa/laptop-820274.jpg

Much cleaner, yes? Next, we add https://steemitimages.com/350x0/ directly in front of the cleaned URL, like this:

https://steemitimages.com/350x0/https://steemitimages.com/DQmVwwZPGjHPXr8vUbjKzXcRscmBpkUu7CBkTbncGxDSwGa/laptop-820274.jpg

350 is the width in pixels that I specified.

The result is shown below.

Here I type directly after the URL.

Not ideal, right? No problem. Use pull-left or pullright. Let me show you.

<div class="pull-left">https://steemitimages.com/350x0/https://steemitimages.com/DQmVwwZPGjHPXr8vUbjKzXcRscmBpkUu7CBkTbncGxDSwGa/laptop-820274.jpg</div> Followed by text gives:

This result. As you can see, my text flows nicely and is in line with the top of the image.

This is handy for resizing huge images that you want aligned left with text to the right of it.

If however you want the shrunken image to the right with text flowing to its left you would use a pull-right instead, giving the following result.

This is the result. Neat huh? Oh wait...the image is smaller. Yup, I changed the width from 350 to 250 pixels.

As you can see, you no longer need to resize your images in outside programs. They can be reasonably sized like this...

Half size like this...

Or anything in between...


200x0
 

100x0
 

50x0

NOTE: While your post looks great on Steemit, the resizing does not appear to work on Busy.org.

Photo from https://pixabay.com under Creative Commons CC0


gmuxxxx.png
Banner by hoschitrooper@hoschitrooper

Like what I do? Vote for my witness by clicking THIS LINK. Thanks for your support.

Are you a writer or keen to learn? Do you wish to join a community of like-minded individuals who can help hone your writing skills in the fields of fiction, non-fiction, technical, poetry, or songwriting? Join us at The Writers' Block by clicking the logo below.

Muxxy's Formatting Tips - Shrink Images | Ecency