Image posting etiquette and "How to's"

Just what it implies.
Post Reply
User avatar
Zubie
Posts: 5221
Joined: Mon May 05, 2008 2:03 pm
Location: Orion arm of Milky Way Galaxy
Contact:

Image posting etiquette and "How to's"

Post by Zubie »

I've been meaning to post this note for quite a while (I had cleared this with onezero sometime back) but only getting around to doing this now.

As people here may recall, SM's forum was not always friendly to inline image posts. Given that during the early years of the internet downloading could be a slow process this was reasonable. Since then higher bandwidths have made this less of an issue. Bandwidth, though, can still be a problem. Why? Bandwidth may be shared within a household resulting in competition with others (remote work, streaming, other browser tabs, etc). Another is that many people forgo the complexity of hardwiring and instead opt for wireless networking which can be subject to RF interference, weather conditions, obstacles (walls & partitions), and distance from the router limiting effective bandwidth. Some people may have data quotas or costs (although many services are quite generous about that nowadays).

So, when linking to images inline (SM forum doesn't host images), one should consider limiting the size of the image(s) to make downloading less expensive (all rendered data on a browser is always downloaded). Moreover, because of how images are rendered in both the browser and this forum there may be no real value in posting a very large inline image (i.e. >1000 pixels in dimension), or even necessarily with very high quality. The reason is that in the case of the former, the forum adjusts the rendered size to fit about 80% of the user's screen. So, an image that is 3000 pixels across could well appear at about a third the original size (given screen resolutions set around 1200). This is probably even further reduced for smaller tablets and phones. Unfortunately the entirety of the image will still be downloaded for the browser to render the resized image. End result, you pay full bandwidth price, but only get a fraction of the image's data value. With regard to the latter quality issue, browsers could render the image at reduced quality as an optimization regardless of the original. After all, your browser is not Adobe Photoshop. Again, you still download all the data anyway.

What should one do to improve the experience of someone seeing your build post with 10-20+ pics? Aim image sizes to be considerably less than 1000pixels. For instance I have a fairly large monitor and my resolution setting is at 1280 width because anything larger and the text is just too small. I suspect this may be common for a lot of us. If the forum will at best hit around 2/3 that size, the image will render around 840 pixels. For standard picture ratios, that's a width of around 558 - round it to around 800x500.

Let's compare sizes of an 800x500 vs 1600x1000 (same ratio)
800x500 = 400,000 pixels, 400,000 pixels at 4 bytes/pixel (1b/RGB+alpha) = 1,600,000 bytes = 1.6Mb
1600x1000=1,600,000 px, 1,600,000 px x 4b/px = 6,400,000 bytes = 6.4Mb
Note, because we are dealing with areas, changes are geometric and grow by the square of the change - dimension changed by 2, but memory changed by 2².

Many forums actually specify that inline images not exceed 600x400 (6x4 being a standard photo ratio). At 4b/pixel, that's 960,000b or .96Mb, so around half that of an 800x500 image (decreases are geometric as well). Now admittedly, imaging formats such as jpegs use compression algorithms so memory usage varies, but it does reflect the relative data differences at these scales.

Unfortunately our phones or digital cameras that photograph our stuff are set for large high quality images, often in the 2000+pixel range. What to do then? Well, most cameras and camera apps allow one to choose how big an image is going to be. Choosing one closer to the 600x400 range will get your image into that easier to download range. Note one 2400x1600 is comparable to sixteen 600x400 images.

Another possibility is to use photo imaging software to reduce images to a smaller size. Hosted images are normally jpg's, or png's which can be quality controlled reducing their size with software as well. For technical reasons, photos and images with subtle shadings and color variations (such as textured 3d artwork) should be done as jpg's. Personal experience is that even rates as low as 75% quality rating for jpegs still render fairly well.

You may ask though, "What if I want to make highly detailed images available to the forum?" Well, this is still possible, you just don't have to make them inline. Let's say you indeed have great images of highly detailed studio models from an exhibit. Sure, you could just put the hyperlink, but you could also attach those to a thumbnail. That admittedly is more work, but consider this quick example below.
Image
That is done using the following code:

Code: Select all

[url=http://starshipmodeler.com/2001/ori1_jp.jpg][img]http://starshipmodeler.com/2001/tn_orion.jpg[/img][/url]
(note the above is based on the availability of these images at starshipmodeler.com at the time of this post)

Since the fact that the image has a hyperlink isn't always clear, I personally often put little ascii arrows to more clearly indicate that
->Image<-
The neat thing about that is that the inline thumbnail is considerably smaller (150x105pixels) and low quality yielding a size of 4.5Kb. The linked image is 52Kb or around 10 times bigger (actual size is estimated). Thumbnails can clearly show the images you are talking about allowing the reader to decide whether or not they should look at the detailed, hi-res version. One can easily post 20+ of these for the same bandwidth of just one 2400x1600 size image.

I'll post a secondary posting detailing the mechanics of doing thumbnails and links as this post by itself is quite long. Hopefully this will help some of you to make more easily viewed posts and less afraid of dealing with large images - i.e. there's a way of posting them without making reading the thread a burden for the forum readers.

P.S....is there self interest. Yes, my wireless router is behind my living room chimney firewall and when it rains I sometimes get barely 1 bar on this thing.
---------
p.s. edited for orion image sizes. Rendered sizes are actually fairly large due to decompression. The actual files may themselves be quite small. As a result I can only estimate the original sizes, but the ratio of approximately 10:1 for the original vs. the thumbnail is probably right.
Last edited by Zubie on Sat Jul 16, 2022 1:47 pm, edited 3 times in total.
La maquina sobre mi escritorio es una "computadora" del latin "computare", no un "ordenador". El estado de mi escritorio afirma eso. (yo/me)
User avatar
Zubie
Posts: 5221
Joined: Mon May 05, 2008 2:03 pm
Location: Orion arm of Milky Way Galaxy
Contact:

Managing large images (Re: Img etiquette)

Post by Zubie »

Understandably, as mentioned in the previous post, forum users may only have large images to deal with. Understandably if you have already uploaded a large image to an image hosting site, its way easier to just link to that image in your post using the "img" bb tag (see the "pic posting instructions" thread in "Important Site news"). You can also use a thumbnail of an image with a link to show what your large image looks like without requiring the browser to download the big version (see previous post)

Many image hosting services will automatically generate a thumbnail for images you upload, if for no other reason than to to use in their gallery/album page. For instance my flickr account generated this image automatically
Image which is a thumbnail of this larger image which I did upload to the site.
Similarly the site I used most often for bulletin board posts (imgbox) automatically generates a square thumbnail for every image you upload
Image which was made from this larger image.

Different services will do this differently. For instance getting the thumbnail out of Flickr isn't quite straightforward but do-able. This is understandable since many services are ad supported and they would prefer you to go to the image page rather than just the image. If an image hosting service doesn't provide thumbnails as an additional feature, try right clicking on the thumbnail visible in their gallery views. You may get an option to open the image on another tab or copy the image's URL. I suggest viewing the thumbnail to make sure it actually is a thumbnail. Some sites may just show you a smaller rendered version of the actual image (imgur does this - while thumbnails are generated, most views load the full size image rendered small - right click functions are limited).

How easily you can do this depends on the image hosting service you use to post. A fellow user here used imageshack and I noted that their image site actually provided links for a small, medium, and original size version of their uploaded images. It's unfortunately up to you to find the image sharing service that best does this for you.*

What can you do if you already have a service that doesn't do this (like imgur). Well you could upload a thumbnail and a full size version to your host site. I do this on my blog which can serve as an image host of sorts. It's kind of dumb, but it sort of works.

Resizing images requires using image editing software. Some hosting services can do this online. Other software might come with your digital camera, scanners, or as part of your operating system. There are commercial solutions such as Photoshop, or freebies such as Gimp or Krita.

When using image editing software for posting smaller, less memory intense images on bulleting boards, you need to consider a couple of things. First is format. The web really only supports JPEG (Joint Photographics Experts Group), PNG (Portable Network Graphics), and GIF (Graphics Interchange Format).** JPEG compresses image data to generate less memory intense images in return for a marginal loss of quality (lossy). PNG and GIF use different mechanisms to compress data without loss (PNG is in some ways better than GIF, but GIF remains as it supports short looping animations). The nature of the data compression in both systems makes images that are photographic in nature or those that contain many subtle colors and shading better off as JPEGs. PNGs and GIFs work better in well delineated graphics with few colors such as logos, emblems, charts, and such and where invisibility is necessary (JPEG doesn't support that). As noted, JPEG is a lossy image format - the lower the quality of the image, the worse the image will look (typically it appears as blocky regions of the same color). On the other hand, you may often find memory savings by lowering quality of images down to 70% and still have reasonable images. Normally the option to manage JPEG quality comes up automatically when saving the file.

Consider the following JPEGS generated at 90%, 70%, and 60% quality values
ImageImageImage
The images are roughly 90Kb, 53Kb, 46Kb respectively. As you can see, just controlling the quality of an image can reduce its bandwidth considerably without really losing much. Now, "your mileage may vary" as it is often said. How well and how much the data in a JPEG compresses depends on the number of colors and how they vary over areas of the image. Still, the 60% version captures a lot of detail at just shy of half the size of the 90% version. Admittedly zooming in to around 400% will make the differences more apparent as details originally only a few pixels in size become fuzzier or disappear.

I hope these two posts will help in posting easier to read threads as images become less of an issue to load. Admittedly for those with very large bandwith service this is not that critical, but those of us on more limited services (or just plain clunkier machines) will appreciate this :)
----------------------------------
*Choosing the right image host service for bulletin boards can be hard, particularly if you are looking for free hosts. Some support holding your images, but not posting them on forums. Some may allow free storage, but not if you want to post on a forum (like photobucket...not on my recommend list). Others make a fair bit of money off shall we say NSFW forums so advertising there may be an issue even if your pics are not. Getting hosts that allow direct links to images can help with that problem. Some allow for no registration posts like Imgur, and they'll keep the image up for either a limited time or for a limited time if not visited. Given the transient nature of posts around here, this is not a bad option (again getting thumbnails from them can be tricky). I suggest a search for "free hosts" or the Wikipedia page on image hosting services is not a bad place to start (https://en.wikipedia.org/wiki/List_of_i ... g_websites [sorry run out of available urls links/per post]).

Since many people have Flickr already, I'll follow this up with a post for Flickr's bbcode share feature to make nice links to things there and more understandable for services that provide ready bbcode for forums.

**Many cameras and scanners will generate TIFF formats natively unless specified otherwise (Tag Image File Format). These are high quality and thus very large memory formats. While some browsers will support this, it isn't universal and will be a fat file to download. Similarly, image editing software will have their own preferred storage format (generally non-lossy). Again these are rarely supported outside of their software such as GIMP's XCF or Photoshop's PSD. To get the file stored in the right format you may need to use an "export as" function rather than a "save as" function.

P.S. A thing to note is that image hosting services, particularly the free ones, can change and go away. Those of us who started on Photobucket can attest to how aggravating that can be. You may find one that works now, but in a couple of years changes in ways you don't like or worse disappear taking your pictures with it. If you care for the images, keep copies for yourself - Don't trust the cloud (glowing or otherwise).
La maquina sobre mi escritorio es una "computadora" del latin "computare", no un "ordenador". El estado de mi escritorio afirma eso. (yo/me)
User avatar
Zubie
Posts: 5221
Joined: Mon May 05, 2008 2:03 pm
Location: Orion arm of Milky Way Galaxy
Contact:

How to get a thumbnail from imgur

Post by Zubie »

As mentioned earlier, for some reason imgur doesn't really show you thumbnails or show you how to get access easily. Imgur does actually generate these, and in a variety of sizes. It took a bit of hunting, but I found the code suffixes they use on images to denote the different sizes.

s = Small Square (90x90)
b = Big Square (160x160)
t = Small Thumbnail (160x160)
m = Medium Thumbnail (320x320)
l = Large Thumbnail (640x640)
h = Huge Thumbnail (1024x1024)

Now, I'm not sure how these behave if the image is actually smaller than the sizes specified here, but an interesting thing is that outside of the "square" definitions (s & b), the thumbnails themselves will keep the proportions of the original maxing out at the set size. This means if the image is wide, with the "l" suffix it will not be more than 640 pixels wide. Conversely if it's taller rather than wide, it will max out with a 640 pixel height. The square ones will make a strictly square thumbnail that maxes out on the smaller dimension: the image will scale to the smaller width or height and crop the longer dimension accordingly to make it square.

So an image originally called stored by imgur as 5SPmV2d.jpeg
can be rendered smaller if you add "m" to it, as 5SPmV2dm.jpeg

At the time of this posting, forum poster Rondie was kind enough to provide a link to one of his pages as an example: several images of a Romulan D'Diridex warbird.
Imgur renames uploaded files with a alpha-numeric file name, in this case it's 5SPmV2d.jpg and it's big; 4000x3000 pixels
https://i.imgur.com/5SPmV2d.jpeg
If I add an "s" to the address, ...i.imgur.com/5SPmV2ds.jpeg
Image
Now, the original image wasn't so bad, 1.1Mb, however the thumbnail above is just 3Kb, or just 0.27% the size of the original or roughly 370 of these thumbnails are about the same as one of the original!
Adding an "m" ...i.imgur.com/5SPmV2dm.jpeg
Image (15.6Kb or 1.4% size of original)
or an "l" ...i.imgur.com/5SPmV2dl.jpeg
Image(43.3Kb or 3.9% the original)
Even the huge option (use the "h" suffix) for 1024 maximum dimension in this case yields a file that's only 90.2 Kb which is still considerably smaller than the original (8.2%), but keep in mind, a 1024 pixel wide image might not appear 1024 pixels wide on some people's displays.*
Image which is approaching about a tenth of the original, i.e. 10 of these are about the same as one of the original.
If you add the bb code for links you can then just link the small inline image to the full sized version of the same
Example using 'b' suffix (large square)

Code: Select all

[url=https://i.imgur.com/5SPmV2d.jpeg] >> [img]https://i.imgur.com/5SPmV2db.jpeg[/img] << [/url]
>> Image <<
Ok, that was pretty simple eh!
----------------
p.s. information ref for this post can be reviewed at the bottom of https://api.imgur.com/models/gallery_image
p.p.s. these suffixes can be used by people who want to download specific sizes of an image directly, particularly for apps that will open images directly from a web location
La maquina sobre mi escritorio es una "computadora" del latin "computare", no un "ordenador". El estado de mi escritorio afirma eso. (yo/me)
Post Reply