Click to enlarge

[evarburg]

Could someone remind me how to code click-to-enlarge pictures ? Thank you...

[Andreas]

My preferred method:

Code Select Expand


[url=link_to_large_pic][img]link_to_small_pic[/img][/url]


I don't like to embed large images in the forum, since it takes a long time to load, and not everyone (including me) has super fast internet. Uploading and posting both small and large pics is a little more work-intensive, but it keeps the loading times short, and you're still able to enlarge the pics, if you're interested.

[evarburg]

Thanks, Andreas, for the prompt answer. But of course, being somewhat tech-dense, I am not sure I understand where I put that encoding.  Do I add it to the normal one, or do I choose a word in the accompanying text that more or less corresponds to the image and encode it with that URL ?

[Andreas]

Uh, I don't really understand what you're asking here... Maybe I better show you an example. Just press the quote button and have a look at the text and BB code of my posting.



(Photo taken in my garden today)

[vester]

Another way is to add a width or height to the img tag:

Code Select Expand

[img width=640]http://www.ar-media.info/lychee/uploads/big/305d327447307d5f103af7bc6bf64909.jpg[/img]

[Andreas]

This is obviously a convenient method, but if you embed a couple of large pics in your posting, it takes a lot of time to download them, hence I prefer the method described above.

[evarburg]

Hey, two for the price of one !  Thanks ! I'll try that in my next MD entry.

[evarburg]

... or try right now on a mosaic...



OK. not a big difference, but seems to work ! 

Now I suppose it also depends on the size of my saved screen captures ? I'm not absolutely clear on the difference between PNG and jpg (except about the degree of compaction, er...) I don't want to uselessly burden the site...

[mgb204]

PNG files are generally uncompressed and have large file sizes. Whereas JPEGs (JPG) are usually highly compressed, which means they are much friendlier in terms of both storage space and use on the web. Compression is something many people dislike, because there is a loss of quality, but done right, compression doesn't have to be bad. Typically though, you may wish to keep the full-quality original images. Certainly I always do this with digital photos for example. But when sending them to others or uploading on the internet, it's usually neither necessary nor ideal to use them.

Since I know you have access to photoshop, here's how I generally convert my raw SC4 images (BMP) into JPGs with a minimal loss of quality, but very efficient file sizes:

• Open screenshot in PS. These raw 1920x1080 (the resolution I use for SC4) images in BMP format are typically just under 6MB in size.
  
• In the File Menu is an option "Save for Web...". The Windows shortcut is Alt+Shift+Ctrl+S, likely there will be a Mac equivalent.
  
• A new Window appears, select under Preset, JPEG Medium. This gives a good balance between quality/filesize, around 300KB or 1/20th it's original file size.
  
• If you prefer, under Preset, both JPEG and Medium boxes are displayed. You can change Medium to High. Now that file jumps to around 600KB, but it's still 1/10th the original size and unless you are really, really looking, it's unlikely you'd see any quality loss with this setting.
  
  So have a play around with this feature, because I'd highly recommend using it.

[Haljackey]

Every post I make with images uses this setup

Code Select Expand

[url=https://i.imgur.com/CuWUCYu.jpg][img width=1024]https://i.imgur.com/CuWUCYu.jpg[/img][/url]

Click for full size


This accomplishes 3 major things:
1-compresses the pic
2-lets the full size pic display
3-links to the original file source

Hope it helps!

[evarburg]

Thank you so much, Haljackey !

I do indeed keep the raw files (and I realized too belatedly that I should keep them after photoshopping them when I played on a mac -- visible grid etc.) But they are PNGs, not BMPs, as I don't use the SC4 screencapture system but (what I think is) my Mac one  : command+shift+3, which gives me PNGs. Should I assume the process would be the same with my PNGs as with your BMPs ?

Also my resolution is not as high as yours for some reason (I've forgotten why, I confess) higher resolution don't seem to work on the partition ; and I can verify that because my borked SC4 is non functioning at the moment).  This (below) is what I get from an original 1024x768 png, following the process you indicated :



It seems to be the same picture as the source, is that normal ?

[Andreas]

Both PNG and BMP are lossless (other than JPG), so you can use either of them. BMP is an old Windows-based file format, uncompressed and hence probably even larger than PNG. The in-game screenshot function produces PNGs, too.

As for the size of the pic that you just uploaded, it looks like your Mac's screen resolution is 1024x768, so using 1024 in the "width" tag won't do anything when clicking, other than opening the very same pic in a new tab. Try 640 or 800 for a notable difference instead.

Have another look at my snowdrop example, the big photo is 1980x1285 pixels and about 1 MB large, while the small version is only 800x535 pixels and just a few KB, so it loads basically instantly even with a slow internet connection, while you're still able to admire the full resolution after clicking.

Again, adding a width tag to the link doesn't make the pic smaller, but just displays it smaller in the browser, with the ability for clicking it to enlarge to the full size. The browser still loads the large size, though, and when you post like 20 pics in a row, the browser has to download some 20 MB everytime someone visits your thread.

It gets worse when there are several posts with large pics in a thread; sometimes, it takes me some 2-3 minutes to load everything (including everything that I've probably seen already, but isn't in the browser cache anymore), which can be quite annoying. Embedding small pics that weight just a few KB and adding links to large version avoids all those troubles.

[evarburg]

Ah, it's even clearer now (when I said I am tech-dense, I was not kidding !). I now understand why in my "template for CJs" of long ago I had those [img width=800 height=630] samples. I used to know all this. Sigh. OK, so now  I will check the resolution of my screencaptures, and I understand how to process them. Profused thanks and apologies (to the website and DLers) for the heavy ones !