How To Resize an Image on Steemit

in #images6 years ago (edited)

If you're trying to add some "style" to your articles on Steemit, there are some choices from hypertext markup language (HTML) and markdown language (MDL) that you can use. Each of these items is called a "tag"; the one before the text is an opening tag, and the one after the text you're styling is a closing tag. Certain tags do not need both as they are self-closing. Tags within <> are from HTML. Unfortunately, those of you who have studied HTML and MDL may be frustrated because only certain tags from each work. Here are a few that I figured out for you, although I STILL don't know how to underline. In each article, I'll share some tips for you!

The basic format for including an external image in your article is:
![optional image description for assistive software](web address)
Assistive software helps people with visual impairment so that, even if they can't see the image, they know what it is.
example: Steemit logo
![Steemit logo](https://steemit.com/images/steemit.png)

Thanks to @rossenpavlov's "Easy Resize Images Inside The Steemit Editor"and @aology's comment there, I now understand how to resize an image the easy way on Steemit. I hope this info will be useful, as the above article is out of date. Using "img1.steemit.com" didn't work but "cdn.steemitimages.com" does.

BASIC HOW TO:
You have to prefix the image address with the initial part of the address for your picture; it is no longer correct to use the one referenced by @rossenpavlov (img1.steemit.com). @aology explained with an example in the comments, and here's another:
"https://cdn.steemitimages.com/..." is the beginning of the image address for:
"https://cdn.steemitimages.com/DQmVFCMBg9wBpMGUsDpHkimXdnKxL4gwgF8SJteGmwwAMmP/(image name)"
So, in order to change the size, you'll use:
"https://cdn.steemitimages.com/200x700/https://cdn.steemitimages.com/DQmVFCMBg9wBpMGUsDpHkimXdnKxL4gwgF8SJteGmwwAMmP/(image name)"
Where "(image name)" would take the format "name.ext", e.g. "image.png", "picture.jpg"...
Actually, though, the 2nd number (700) is irrelevant (see below); you just need a 0 for y.

I noticed you can also use "https://steemitimages.com/". I've provided an example under "Inflexible Ratio" below.

PASTED IMAGE:
For example, this 4500×2300 image:

https://cdn.steemitimages.com/DQmVFCMBg9wBpMGUsDpHkimXdnKxL4gwgF8SJteGmwwAMmP/ image.png (space inserted to prevent image display)
can become this 90-pixel-wide image:

https://cdn.steemitimages.com/90x0/https://cdn.steemitimages.com/DQmVFCMBg9wBpMGUsDpHkimXdnKxL4gwgF8SJteGmwwAMmP/ image.png

EXTERNAL IMAGE:
In fact, if you add an image link to an external image, you can do the same thing! Here's an example of an external link instead of a pasted 3000x3000 image.

https://cdn.pixabay.com/photo/2017/08/01/13/32/ steampunk-2565448_960_720.png

https://cdn.steemitimages.com/400x0/https://cdn.pixabay.com/photo/2017/08/01/13/32/ steampunk-2565448_960_720.png

INFLEXIBLE RATIO:
However, you cannot stretch an image this way, as it will always retain its original x:y ratio. The first number will determine the size. This image is 1920×1801 but trying to stretch it a different way fails.

https://steemitimages.com/300x4000/https://cdn.pixabay.com/photo/2016/01/03/20/12/ steampunk-1120035_960_720.jpg

WIDTHxHEIGHT REQUIRED:
Note that removing the second number (which is, by default, Y) will cause the image to fail to display.

https://cdn.pixabay.com/photo/2017/11/10/08/10/ son-2935723_960_720.jpg
The image is "broken if only X is used:

https://cdn.steemitimages.com/90/https://cdn.pixabay.com/photo/2017/11/10/08/10/ son-2935723_960_720.jpg

NOTES:
Given that the initial address has already changed in the past two years, it is possible that https://cdn.steemitimages.com/ may be replaced someday. If you are aware of other valid base addresses, please let me know so I can list them.

Resizing this way blurs the image, and the image cannot be expanded to larger than the original size.

Images from Pixabay.___


If you appreciate this article, please upvote/like, resteem/share and share it to Facebook, Twitter, Reddit, LinkedIn and wherever else you can!

Sort:  

Very helpful to more than just newbies - have resteemed.

Thanks! I'm glad it's useful!

I discovered that you can use "https://steemitimages.com/" without the "cdn.", so I made a note of that in my article and an example is shown in "Inflexible Ratio".

One of the most useful posts I've seen with lots of examples... also resteemed!

Thank you! I'm glad you feel that way!

I discovered that you can use "https://steemitimages.com/" without the "cdn.", so I made a note of that in my article and an example is shown in "Inflexible Ratio".

Coin Marketplace

STEEM 0.21
TRX 0.25
JST 0.039
BTC 95882.33
ETH 3347.19
USDT 1.00
SBD 3.21