Including images in your posts

From Steem Center
Revision as of 11:10, 30 January 2017 by Wagnertamanaha (talk | contribs)

Jump to: navigation, search

After a good formating, it is also highly recommended to use images in your posts but Steemit doesn't have the capacity of hosting image files yet. Now it is 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 will change soon, a free integrated image hosting service will be deployed, permitting anyone to drag-and-drop any image on their computer into any post or comment. This feature is mostly complete and will be available in Q2 (april to june).

Image Hosting Sites

To host the posts' pictures nowadays, despite the Steemit users oriented site SteemIMG, many steemians prefers using Imgsafe.org, where registration is optional, not mandatory. Other alternative is Supload.com, a host and sharing image site that pays bitcoin to registered users acording to their pictures' number of views. Other options are 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 reay-to-go picture but the link to Chrome Store is not active anymore.


Links:

Related articles:

References:



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=1723"