Including images in your posts

From Steem Center
Jump to: navigation, search

After a good formating, it is also highly recommended to use images in your posts but Steemit didn't have the capacity of hosting image files until february 2017. Before the feature release it was necessary to upload your image in a third party site like Imgsafe.org or SteemIMG. Then, copy the image link (that usually start with http or https and ends with .jpg, .png or .gif - the most popular image file formats), and paste this image adress in the post (Steemit Submit a Story window) you are editing.

Also, make sure that you are not violating any copyright laws if you are using someone else's material/images. It is a good idea to list the sources and provide credit to the original authors.

As promised in the 2017 Roadmap, the Steemit pictures host limitation changed in february, a free integrated image hosting service was deployed, permitting anyone to drag-and-drop any image on their computer into any post or comment. This feature was announced to be available in Q2 (april to june) but the release happened in february 2017.

Image Hosting Sites

To host the posts' pictures before the upload feature release, despite the Steemit users oriented site SteemIMG, many steemians prefered using Imgsafe.org, where registration is optional, not mandatory. Other alternative was Supload.com, a host and sharing image site that pays bitcoin to registered users acording to their pictures' number of views. More options were Imgur.com, Pictub.club, Postimg.io etc.

Alignments

The default image alignment is on the left, but In the "Markdown" mode option it is possible to align images to the center using the code below:

  • <center>http://yourimage/link.png</center>

Or like floating left or right next to a text. To do that, as explained by @ervin-lemark, you can use these codes:

  • <div class="pull-right">http://yourimage/link.png</div> Left side column
  • <div class="pull-left">http://yourimage/link.png</div> Right side column

Optimal Image Sizes & Resizes

After some experimentations the steemian @pkattera recommended the "perfect" dimensions for the post's main image. Within the main feed on Steemit, this image when presented as a thumbnail should display in full on smaller mobile screens, while the area within the "safe zone" (see the template) should be visible on desktop.

  • 1680 x 1292 pixels, 840 x 646 pixels or smaller images with the same 1.3:1 ratio

And according to @rossenpavlov's tip there is a easy way to resize pictures inside the Markdown editor. He explains that when you insert a image link the editor adds the following prefix:

  • https://img1.steemit.com/0x0/http://yourimage/link.png - where the value /0x0/ render the original size.

Knowing that you can change the value to resize the image replacing the 0s by other numbers of pixels. If the original image is 600x300 and you want to have it smaller to half, the code would look like this:

  • https://img1.steemit.com/300x150/http://yourimage/link.png

You can also specify only the height or width and leave the other attribute empty, and the code will also work.

Mobile App & Chrome Extension

A current feature in eSteem, mobile and desktop application for Steem(it) developed by @good-karma, allow the users direct upload images to Imgur.com that is listed in a gallery where you select to post.

Other steemian, @savandra, annouced in july 2016 a Google Chrome Extension called Steemitor. The idea was to allow users to just drag and drop one image and get ready-to-go picture but the link to Chrome Store is not active anymore.

Links:

Related articles:

External Links

In other languages



Help keep this wiki page updated. Register, click in edit, add or modify the text and save.
If you're already a steemian you can be rewarded with steem, see how in @steemcenterwiki.


Retrieved from "http://www.steem.center/index.php?title=Including_images_in_your_posts&oldid=12569"