Difference between revisions of "Including images in your posts"

From Steem Center
Jump to: navigation, search
(@scrooger)
m
Line 41: Line 41:
 
A current feature in '''eSteem''', mobile and desktop application for Steem(it) developed by [https://steemit.com/esteem-features/@good-karma/esteem-feature-set-7-select-image-my-images-manage-my-images-copypaste-image @good-karma], allow the users direct upload images to [https://imgur.com Imgur.com] that is listed in a gallery where you select to post.
 
A current feature in '''eSteem''', mobile and desktop application for Steem(it) developed by [https://steemit.com/esteem-features/@good-karma/esteem-feature-set-7-select-image-my-images-manage-my-images-copypaste-image @good-karma], allow the users direct upload images to [https://imgur.com Imgur.com] that is listed in a gallery where you select to post.
  
−
Other steemian, [https://steemit.com/steem-help/@savandra/the-easiest-way-to-post-photo-image-on-steemit @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.
+
Other steemian, [https://steemit.com/steem-help/@savandra/the-easiest-way-to-post-photo-image-on-steemit @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.
  
  
Line 47: Line 47:
  
 
* '''Steemit''' : https://steemit.com
 
* '''Steemit''' : https://steemit.com
−
* '''SteemIMG''' : http://www.steemimg.com, created by [https://steemit.com/steemit/@blueorgy/steemimg-com-first-dedicated-steem-image-hosting-website @blueorgy] in July 2016
+
* '''SteemIMG''' : http://www.steemimg.com, created by [https://steemit.com/steemit/@blueorgy/steemimg-com-first-dedicated-steem-image-hosting-website @blueorgy] ''in July 2016''
 
* '''Steemithelp.net''' : https://www.steemithelp.net
 
* '''Steemithelp.net''' : https://www.steemithelp.net
 
* '''@steemitblog''' : [https://steemit.com/steemit/@steemitblog/steemit-2017-roadmap Steemit 2017 Roadmap]. ''January 2017''
 
* '''@steemitblog''' : [https://steemit.com/steemit/@steemitblog/steemit-2017-roadmap Steemit 2017 Roadmap]. ''January 2017''
Line 57: Line 57:
 
* '''@questd23''' :  [https://steemit.com/steemit/@questd23/beginners-guide-on-how-to-post-images-and-video-to-steemit Beginners Guide on how to post images and video to steemit] (video tutorial). ''July 2016''
 
* '''@questd23''' :  [https://steemit.com/steemit/@questd23/beginners-guide-on-how-to-post-images-and-video-to-steemit Beginners Guide on how to post images and video to steemit] (video tutorial). ''July 2016''
 
* '''@blueorgy''' : [https://steemit.com/emojis/@blueorgy/steemit-emojis-master-list Steemit Emoji Master List]. ''September 2016''
 
* '''@blueorgy''' : [https://steemit.com/emojis/@blueorgy/steemit-emojis-master-list Steemit Emoji Master List]. ''September 2016''
−
* '''@ervin-lemark''' : [https://steemit.com/steemit/@ervin-lemark/how-can-you-left-or-right-align-parts-of-your-steemit-article-images-included How Can You Left Or Right Align Parts Of Your Steemit Article, Images Included?]. October 2016
+
* '''@ervin-lemark''' : [https://steemit.com/steemit/@ervin-lemark/how-can-you-left-or-right-align-parts-of-your-steemit-article-images-included How Can You Left Or Right Align Parts Of Your Steemit Article, Images Included?]. ''October 2016''
−
* '''@pkattera''' : [https://steemit.com/steemit/@pkattera/the-perfect-dimensions-for-the-main-image-in-your-steemit-com-post-are The perfect dimensions for the main image in your Steemit.com post are...]. ''December 2017''
+
* '''@pkattera''' : [https://steemit.com/steemit/@pkattera/the-perfect-dimensions-for-the-main-image-in-your-steemit-com-post-are The perfect dimensions for the main image in your Steemit.com post are...]. ''December 2016''
 
* '''@rossenpavlov''' : [https://steemit.com/steemit/@rossenpavlov/easy-resize-images-inside-the-steemit-editor Easy Resize Images Inside The Steemit Editor]. ''January 2017''
 
* '''@rossenpavlov''' : [https://steemit.com/steemit/@rossenpavlov/easy-resize-images-inside-the-steemit-editor Easy Resize Images Inside The Steemit Editor]. ''January 2017''
 
* '''@good-karma''' : [https://steemit.com/esteem-features/@good-karma/esteem-feature-set-7-select-image-my-images-manage-my-images-copypaste-image eSteem - Feature Set #7 (Select Image, My Images, Manage My Images, CopyPaste Image)]. ''January 2017''
 
* '''@good-karma''' : [https://steemit.com/esteem-features/@good-karma/esteem-feature-set-7-select-image-my-images-manage-my-images-copypaste-image eSteem - Feature Set #7 (Select Image, My Images, Manage My Images, CopyPaste Image)]. ''January 2017''

Revision as of 08:59, 27 June 2017

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:

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