Jump to content
Tirloque

Storytellers - Image management tutorial

Recommended Posts

v 1.2 (08-2018/11-2020)

 

Storytellers Image Management

 

 

Greetings, fellow story tellers !


In this guide we're gonna review the basics and tips about image management in stories. Images are the core media for most of our stories, if not the only one for comic writers. Managing them correctly or incorrectly will thus affect quite a bit the readability, accessibility or even the durability of your blogs. Thus, if the most seasoned of us will only find a handful of details unknown to them, those of us which are beginning to write or only getting the hang of it might benefit even from the basics.


So, let's start from the beginning...

 

 


I - Image format & compression

 

 

A - Compressing images

 

Spoiler

First thing you'll have to do when sharing an image will be to choose its resolution, and its format. An image format, is a way to encode it in order to store it to be readable later. There are four main image formats, or compressions that you should know about :


1 - BMP (Bitmap) 

 

Not the oldest image compression format, but almost. Bmp images aren't raw, but almost, and as such are nearly uncompressed. That implies that this format is lossless (the stored image will be identical to its source), but also that it takes a lot of storage size (nearly maximum size in fact). As the codec is very simple, that comes with another advantage : compressing an image in .bmp is very simple, and can be done in the blink of an eye without inflicting significant load on your processor.

 

So, BMP is an ideal format for captures/screenshots, as they are lossless, and the low strain on your system will minimize the possible losses when taking a lot of screens at the same time.

 

2-  JPEG (Joint Photographic Expert Group)

 

One of the most effective compression formats, depending on the quality you want you can get either images of a minimal data size, or images nearly identical to source to the human eye but with reasonable data size. That makes it the best format for exporting images on the web, as you can minimize the size/load on servers while still having satisfactory quality. But "nearly" identical isn't "identical", even if you won't be able to see them on the jpegs of an experimented user, there are data losses. That implies you shouldn't use it as "work"/editing format (when you photoshop an image for example), and not too much for storage (although it's okay to do it with presets ≥ 95% quality).


Malicia : « It's a very good format ; otherwise experts wouldn't use it, you see ? Use it too ! :classic_lightbulb: »


My advice about tuning is the following, depending on what you want :

 

  • Max quality : presets 100 to 95, 95 being the preset where the differences compared to original won't be noticed by the eyes in most cases. There are exceptions (some images are harder to encode), which is why quality presets above it (96-100) can be useful.
  • Medium quality : compression presets from 94 to 90. Gives smaller image size than preset 95, but trained eyes will start noticing differences.
  • Low quality : compression < 90 quality preset. Do NOT use for stories.  Sure images will load faster, but your images will be visibly damaged, and the more you compress the more untrained readers will notice it.

 

If you do use such low quality presets you'll get artifacts such as :

      - Macro-blocking : some areas with subtle details will transform into tiny squares, as it's more simple to display a square than smaller details.

      - Aliasing : round edges will become jagged, creating a "staircase effect" instead of a clean curve

      - Ringing : small ghosts of lines or curves will appear around the edges of the elements

     
 All of those will be particularly noticeable on red elements. In the example below (sorry Tex but it's for your own good ^^) we've got 1280x720 jpeg which is 31 ko large... That's 8x smaller than a preset 95 jpeg, so it's wayyy to compressed, which produces visible artifacts (I've enlarged 2x the artifacted area, but with a good screen it's noticeable as is) :



 

tumblr_pah35k9TgU1vjeamqo8_1280.jpg
 


Hopefully, there is hope for Phoenix, as we can (and should :classic_angel:) use jpegs with superior quality presets. Below are three versions of the same image, only difference being their compression : a PNG (same quality than original image), a poor quality (≈preset 35) JPEG, and a high quality JPEG (preset 95). Will you guess which is what ?

 

tumblr_pah35k9TgU1vjeamqo1_500.jpg

tumblr_pah35k9TgU1vjeamqo3_500.jpgtumblr_pah35k9TgU1vjeamqo5_500.png

 

Spoiler

top = bad quality jpeg, bottom left = high quality jpeg, bottom right = png.

 

You'll notice that the differences between the high quality jpeg and the png, if you see them, require some attention to spot : a less defined fringe of hair in her forehead, a slight blur in the left eyebrow outer area, a crispness loss in the freckles. What you must retain from this, is that  most people won't see the difference between a good jpeg and a png provided they haven't got the source under the eyes.
So JPEG should be your go-to image choice for story publishing, but only high to medium quality !


Malicia : « We're very sorry Phoenix, because you're very nice, and very pretty. But it's only the photos, you see ? You should spank Tex in the bum until he learns, yes. :classic_sleepy: »

 

 

 

3 -  PNG (Portable Network Graphics)

 


One of the most popular lossless compression format : the images you'll get from PNG will be identical to the source, while eating roughly 50% less data size than bmp (with preset 9/max compression PNG). That makes it an excellent choice for storage, as you won't lose any data but will still save some place compared to BMP.


Why then shouldn't I use only PNGs, will you ask me ? Because size does matters (even if Malicia would say the contrary) : even if twice smaller than BMP, PNG images are still 2x to 8x larger than quality JPEGs. Meaning, that if you got 200 images to load, it will take much longer with PNGs, and with a 300 Mo load per user some busy servers will stop responding half-way. Leading to entries incompletely loaded, and broken images. Like this :


tumblr_pah35k9TgU1vjeamqo2_1280.jpg


This is an extreme case though, in most cases it should just cause long loading times and discomfort to the reader.

Anyway I would NOT recommend PNG for web sharing/stories. Nor for capturing either, as max compression takes a certain load on the processor (contrary to BMP). But PNG for storage ? Hell yes ! And also in the case of images with transparent areas, as JPEG do not feature transparency. Also, if your imagehost happens to recompress JPEGS (which means you have no control over quality), then 1280x720 (or lower) resolution PNG can be acceptable (though unoptimized). 

 

 


4 - GIF (Graphics Interchange Format)

 

Average performance compression format, but has a perk : it can feature sequences of images, which allow users to create video-like images, with moving parts. One warning though : it's not exactly effective at video handling, and will produce much larger data size than what the best current video codecs would achieve. And also, won't feature sound. However it does also feature transparency, including in animated gifs. So use it for animated sequences, provided you keep they small enough not to need videos.

 

 

 


TL;DR :

- Capture/Screens -> BMP

- Web upload/Stories sharing -> JPEG quality 95 to 90

- Storage + transparent images -> PNG

- Animated -> GIF

- « Malicia -> Neat and pretty »

 

 

 

 

 

B - Choosing a resolution and a software

 

Spoiler

 

Image resolution is a matter of choice. The higher it will be the more detailed the image will get, and the more "filling" it will be for users' screens ; but also the more space it will take on final data size. So it really depends on your preferences and objectives. Some advices though :


— Standard resolutions are recommended, as the systems of the readers will have less trouble resizing it and you'll have a better idea on your screen of what's displayed on the one of others : 1152x648, 1280x720, 1366x768, 1600x900, 1920x1080 are some examples.

 

— Use of 16/9 aspect ratio is also better, as most screens are natively 16/9 nowadays

 

— Resolutions lower than 1280x720 will feel a bit small. They're still useful, but rather for miniatures than for a "main screen" display.

 

— Resolutions higher than 1920x1080 are overkill, as standard HD monitors' resolution is 1920*1080 and a lot of forums do resize images exceeding a certain width. You can still use 3840x2160 images if you want, but aside from eating 8x more bandwith they won't look better than 1920x1080. In fact they may even look worse as they will undergo an on-the-fly low quality resize by viewers' system instead of just being displayed as is.

 


Now, how do I do that, will you ask me ? Well with a good image compression software. It so happens that there is a good freeware that does all that, and even allows you to to it in a « batch » way, to resize/compress hundreds of images in one go : Irfanview.


To batch compress :

tumblr_pah35k9TgU1vjeamqo6_1280.jpg

0 -  Open an image with Irfanview, select "file", click on "batch compress"


tumblr_pah35k9TgU1vjeamqo7_1280.jpg

1 - Select your images in the right top window

   - Drop the ones you want to compress in the bottom window

2 - Select the compression format you want (for sharing -> jpeg)

3 - Adjust the compression preset (quality 95 here)

4 - Select the directory you wanna get your compressed images in (I suggest it being a different one than the original, makes them easier to sort)

5 - Malicia : « click on the batch button, and then sit on your chair like an expert... :classic_cool: »


It's also a very lightweight viewer, so if like me you end up using it everyday, consider supporting the author.

 

 

Of course there are some alternatives :

  • Photoscape : a relatively lightweight editor, but which allows more editing than Irfanview, in particular regarding adding text or even speech bubbles (credits to Alter Native for the tip).
  • The Gimp : not exactly lightweight, and primarily an image editor, but has a batch utility.
  • Photoshop CC : same than Gimp, it's more an image editor than a compressor, but features a batch utility. However, unless you're a student, it's not exactly free ; so it might be better to use a one time buy version as an editor (like Photoshop Elements) and another software for compression.

 

 

 

 


II - Image hosts

 

Spoiler

 

 

We're on LL, so whether because of their violent or sexual content, that implies our stories are aimed for a mature, adult public. And it so happens that not all image hosters do allow adult content. So you have two solutions here :

 

— Either you infringe their terms and agreements, upload anyway, pray not to be noticed and discover one day your images are gone. Doesn't seem that good of an idea. :classic_angel:

 

— Or, you just upload on image-hosts allowing adult content.

2019 updated list, with "terms of use" verified to allow adult content :

 

  • ImgBox : slow and with average ergonomics, but so far quite reliable.
  • ImgBB : no problem so far.
  • Pixxxels : Postimage's adult version. They tend to recompress hotlinked jpegs to save bandwidth though (which may reduce displayed quality) ; but they proved to be open to feedback on some aspects.
  • FlickR : used to be a quite reliable contender, but limited its free accounts to 1000 images each, which makes between 20 and 6 entries depending on length/style. So it's not enough to develop a full blog upon it, unless you're willing to go for a paid pro account (50$/year).

 

Some image hosts do allow adult content, but are NOT recommended for LL :

  • Loverslab's filehosting function : LL can be used as a file-hoster, and thus as an image-host within the forum. There are some limitations that make this a bad idea for regular storytelling though :
    • the size limit (50 Mo per entry).
    • the downsizing : just like Postimage, hosted jpegs will recompressed, and their displayed width limited to 1200 max, inducing a significant quality loss (since v. 4.4.7 of the 2019-10-05).
    • the slowdown : the site already suffers from access times which can be longer than 1 000 ms, so loading its bandwidth even more could worsen that.

It is also possible that some data might be lost in case of buggy update, or if the site moves from one  software provider (IPBoard currently) to another. It might still be an option for low to medium res PNG stories (1280x720 max, PNG isn't suited for sharing higher resolutions).

  • Imgur does allow some sexual content, but does blocks hotlinking to any adult site, including Loverlabs. So if the reader haven't the images already in his cache or certain workarounds installed, he just won't see the images. Needless to say, don't use it for LL stories !

 

Some imagehost do NOT allow adult content anymore :

  • Postimage used to allow adult content, but then forbid it and moved that activity to their newer site Pixxxels. Being there since 2004, multiple issues arose in the past, such as being down for extended times, being locked by registry (thus forcing its users to manually update all of their images urls... ?), reducing images' quality by recompressing jpegs being linked, and even temporarily blocking LL. However they also proved to listen to some of their users' feedback, and have a very functional interface. So for those of your entries that won't feature full frontal nudity, they're still an option. However, for entries bearing medium to heavy adult content, they should be considered as not allowing adult content, and avoided.
  • Tumblr : will not allow adult content to be published (since December the 17th of 2018). That being said, they did not announce they would delete said content. So while it is unsafe to use Tumblr to host newly created adult content, the works that were uploaded beforehand can still be hotlinked (accessed from another site), just as it used to be (limited to 1280x720).

 

In a way, blogging is like sex : it better when it's safe. Keep that in mind when choosing your imagehost. ^^


 

 

III - Posting on the forum/Blog

 

Spoiler

 

And finally some tips to get a better display of your wisely compressed and freshly uploaded images :

 

 

 a - Full width

 

To get an image to use all the width available on your blog's page, you musn't use the inbuild image insert function, but code it manually :

1 - type this code


[img]

2 - Type this code right afterwards


[/img]

3 - Paste your image's url inbetween the two codes you just typed. In case you don't know what it is, go to your image host, click on your image => share => direct link.


https://s25.postimg.cc/ck8h9kren/Team_Wanderers.jpg

4 - Enjoy your max width image :classic_cool:

Team_Wanderers.jpg

 

 

b - Centered images

 

Just click on the code you just completed, then look at LL's posting menu and click on the center icon (the 4 horizontal bars).

 

 

c - Make a header

 

With LL's 11-2017 going to IPB came the headers, special images dedicated to get displayed at the top of a blog page (hence the name), or in LL's main blogs page. Though only being a graphical way to announce an entry, keep in mind that a header attractive to the eye will be attractive to the mouse as well, and bring your blog more views.

 

Their specificity is that they're designed to be displayed on the top of a web page, and so to take less height in spite of filling the same width. So their aspect ratio will be larger than the norm (which is typically 16/9 =  1.78). For headers, that aspect ratio goes between 2.5 and 2.9, depending on if you want to be optimally displayed when being part of the two top blogs featured by LL's main page, or if you want it to look better afterwards.

 

With IPB 4.3 and higher, to select a header :

  1. go to your blog entry page
  2. click Edit
  3. Nearly at the bottom of the page, click on « Choose Single file » and find the image on your hard disk drive :

HeaderImageTutorial1.jpg.aaca0444d2bbfd9fdc877dab3d778bd3.jpg

 

    4. Select your image by manually browsing your files (don't drag & drop), then click Open :

HeaderImageTutorial2.jpg.dd33c58b15ceddb03d7186e9b1ef7789.jpg

     

      5. Wait for the image to upload, and then click Save on your entry menu :

HeaderImageTutorial3.jpg.715ebce54ccbd5dd93c606a977689cd6.jpg

 

 

There are three ways of doing a good header :

 

  • The simple way : get a 1920x1080 screen, but make sure that the part you want to get displayed is in the 700 pixels of the middle of image's height. It's the headers's for dummies way, but keep in mind that it forces the system to load a fullsize image whereas only a part of it will be displayed, so it "wastes" some bandwidth even with JPEG. 
  • The optimized way : just crop the image 1920x1080 in order to get an aspect ratio between 2.5 and 2.9. That should give you a more optimized 1920*700 header, but you could perfectly go for 1600x640, 1600x550 or others custom resolutions. The keys are to maintain aspect ratio in the desired target, and not to reduce too much the height as images with less than 400-450 height will not look good on large resolutions/fullscreens displays. Optimized default method (no wasted bandwidth if using JPEG).
  • The template way (Alter Native's method) : a bit more advanced, you create a psd 1920x1080 image, and within it a "guide" layer covering a 1920x190 band at the top of the image, and a 1920x190 band at the bottom. And when you need to create a header, you can just paste your image below the guide bands, allowing you to customize its center easily. Then you just crop the part of the image that isn't covered by the bands, paste it into a full width blank (with empty areas) png, and boom, you've got your reader. For reference, Alter native use 1600x900 base resolution, which would translate in 1600x140 guide bands, and a 1600x620 final header. It's probably the fastest way, yet it forces you to use PNG.

 

Some example of headers :

 

1711154287_HeaderCema-LL.thumb.jpg.5f8d7a53c9e757821038ebcf4c5dfe83.jpg

 

1878947183_HeaderTirloqueLL.thumb.jpg.d0e8f240c73ffcec19b87c79de307c12.jpg

 

119774593_HeaderAlterNativeLL.thumb.png.38890e9072b2ffe3b44ac67caab1521d.png

 

 

d - Save your entry

 

It so happens that image hosts aren't always reliable over the years. One of them (Postimage.org) got locked by registry, and forced to move to Postimage.cc. With the old LL bbcode correcting the broken urls it created would have been a matter of seconds for each entry. But now, the IPB forum engine just eats the code on the fly and just displays something you can't correct. That's why I do advice you to save your entries's code :

  • Before cliking on the « Save/Publish now button » if you type type directly on LL. To save all the code (ctrl+A -> right click-> copy) of the entry into a txt file that you'll keep nice an warm in your computer.
  • Or, if you're already familiar with the code, by typing them directly on a notepad txt file, and then copy-pasting the thing on LL.

That way, in case something happens, you can still correct your code directly like an expert a pro.

 

 

e - Save your stuff -

 

It may seems obvious to some, but as some blogs were still lost, it apparently isn't to everyone. You've invested time and work in your blog ; thinking the script setting your game/ENB right ; getting the poses, lightning and angles for the perfect screens ; the text right and even putting it in comics for some of us. So don't let it get lost just because you didn't though that that site, that image host, that disk drive wouldn't be safe forever : save your data !

 

Rule of the thumb of backing-up is :

  • Having at least two copies of your data at all times. Data includes the originals (PNG or BMP images), and your text.
  • On at least two different media/supports (for example, one copy of your main computer HDD, and one on an external HDD). And the more different/apart the medias/supports are, the safer it is (for example if your external HDD isn't on the same wall outlet than your computer, but unplugged and stored somewhere else when not being in use, it won't be lost in case of thunder/surge damaging your main computer).

 

That way, if something happens, you'll never lose more than one copy at a time. Which will allow you to backup it once again, and thus virtually never lose your data.

 

  • Also If you do use a Cloud, don't forget to save the key elsewhere than on your main computer, otherwise the loss of the latter would lead to the loss of the backup simultaneously. 

 

 


This guide should have answered at least some of the hardships a LL graphic storyteller may encounter. However, if you have still some questions regarding image management, or just want to comment or feedback, you're welcome.

 

 

 

 

 

 

 

Share this post


Link to post
Guest

Useful as fuck xD 

 

Everyone should read this ^^^^

Share this post


Link to post

Great job, this is really helpful.

I'd like to add a couple of things,

- You can batch process in gimp to resize images or change the format.

- For me .png is approximately 1.5-2 times larger than quality .jpg, not sure if your 6-8 times is accurate in most cases.

- For adding subtitles I recommend photoscape as it is super easy to use and do small edits like adding subtitles or speach bubbles.  

Share this post


Link to post
15 hours ago, Alter Native said:

Great job, this is really helpful.

I'd like to add a couple of things,

- You can batch process in gimp to resize images or change the format.

- For me .png is approximately 1.5-2 times larger than quality .jpg, not sure if your 6-8 times is accurate in most cases.

- For adding subtitles I recommend photoscape as it is super easy to use and do small edits like adding subtitles or speach bubbles.  

— Thanks for the Photoscape alternative (*ding* :classic_laugh:). It seems like comparable to Irfanview in terms of utilities, with the possibility to add text. I'll add it. I also not gimp, though I didn't exactly consider it as lightweight viewer. :classic_blush:

— About how much PNG are larger than JPEGs, it depends on your preset and the efficiency of your software. If you right click -> information on the Phoenix portraits you'll see that the quality95 JPEG is 47 ko, vs 350 ko for the PNG (and 12 ko for the quality35 JPEG :classic_angel:). 350 = 7 x 50, so we're roughly in the range I gave. Please not that size does change quite significantly with even +1 or -1 preset, and that's why with at 100 quality JPEG you can indeed end up with sizes "only" 2x smaller than PNG.  :classic_smile:

 

17 hours ago, Agent Tex said:

Useful as fuck xD 

 

Everyone should read this ^^^^

Thanks Tex. I hope you don't mind I used Phoenix as model for my tutorial, but her skin being so hard to compress she was the ideal candidate. :classic_blush:

 

Anyway, I got the opportunity to explain myself more clearly and to give a step by step procedure ; so I hope you'll retain some useful tips for your future entries. Or maybe use it to remaster your Postimage affected entries, if you've still got the source PNGs ? Smiley_ayuluna_HFR.gif

 

15 hours ago, The Gauntman said:

Thank you for this. 

14 hours ago, Elf Prince said:

Excellent. Thank you.

13 hours ago, ther1pper said:

Awesome, thank you for making this.

Thank you for such a good reception, fellow storytellers ! It warms my storytelling heart. :classic_biggrin::classic_wink:

 

 

12 hours ago, donttouchmethere said:

thx, now i learned why my posted test pics are so pixelated ?

If you learned something then I've met my objective. Thank you Dontouchmethere. :classic_wink:

Share this post


Link to post

I think the fact I've never really noticed a quality reduction on my pics posted at postimage means my work isn't to be considered "quality-sensitive".  I knew this already but it's nice to have it reaffirmed.

Share this post


Link to post
7 hours ago, Jexsam said:

I think the fact I've never really noticed a quality reduction on my pics posted at postimage means my work isn't to be considered "quality-sensitive".  I knew this already but it's nice to have it reaffirmed.

It's subtle in fact. I did read somewhere that some imagehosts did affect the quality, but believed that as long as you used the direct link, this didn't make sense. And then... I spotted some compression artifacts on jpegs containing text, that I was sure weren't on the one I compressed myself. And that is how I discovered that Postimage probably recompressed the images displayed through other sites in order to save bandwidth. :confused:

But anyway, your character's skins are dark, and most of your scenes tend to be in relatively low light stages ; so you might be less vulnerable to Post-image flaws indeed.

But keep in mind that since a bit more than 6 months ago, Postimage updated his terms and no longer accepts adult content. So its use should be very minor on LL. Only for character sheets and tutorials for me, for example. :classic_smile:

Share this post


Link to post

The weird thing is, though... everything I've uploaded to Postimage is also on Pixxxels.  Even very recently, like that Selune set I put up in the Counterparts thread.  I haven't tried uploading the over way around yet but if it's just going to mirror my pics across both sites, why even claim adult content isn't allowed?

 

Oh well.  I'll run a test on that a little later, I guess.

Share this post


Link to post
10 minutes ago, Jexsam said:

The weird thing is, though... everything I've uploaded to Postimage is also on Pixxxels.  Even very recently, like that Selune set I put up in the Counterparts thread.  I haven't tried uploading the over way around yet but if it's just going to mirror my pics across both sites, why even claim adult content isn't allowed?

 

Oh well.  I'll run a test on that a little later, I guess.

I saw they transferred some old adult images to Pixxxels, as it redirected me to a Pixxxels image when I tried to test fixing the links Postimage.org -> .cc on some of Lukaslegend images. Aside of that, I do not use Pixxxels ; and when I had obvious classic nudity (the feature image for Blazinsai's red witch in my small library, for instance), it just prevented the image from being displayed on other sites. :classic_smile:

Share this post


Link to post
4 hours ago, daedal said:

tfw you were using png this whole time

:classic_biggrin:

Well even though PNG is overkill, it's less problematic for photo blogs, usually featuring much fewer images per entry (Tumblr sized, approx. < 10 images per entry). And aside that, it still has its uses (for transparency, very small elements that would suffer from any artifact, or storage). But yeah, for web sharing, and more specifically for story blogs, most would say JPEG is still more adequate even nowadays. :classic_wink:

Share this post


Link to post
10 hours ago, NoxefuriomSobate said:

Thanks for the tutorial - It's very useful and I've learned a few things (I too was using only using .PNG). I have a few questions regarding the storage side of things;

 

Once I upload a image to LL and post a blog with them on; do they stay there indefinitely or do they disappear after 30 days? I noticed in some images I uploaded it had "monthly" inside the link so I'm just wondering. Would it be better to use a third party image host to store them? Thanks in advance.

Hi Noxefuriom,

 

I'm glad you liked the guide. About LL's inbuilt storage, so far it seems safe as far as the major site update went. They're just sorted by date (hence the monthly), but we've got images way older than 3 months still up in the blogs, and I can remember some from the last year in non story blogs so it's ok. Only thing is that it's not easy to extract the direct link to the fullscreen url, and that you can't go over a total size limit (around 50 Mo/entry). And it somewhats strains LL's servers. So it's useful for minor posts, but I'd recommend finding a good imagehost for more regular use. :classic_smile:

 

20180329192357_1.jpg

That one is 3 months old. :classic_wink:

 

PS : I noticed your blog got disappeared. Be careful when deleting entries to do so only in the edit page OF THE ENTRY, and not from the main blog's menu. Otherwise, I've seen one user deleting her whole blog by mistake ; and it's very hard to recover afterwards. :classic_angel:

Share this post


Link to post
2 hours ago, NoxefuriomSobate said:

I currently have an issue where if I put a *full-size image (*1920x1080) I get the head partially cut off or just end up with shots of torsos - Whilst I'm working on a work-around where I am "predicting" where the character's heads will be which fits both the feature image and the blog post's feature bar surely there is a recommended size for a feature image?

 

Thanks in advance ?‍♂️

 

 

  Reveal hidden contents

FeatureImageExampleProblem.thumb.png.816143ba371a0a703ed92c74d94efa43.png

 

You're talking of the headers. The thing about headers is that they're not made to display 16/9 images, but rather a sort of wider "band", more fitting to be a title than a regular image. The ratio W/H for headers are around 2.9 for the small vignettes, and around 3.3 for the two larger ones at the top (vs 1.78 ratio for 16/9 images). Think of it as a sort of banner in fact.

 

You cant tune the part which will get displayed ; so to get nice headers, I recommend cropping your fullscreen image in a way that you're centered on the part of the screen you want to see, and then cutting it's top and bottom in order to get a height around 640 px. That way you've got a 1920 x 640 header, whose ratio is around 3, which will fit not too bad on both vignettes types. Alter Native does it differently (yeah, that's how he earned his pseudo :lol:) by filling the rest of the image with blank/transparent space.

 

Some examples of headers.

 

banner.jpg.b2c45eef7336fe05ec444120db290

 

1040751305_TheSmalllibraryv1.2-D.jpg.335

 

C5S5D.png.56f40d3a8e6b4b01bbbb9ee2e8b4d1

 


I realize I didn't tell anything about headers in my first post. It might be a good idea to add a few lines on the topic indeed. Smiley_henri_gaud-belin_HFR.gif

 

 

 

Share this post


Link to post
23 hours ago, NoxefuriomSobate said:

Thank you very much; the resolution you recommended; 1980x640; is a improvement  - However I still found a bit of clipping with it; I tried 1,606x374 and there was no more *clipping. I got the size by taking a screenshot of a full size image header box (blog posts) and working on it from there.

 

Edit: No more vertical clipping* There is still some horizontal clipping at the 1,606x374 resolution.

You're welcome.

I'm still unsure about the exact numbers, but the important point is the ratio, not the resolution. The two ratios I gave you are for the big and small thumbnails, and are okayish for the entries themselves. The problem with entries measurements, is that if you're on fullscreen or not, on carbon full width or not, or using this or this resolution the part effectively displayed will vary. So I gave you my measurements for LL's main page blog menu, as at the contrary it seems relatively constant regardless of user's setup. :classic_smile:

 

Of course, most users will use 1920x1080 as a display resolution, so even if ratio is important, one should not go below a certain width for his/her header, otherwise it'll be enlarged which does not renders well...

Share this post


Link to post

A quick update/ note to flickr. They recently announced that free accounts are limited to a maximum of 1000 images, starting January 2019, which makes it a poor choice for image hosting of screenshot stories. Otherwise you have to get a pro account for 60 $ a year.

There are probably some workarounds with multiple accounts or so, but it's probably a good idea to avoid the site for further screenshot hosting of stories.

Share this post


Link to post
19 minutes ago, Alter Native said:

A quick update/ note to flickr. They recently announced that free accounts are limited to a maximum of 1000 images, starting January 2019, which makes it a poor choice for image hosting of screenshot stories. Otherwise you have to get a pro account for 60 $ a year.

There are probably some workarounds with multiple accounts or so, but it's probably a good idea to avoid the site for further screenshot hosting of stories.

Taking good note of this Alter Native, knowing most story entries are between 50 and 150 images each that would limit one from 6 to 20 entries. Thanks for reporting !

 

And... I share your pain. It seems re-uploading images has become a curse cast upon us storytellers... :classic_angel:

Share this post


Link to post
1 hour ago, Tirloque said:

Taking good note of this Alter Native, knowing most story entries are between 50 and 150 images each that would limit one from 6 to 20 entries. Thanks for reporting !

 

And... I share your pain. It seems re-uploading images has become a curse cast upon us storytellers... :classic_angel:

Yeah I got over 5000 images on flickr. Besides the new limitation, I was very happy with flickr and considered it the best image hoster by a large margin, especially for large amounts of images. 

I haven't decided yet weather I'm going to a different site or get the pro account. Also the pro account is 50$ not 60$ there is some fake news in my previous post, which links to the original source by flickr. 

Share this post


Link to post

Has imgbox problems lately? It seems that it's not only my problem that the loading-time of this hoster is awfully low right now. Even when I try to divide my chapters into smaller pieces, it's still loading to death =(

Share this post


Link to post
2 hours ago, Kin Tsuchi said:

Has imgbox problems lately? It seems that it's not only my problem that the loading-time of this hoster is awfully low right now. Even when I try to divide my chapters into smaller pieces, it's still loading to death =(

imgbox is rather slow, and seems to prioritize hotlinking at the expend of onsite menu access. So access times are rather long, particularly at max traffic periods. :classic_smile:

 

However, your images are rather large, nearly 750 ko each, that's almost double the size of what I would recommend. Maybe adjusting the compression could help ? :classic_angel:

Share this post


Link to post
4 hours ago, Alter Native said:

Cross tumblr from your list as well, they're banning adult content, starting December 17. (Source)

Hmpf, and I who thought that Tumblr was one of the safest bets so far. I definitely feel better and more positive now. -_-

 

That being said, the entries containing adult content will only be made private. So... it might still be possible to access them with direct links, making it still functional as an image host. So the Tumblers might not need to re-upload their images, even though they'll have to change for their future uploads. million_dollar_baby.gif

 

Thanks for the report, Alter. :classic_smile:

Share this post


Link to post

A bit of information regarding LL's imagehosting with latest update (IPB 4.4.7) : it seems to recompress and possibly downsize the JPEGs when used as filehoster.

External imagehosts were already recommended, but for those of us storytellers who found LL hosting handy, that's something that could make them reconsider.

 

Credits to @SpyVsPiefor the discovery. He ain't called Spy for nothing. Smiley_henri_gaud-belin_HFR.gif

 

Spoiler

 

On 10/5/2019 at 5:48 AM, SpyVsPie said:

Some misc shots of stuff I've been tinkering with lately. JPEG conversion definitely took a toll on these 😩

 

  Reveal hidden contents

 

 

enb2019_10_4_11_32_59.jpg

 

enb2019_10_4_16_05_22.jpg

 

enb2019_10_1_10_24_17.jpg

 

 

22 hours ago, Tirloque said:

Well they are 2x more compressed than you regular ones, so it's only logical. :classic_smile:

19 hours ago, SpyVsPie said:

Well that got me curious because they are definitely not more compressed when I upload them... It seems the forum software pulled a little sneaky on me and compressed them to like 1/6 their original size 😯. That probably explains the quality drop. Guess that will teach me to mooch LL's precious server space.

 

They were originally more like:

 

  Hide contents

d81o6gmC_o.jpg

 

43RGvfwi_o.jpg

 

ED4AiFIz_o.jpg

 

 

 

 

17 hours ago, Tirloque said:

Woohoo, that's impressive how a bad jpeg conversion can lessen an image. Maybe LL does recompress hosted images ? We had an example with Postimage, which did recompress + limit to 1280x720 all jpegs ; Tex's blog being an example of it :

 

  Reveal hidden contents

The hotlinked recompressed jpeg :

 

20180310172633-2.jpg

 

The original jpeg :

 

IWtzdW4K_o.jpg

 

 

20180310193836-1.jpg

Vs

Q9hBNnQZ_o.jpg

 

 

 

15 hours ago, SpyVsPie said:

This was also taking the address of the images I uploaded as a status update and pasting them here, it may be different if you upload to a blog entry directly, let's science it:

 

  Reveal hidden contents

enb2019_10_4_16_05_12.thumb.jpg.5f26dfd013747d0bb3fbc24b552317a7.jpg

 

 

14 hours ago, SpyVsPie said:

Nope the forum does seem to be compressing anything that's hosted here to pieces. Probably a good idea honestly, it will keep people like me from being too lazy to bother uploading elsewhere. All my stories and stuff I use ImgBox for but just little one off updates and stuff I usually just upload here so now I will just stop doing that,

 

14 hours ago, Tirloque said:

Indeed, there's the same difference than in the status (resize to 1200 width + 225 Kb recompress while your base images are 2560x1440 and over1.5 Mb). While Resdayn's last entries images, which were posted in the main blog post have been resized as well.

 

Better off not using LL for imagehosting, aside of minor posts. :classic_smile:

 

 

 

Spoiler

Fun fact : cutting our messages down to the serious parts only makes them 6x smaller too. :lol:

 

Share this post


Link to post

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...