Tips from a website designer on posting internet-friendly photographs

in #tutorial6 years ago (edited)

Everyone likes to read and write posts with pictures and photography posts are popular on Steemit. Unfortunately, not many people know what happens when they lavishly illustrate a post with 3 or more photos uploaded from their camera: unless the viewer is on a PC or laptop with a fast internet connection, your post may not load! That is because camera images are usually 3mb or more and this takes time to transfer to a device. On a slow internet connection, this may never happen.

While getting bots to upvote posts is popular for beginners, it's very off-putting to manual curators when a post looks interesting but it takes a few minutes to download those images, if they load at all. We can't comment or upvote your content that way. What will happen if the bot-voting power becomes significantly reduced and you have to rely on people actually viewing the content you post? It is only human curators that will make meaningful comments on your post and become interested followers, not the bots. Steemit is social media and we are here to engage with each other and the images that we post, so superfine detail isn't that important, unless you are submitting to @photocontests, but they have their own way of getting their pages to load fast by using small pictures as previews.

Steemit is still developing the user interface so posting pictures that load quickly remains our responsibility as posters. For most people, the idea of compressing images makes them think of blurry little postage-stamp images like this one I downloaded from pixabay.com and compressed badly:
drop.jpg
Or they think that because they don't have professional tools like Photoshop, it's not possible. This tutorial is aimed at people who use basic jpeg files from their cameras and doesn't require advanced software.

I'm going to give directions on how to use the free image resizing site http://jpeg-optimizer.com/ Just remember, don't click on the ad!

jpeg.JPG

When posting images, it is better to keep them below 100kb. While it sounds impossible to get a 3-5mb image that small and still looking good, there are ways and means:

The first rule is: make a copy of your image. Then you are free to experiment and make mistakes, without making changes that you don't like to the one and only image that you have

Once you have your backup, it's as easy as 1-2-3:

  1. Crop: cut off the parts of the photo that aren't relevant. Your camera should be able to do this for you, look in the options menu.
  2. Resize Photo: For this, go to http://jpeg-optimizer.com/ and upload your image. If you are posting in photography and your image is in landscape orientation, choose 6-800px and if portrait, choose 4-600px. These sizes refer to the maximum width and the image will be scaled proportionately. If you are posting a smaller image to illustrate a story, use a maximum width of 3-400px
    jpeg resize.JPG
  3. Compress Image: You will get substantial reductions of file size without much loss of quality in the 85-95% range. This is when having a backup becomes important, because if you overcompress, that's when images start losing detail. Play around and see what works for you. Also click the "Optimise Photo" button.jpeg compress.JPG

Download your new internet-friendly image. Check your image quality and file-size and repeat the process if necessary.

You're done! Enjoy your new faster-loading posts

Microsoft Office also has fairly good image resizing tools, if you know where to find them. If anyone would like to see a tutorial on using MS Office, please comment below

Sort:  

Congratulations @nikv, this post is the second most rewarded post (based on pending payouts) in the last 12 hours written by a User account holder (accounts that hold between 0.1 and 1.0 Mega Vests). The total number of posts by User account holders during this period was 2929 and the total pending payments to posts in this category was $3084.41. To see the full list of highest paid posts across all accounts categories, click here.

If you do not wish to receive these messages in future, please reply stop to this comment.

Nice information. I have to add: The perfect size for your first picture is 800 x 450 pixels, this way, the thumbnail gets displayed fully. Also, I have downloaded a little programm called FastImageResizer, you can easily drag and drop photos in there and edit multiple items at the same time. This would be the offline solution.

Good tips!

I sometimes use https://tinyjpg.com/ , which does quite good compression without much loss. And as you say, resizing is also important. Blogs are often read on smartphones, so there's no need at all for 1000+ px images. I usually go with something between 720 and 960, depending on the layout of the blog on which I post.

I'll make it point to make my image content below 100kb as per your guide.
Can we also make Gifs with the resizing link you have provided?

No, this one only does .jpeg
Try gifs here https://ezgif.com/

Good one.. also using Microsoft office paint should come in handy too.. I use that a lot.. looking forward to your tutorial on the other tools and hoping to learn a thing or two from you

Paint is a very handy and underrated tool

yeah I think a lot of Microsoft tools are underrated and underused also. but to the few who have uncovered the magic of these tools they know the tools are really handy

Very interesting explanations. Thank you. Will definitely use your recommendations.

Upvoted and resteemed for visibility. Also, tagging @achiron and @mrlightning as they need to read this.

Thank you!

Useful article- what are the optimum image dimensions to display nicely (ie. fill the feed widthways, but not excessively large) for images on Steemit?

i use 840px across.

There isn't an optimal dimension, due to the fact that we don't all access the internet via PCs with 960px monitors anymore and your images will be resized by your browser to fit whatever the screen size of the device is.
If you are just putting in as series of images to illustrate your mostly text post, don't go huge, it is distracting. I recommended 3-400px above.
If you are posting a single or series of photographs, go for 6-800px, which is sizeable but not an overwhelming file size.

CHeers @nikv and @teamhumble- some of the image sthat I have been posting have been pretty big, but very HQ as well, it's a trade- off between load times and happy followers for me. My posts are all about the pictrures.

From an aesthetic point of view, I have it when the edges of the pictures don't line- up in the feed...

I have some doubt but your post all clear. @nikv

regards

Thanks for the tips .......resteemed to extend good info

Coin Marketplace

STEEM 0.29
TRX 0.12
JST 0.032
BTC 59120.07
ETH 2921.92
USDT 1.00
SBD 3.79