Topic: How do I show bigger thumbnails? (4k support)

Posted under Site Bug Reports & Feature Requests

It's great that I can set it for original image sizes and 250 posts per page, but then I'm stuck with teeny tiny 150x150 thumbnails I can barely see. Is there a setting I overlooked, or is this actually missing? I don't want to use the standard windows scaling because, as a 4k user, I want large images to actually be 1:1 on my screen rather than being huge and blurry (plus it prevents me from accidentally saving low res images).

batabii_ said:
It's great that I can set it for original image sizes and 250 posts per page, but then I'm stuck with teeny tiny 150x150 thumbnails I can barely see. Is there a setting I overlooked, or is this actually missing? I don't want to use the standard windows scaling because, as a 4k user, I want large images to actually be 1:1 on my screen rather than being huge and blurry (plus it prevents me from accidentally saving low res images).

as far as i'm aware, only three copies of the posts are stored:
• original
• sample: 850px wide (if applicable)
• thumbnail: 150px wide

if you want 1:1 scaling then those are your options.

however if you use the samples as thumbnails you could be looking at an average of around 50 megabytes per page (with 250 posts per page).

the only reasonable solution i can think of would be to set up an external server which will incrementally download all the sample files from e621, then re-scale to the desired size and compress them using a more efficient codec such as WebP.
based on my ballpark calculations, to store such thumbnails you'd need around 100 gigabytes to cover the current site and the foreseeable future. it would initially need to download something like 500 gigabytes of samples to catch-up.

bipface said:
however if you use the samples as thumbnails you could be looking at an average of around 50 megabytes per page (with 250 posts per page).

That's weird because Furaffinity uses 250 max and Inkbunny supports 300.
This site should drop the 150px thumbnails for 300 (or 500 if it works)

bipface said: ... stuff

Why exactly do you think that this is necessary? Are you deliberately misinterpreting the point, or what? OP just wants the previews to be bigger, he is not looking to upscale every single image on the site to 4k. Because that's ridiculous.

Changing the thumbnails to use the sample-sized images is pretty easy with a userscript. I've done it in re621. The current previews in the script are limited to a fairly small size, and would still be too small on a 4K monitor, but it wouldn't be too difficult to change that. And if even the 850px samples are too small, it's trivial to just use the original, but that would require a pretty good internet connection in order to load on a reasonable timeframe.

batabii_ said:
That's weird because Furaffinity uses 250 max and Inkbunny supports 300.
This site should drop the 150px thumbnails for 300 (or 500 if it works)

The small thumbnails are used mainly for the sake of reducing bandwidth usage, as well as performance on slower connections.
If you want, I can write you a quick Tampermonkey script that will scale the thumbnails up. How big do you want them to be?

Edit: ... no response - whatever, here's a (roughly) 300px version that I mocked up in half an hour: rescaler.user.js - looks kinda like this

Updated

batabii_ said:

however if you use the samples as thumbnails you could be looking at an average of around 50 megabytes per page (with 250 posts per page).

That's weird because Furaffinity uses 250 max and Inkbunny supports 300.

what's weird about that? even 300×300 is only 12% the number of pixels in 850×850.
300px is still a reasonable size for thumbnails, and i don't think those sites give you 250 thumbnails per page do they?

bitwolfy said:
Why exactly do you think that this is necessary? Are you deliberately misinterpreting the point, or what? OP just wants the previews to be bigger, he is not looking to upscale every single image on the site to 4k. Because that's ridiculous.

because like i said, the next step up (using samples as thumbnails) incurs a massive download just to load a single page of search results. note that he explicitly mentioned using limit=250.
it's more practical to prepare ahead of time all the thumbnails in the exact dimensions you need.

Updated

bipface said:
because like i said, the next step up (using samples as thumbnails) incurs a massive download just to load a single page of search results. note that he explicitly mentioned using limit=250.
it's more practical to prepare ahead of time all the thumbnails in the exact dimensions you need.

How do you leap from "load samples in place of thumbnails" to "setting up a personal server to re-scale up the images yourself".
You would still need to download them. First, upload the images to your external server, then download them back for yourself. Seems overly complicated and incredibly impractical for a very simple task.

It's the programming version of "I need a car, better buy this car factory to make it more efficient"

Updated

bitwolfy said:
It's the web development version of "I need a car, better buy this car factory to make it more efficient"

¯\_(ツ)_/¯ some might see such a project as a learning experience and a good way to utilise free cloud-computing services

he's not the first to complain about thumbnails being too small, so i've had the idea in the back of my mind for a while now

bipface said:
¯\_(ツ)_/¯ some might see such a project as a learning experience and a good way to utilise free cloud-computing services

he's not the first to complain about thumbnails being too small, so i've had the idea in the back of my mind for a while now

I mean, fair enough. Although, I doubt that there will be a free service that will provide you with that much storage.

I just prefer simpler, more practical solutions.

What is "standard Windows scaling"? is this a general zoom function (if so that's kind of fucked, honestly, who would want that blurriness?), or does Edge not support non-blurry scaling (non-blurry ~= Nearest Neighbour?)

In Firefox, say, it's certainly possible to 2x thumbnails and make them render with nearest neighbour. No additional detail, but hey, they would not be tiny any more.
I remember I used to have a userscript that did this.

Looking at Pixelation 's CSS, these seem to be the settings which cause NN rendering:

image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;

As you might guess, this is a mess of different settings so that it works right in most browsers.

There may be a pure CSS solution, but it's beyond my limited CSS skills. I've already tried increasing thumbnail rendering dimensions, and beyond 160x160 it just kind of gets cropped inside the panel surrounding it. I think the panel also needs restyling for it to work properly.

bitwolfy said:
If you want, I can write you a quick Tampermonkey script that will scale the thumbnails up. How big do you want them to be?

Edit: ... no response - whatever, here's a (roughly) 300px version that I mocked up in half an hour: rescaler.user.js - looks kinda like this

I want the thumbnails resampled, not just scaled. If you're just "blowing it up" it will not help. I want more resolution, not just bigger pixels.

bipface said:
300px is still a reasonable size for thumbnails, and i don't think those sites give you 250 thumbnails per page do they?

300px is reasonable. 150px is not.

savageorange said:
What is "standard Windows scaling"? is this a general zoom function (if so that's kind of fucked, honestly, who would want that blurriness?), or does Edge not support non-blurry scaling (non-blurry ~= Nearest Neighbour?)

By default, windows 10 will resize apps and text by 150% for 4k monitors. I use a separate addon to reduce it to 67% of that (rendering images at their proper 100% resolution) for image-based websites such as this and twitter. If I disable windows scaling completely, everything will look super tiny. I don't know if this affects my games or not, I think there's a setting that you can use to make specific apps ignore this feature.

While we're at it, the font in this text box is super tiny too.

batabii_ said:
While we're at it, the font in this text box is super tiny too.

well you could try disabling the 1.5x scaling but increasing your preferred font size in your browser's settings.
some websites will size other elements in proportion to the the current font size.
(not sure how well it will work on e621, but it's worth trying out
though it won't help your thumbnails problem obviously)

Updated

I want actual resampling

Eh, I'm not optimistic about the admin response on that.
I wouldn't say no to 300 myself, but I do doubt the actual utility of doubling the resolution of the thumbnails.

Text box font, in the short term you can certainly tweak using the Custom CSS setting.

Like I said I'm not that great at CSS, but something like this might work based on what I'm seeing in the element inspector:

div.input textarea {
  // original size was 1.2em, I'm guessing that 3xing will make it decent.
  font-size: 3.6em !important; 
}

batabii_ said:
I want the thumbnails resampled, not just scaled. If you're just "blowing it up" it will not help. I want more resolution, not just bigger pixels.

It would help if you actually looked at the thing. I am replacing the small 150px preview images with the 850px ones in that script.
It's not the best if you have a slower connection, since you would literally have to reload every image on the page. But that's what it does.
Not sure what more you want.

I can increase firefox's font size, but the problem is that I only run into this issue on e621, and it might make cause problems on other sites.

I'm using bitwolfy's rescaler for now, but it still seems like an issue with the site (as I said, every other art website uses thumbnails of 250px or bigger)

EDIT: It's not doing anything. Did I do something wrong?

Updated

I genuinely wouldn't mind raising the thumbnail size on the side, considering I have 1080p phone, 1440p monitor and 4K TV, so everything is extremely tiny on all devices and current layout fits much more thumbnails on same space compared to old site already, almost double for me.

bitwolfy said:
Could you be more specific than that?
I re-installed the script through Tampermonkey from the link in my first post. It definitely works

I use Greasemonkey for firefox I clicked the link and installed it, but the thumbnails are still just as tiny as before. It says "enabled".

batabii_ said:
I use Greasemonkey for firefox I clicked the link and installed it, but the thumbnails are still just as tiny as before. It says "enabled".

Huh. Apparently, there are some differences in how Tampermonkey and Greasemonkey handle scripts.
Fixed it for Greasemonkey, new version is here

bitwolfy said:
Huh. Apparently, there are some differences in how Tampermonkey and Greasemonkey handle scripts.
Fixed it for Greasemonkey, new version is here

YESS much better thank you. That said, I still want the site admins to realize that 150 pixels is not good enough for a preview.

batabii_ said:
YESS much better thank you. That said, I still want the site admins to realize that 150 pixels is not good enough for a preview.

It's not a matter of "realizing" it's organizing the resources to regenerate all of them and updating lots of code that makes assumptions about the sizes of thumbnails. It's not just the snap of fingers to do, and not a high priority in the grand scheme of things. It's a choice that was made back in what looks like 2007 or something like that, and so has other debt related to it.

What makes you think they don't realize that >150px would be better?

Even if the whole admin team agrees today that upgrading thumbnail size is on the agenda (to my knowledge, a relatively simple task), there's only a few devs, they are all volunteers, and other problems which render the site very obviously unusable are a priority (eg. CDN issues still preventing some people from seeing any images at all).

EDIT: OK, KiraNoot, that's basically what I was hoping would happen, more details from an admin. Looks like my timing could have been better.

kiranoot said:
It's not a matter of "realizing" it's organizing the resources to regenerate all of them and updating lots of code that makes assumptions about the sizes of thumbnails. It's not just the snap of fingers to do, and not a high priority in the grand scheme of things. It's a choice that was made back in what looks like 2007 or something like that, and so has other debt related to it.

Well like I said, every other art website I've ever been to does it.

bipface said:
i guess you've never been to Danbooru then

Danbooru is awful. Everything is hidden, unsourced, or censored.

I'm talking about furaffinity, inkbunny, sofurry, hentaifoundry, pixiv, etc.

batabii_ said:
Danbooru is awful. Everything is hidden, unsourced, or censored.

I'm talking about furaffinity, inkbunny, sofurry, hentaifoundry, pixiv, etc.

e621 current codebase is based on danbooru and is pretty similar to other boorus like gelbooru or paheal which are also running booru software.

Furaffinity, inkbunny, sofurry, hentaifoundry, pixiv, etc. are sites which are using their own code.

Also, a minor problem that I noticed with that greasemonkey script is that it crops the thumbnails. Better than teeny tiny 150x150, but still kind of concerning.

batabii_ said: Also, a minor problem that I noticed with that greasemonkey script is that it crops the thumbnails. Better than teeny tiny 150x150, but still kind of concerning.

It's a deliberate design choice on my part. It reduces the empty space around thumbnails, turning a mess of images into a uniform grid.

bitwolfy said:
It's a deliberate design choice on my part. It reduces the empty space around thumbnails, turning a mess of images into a uniform grid.

I'd rather have the "mess of images" (that e621 uses by default) to parts of the pictures being completely cut off (defeating the point of thumbnails)

batabii_ said:
Also, a minor problem that I noticed with that greasemonkey script is that it crops the thumbnails. Better than teeny tiny 150x150, but still kind of concerning.

You can change the last line "object-fit": "cover"
to "object-fit": "contain"
Then its the way you are interested.

jovo said:
You can change the last line "object-fit": "cover"
to "object-fit": "contain"
Then its the way you are interested.

Thank you very much, I don't know anything about coding.

bitWolfy

Former Staff

I've re-written the script from scratch. New version is here
Separated the settings from the rest of the code:
- set cropImages to false at the top to preserve the original image ratio
- thumbWidth and thumbHeight change the width and height of the thumbnails

I even wrote a graphical interface to change those settings from the site, and not through code.
It's available here - the configuration window can be opened by clicking on "Scaling Settings" in the sidebar, under "Related".
But it's only working with Tampermonkey, not Greasemonkey. Fuck Greasemonkey.

batabii_ said: Something's wrong, the script suddenly stopped working.

No idea why it would stop working. Try the new version, maybe you'll have better luck with that.

Yeah it suddenly started working again. Computers are weird. I didn't change or update anything.

jovo said:
You can change the last line "object-fit": "cover"
to "object-fit": "contain"
Then its the way you are interested.


A welcomed change, however the preview borders are a bit annoying. To get rid of them, navigate to Account > Settings > Advanced and locate the section for "Custom CSS Style". Input this line of code: img {border-width: 0px};

I hate to be that guy that necro a thread, but this is where I got the script. First of all, thanks for the script!! It's doing its purpose, I can get the thumbnails the size I wanted. The only downside is that it mess up other things like being unable to use the auto-fill in the search bar or once inside a post I can't favorite or vote.

The temporal fix I have is to limit where the script works.

from

// @match        https://e621.net/posts*

to

// @match        https://e621.net/posts/
// @match        https://e621.net/posts?*

Since my knowledge in coding is very limited, I can't figure out why this is happening, so I will leave this post here in case someone figure out whats making that conflict.

akraid said:
I hate to be that guy that necro a thread, but this is where I got the script. First of all, thanks for the script!! It's doing its purpose, I can get the thumbnails the size I wanted. The only downside is that it mess up other things like being unable to use the auto-fill in the search bar or once inside a post I can't favorite or vote.

The temporal fix I have is to limit where the script works.

from

// @match        https://e621.net/posts*

to

// @match        https://e621.net/posts/
// @match        https://e621.net/posts?*

Since my knowledge in coding is very limited, I can't figure out why this is happening, so I will leave this post here in case someone figure out whats making that conflict.

Add

this.$ = this.jQuery = jQuery.noConflict(true); 

right above

// Settings

teerac said:
Add

this.$ = this.jQuery = jQuery.noConflict(true); 

right above

// Settings

Better late than never hehehe but thanks! Now works properly.

  • 1