Register - Login
Views: 99393340
 Main - Memberlist - Active users - Calendar - Wiki - IRC Chat - Online users
Ranks - Rules/FAQ - Stats - Latest Posts - Color Chart - Smilies		 04-24-22 10:24:22 AM
Jul - Meta - Nearest neighbor upscaling? New poll - New thread - New reply
Next newer thread | Next older thread
JosJuice
Random nobody
Level: 5


Posts: 3/4
EXP: 299
For next: 230

Since: 06-21-18

Pronouns: she/they
From: Sweden

Since last post: 3.8 years
Last activity: 3.8 years
Posted on 06-21-18 02:23:58 PM Link | Quote
I noticed that the base CSS file for the forums tells the browser to use nearest neighbor upscaling for images. Is there any particular reason for that? I'm using a laptop with an 1080p screen set to 125% DPI scaling, and images look pretty bad when upscaled to 125% using nearest neighbor... But maybe there's a reason that the CSS is set up that way that I haven't realized.
Ketsuban

Level: 5


Posts: 3/4
EXP: 434
For next: 95

Since: 04-02-14

Pronouns: he/him

Since last post: 3.4 years
Last activity: 2.9 years
Posted on 06-21-18 03:00:18 PM Link | Quote

At a guess: given the close association of Jul with TCRF there's going to be a higher-than-baseline amount of pixel art being posted, and if you think things look bad when upscaled using nearest-neighbour interpolation you've not seen the horrors wrought on pixel art by bilinear or bicubic interpolation. (And don't get me started on "pixel-art" algorithms like hq4x...)

____________________
devin

Yoshi
i'm mima irl
Level: 112


Posts: 3448/3519
EXP: 14919017
For next: 419188

Since: 04-29-08

Pronouns: any
From: FL

Since last post: 297 days
Last activity: 1 day
Posted on 06-21-18 03:05:34 PM Link | Quote
Originally posted by Ketsuban
At a guess: given the close association of Jul with TCRF there's going to be a higher-than-baseline amount of pixel art being posted, and if you think things look bad when upscaled using nearest-neighbour interpolation you've not seen the horrors wrought on pixel art by bilinear or bicubic interpolation. (And don't get me started on "pixel-art" algorithms like hq4x...)

Bingo. Of course, obviously it wasn't designed with DPI scaling in mind...

I know CSS has some ways to deal with DPI values but I'm not sure if it means there's a good solution here. Normally AFAIK it's meant more for Apple's retina displays and stuff like that.

____________________
Twitter - Mastodon - GitHub
Photo by Luc Viatour
Elemi
370
"ban me or whatever"

Okay, bye, please don't push your antivax shit here
Level: 42


Posts: 342/379
EXP: 485263
For next: 36099

Since: 06-20-10

Pronouns: She/her
From: Hyperspace

Since last post: 3.1 years
Last activity: 2.3 years
Posted on 06-22-18 07:19:00 PM Link | Quote
Nyanners' Post
The NN scaling looks good on forum images like avatars and minipics, but it could look better!

Jul does not use nearest neighbour but browser default AFAIK.

You can enable it and shit in CSS, I do on my sites for header images to retain the retro look everywhere!


Here's the deets.

____________________
Disclaimer: all my posts are fiction.
Xkeeper

Level: 263


Posts: 23358/25343
EXP: 296722327
For next: 2238126

Since: 07-03-07

Pronouns: they/them/????????

Since last post: 9 days
Last activity: 3 days
Posted on 06-25-18 09:24:37 PM Link | Quote
yeah it's because a lot of things here are pixel art, which looks like garbage when resized. unfortuantely i guess it looks even more garbage when you're using dpi scaling, which is unfortunate

not really sure what i can do since there's no good way of saying "this image is pixel art and should be nn scaled" versus "this is a photo or whatever and should be turned into blurry soup".


tcrf has the same problem, because we require images to be uploaded at 1× and then upscaled via html for filesize + consistency. so if you're using something that isn't an even multiple of 100% it looks like dogshit.

____________________
(Lv 243 with 226077235 EXP)
Elemi
370
"ban me or whatever"

Okay, bye, please don't push your antivax shit here
Level: 42


Posts: 343/379
EXP: 485263
For next: 36099

Since: 06-20-10

Pronouns: She/her
From: Hyperspace

Since last post: 3.1 years
Last activity: 2.3 years
Posted on 06-26-18 07:11:08 PM Link | Quote
Nyanners' Post
Well, I would say most images < 256px′² could safely be classed as 72dpi web images, and there could be a filter that has a whitelist that could be called on the form page for anything that you don't want nn scaling used on.


Or even more and you could check pixel by pixel in php to see the gravity of pixel colour difference as photographs generally ease their colours into the others, it could be done but could be hard as shit and make you feel funny.

Also I don't know why but this post keeps replacing words with "DISABLED_" and I haven't put those there, idk.

____________________
Disclaimer: all my posts are fiction.
RanAS
Member
Level: 55


Posts: 443/844
EXP: 1286472
For next: 27717

Since: 10-10-14

From: São Paulo, Brazil

Since last post: 1 day
Last activity: 1 day
Posted on 06-26-18 11:49:32 PM Link | Quote
Originally posted by Nyanners
Also I don't know why but this post keeps replacing words with "DISABLED_" and I haven't put those there, idk.

on to on
on to < on
< on to on
< test on


oh I see, I think it treats "< 256px" as the start of an HTML tag, and tries to disable the next "on" it finds after it (including this one) GODDAMMIT I CAN'T EVEN TYPE A NUMBER AND IT DOES IT

it's probably the no-JS regex filter

hold on maybe this will be easy to fix

____________________
"The quieter you become, the more you are able to hear." --Ram Dass
Xkeeper

Level: 263


Posts: 23358/25343
EXP: 296722327
For next: 2238126

Since: 07-03-07

Pronouns: they/them/????????

Since last post: 9 days
Last activity: 3 days
Posted on 06-27-18 08:12:30 AM Link | Quote
that's absolutely correct. welcome to why we can't have nice things

____________________
(Lv 243 with 226118098 EXP)
Next newer thread | Next older thread
Jul - Meta - Nearest neighbor upscaling? New poll - New thread - New reply


Rusted Logic
Acmlmboard - commit 47be4dc [2021-08-23]
©2000-2022 Acmlm, Xkeeper, Kaito Sinclaire, et al.

28 database queries.
Query execution time:  0.072382 seconds
Script execution time:  0.015851 seconds
Total render time:  0.088234 seconds


TidyHTML vomit below
line 1 column 1 - Warning: missing <!DOCTYPE> declaration
line 119 column 11 - Warning: <form> isn't allowed in <table> elements
line 118 column 10 - Info: <table> previously mentioned
line 120 column 11 - Warning: missing <tr>
line 120 column 119 - Warning: missing </font> before </td>
line 124 column 16 - Warning: plain text isn't allowed in <tr> elements
line 120 column 11 - Info: <tr> previously mentioned
line 125 column 68 - Warning: missing </nobr> before </td>
line 141 column 68 - Warning: missing </nobr> before <tr>
line 147 column 35 - Warning: missing <tr>
line 147 column 50 - Warning: missing </font> before </td>
line 148 column 37 - Warning: unescaped & or unknown entity "&id"
line 147 column 180 - Warning: missing </font> before </table>
line 149 column 35 - Warning: missing <tr>
line 149 column 50 - Warning: missing </font> before </td>
line 149 column 91 - Warning: missing </font> before </table>
line 156 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 158 column 9 - Warning: missing <tr>
line 176 column 13 - Warning: missing <tr>
line 177 column 102 - Warning: unescaped & or unknown entity "&postid"
line 182 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 184 column 9 - Warning: missing <tr>
line 202 column 13 - Warning: missing <tr>
line 203 column 102 - Warning: unescaped & or unknown entity "&postid"
line 205 column 74 - Warning: <style> isn't allowed in <td> elements
line 205 column 9 - Info: <td> previously mentioned
line 209 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 211 column 9 - Warning: missing <tr>
line 229 column 13 - Warning: missing <tr>
line 230 column 102 - Warning: unescaped & or unknown entity "&postid"
line 232 column 536 - Warning: missing </span> before <blockquote>
line 232 column 616 - Warning: inserting implicit <span>
line 232 column 616 - Warning: missing </span> before <hr>
line 232 column 681 - Warning: inserting implicit <span>
line 232 column 681 - Warning: missing </span> before <hr>
line 233 column 1 - Warning: inserting implicit <span>
line 239 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 241 column 9 - Warning: missing <tr>
line 259 column 13 - Warning: missing <tr>
line 260 column 102 - Warning: unescaped & or unknown entity "&postid"
line 262 column 74 - Warning: missing </div>
line 272 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 274 column 9 - Warning: missing <tr>
line 292 column 13 - Warning: missing <tr>
line 293 column 102 - Warning: unescaped & or unknown entity "&postid"
line 295 column 74 - Warning: <style> isn't allowed in <td> elements
line 295 column 9 - Info: <td> previously mentioned
line 303 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 305 column 9 - Warning: missing <tr>
line 323 column 13 - Warning: missing <tr>
line 324 column 102 - Warning: unescaped & or unknown entity "&postid"
line 326 column 74 - Warning: missing </div>
line 334 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 336 column 9 - Warning: missing <tr>
line 354 column 13 - Warning: missing <tr>
line 355 column 102 - Warning: unescaped & or unknown entity "&postid"
line 357 column 74 - Warning: <style> isn't allowed in <td> elements
line 357 column 9 - Info: <td> previously mentioned
line 362 column 1378 - Warning: <test> missing '>' for end of tag
line 362 column 1378 - Error: <test> is not recognized!
line 362 column 1378 - Warning: discarding unexpected <test>
line 371 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 373 column 9 - Warning: missing <tr>
line 391 column 13 - Warning: missing <tr>
line 392 column 102 - Warning: unescaped & or unknown entity "&postid"
line 394 column 74 - Warning: <style> isn't allowed in <td> elements
line 394 column 9 - Info: <td> previously mentioned
line 397 column 17 - Warning: missing <tr>
line 397 column 17 - Warning: discarding unexpected <table>
line 400 column 35 - Warning: missing <tr>
line 400 column 50 - Warning: missing </font> before </td>
line 400 column 91 - Warning: missing </font> before </table>
line 402 column 35 - Warning: missing <tr>
line 402 column 50 - Warning: missing </font> before </td>
line 403 column 37 - Warning: unescaped & or unknown entity "&id"
line 402 column 180 - Warning: missing </font> before </table>
line 404 column 17 - Warning: discarding unexpected </textarea>
line 404 column 28 - Warning: discarding unexpected </form>
line 404 column 35 - Warning: discarding unexpected </embed>
line 404 column 43 - Warning: discarding unexpected </noembed>
line 404 column 53 - Warning: discarding unexpected </noscript>
line 404 column 64 - Warning: discarding unexpected </noembed>
line 404 column 74 - Warning: discarding unexpected </embed>
line 404 column 82 - Warning: discarding unexpected </table>
line 404 column 90 - Warning: discarding unexpected </table>
line 406 column 9 - Warning: missing </font> before <table>
line 418 column 25 - Warning: discarding unexpected </font>
line 427 column 37 - Warning: discarding unexpected </font>
line 405 column 1 - Warning: missing </center>
line 120 column 63 - Warning: <img> lacks "alt" attribute
line 125 column 19 - Warning: <td> attribute "width" has invalid value "120px"
line 125 column 93 - Warning: <img> lacks "alt" attribute
line 141 column 19 - Warning: <td> attribute "width" has invalid value "120px"
line 141 column 98 - Warning: <img> lacks "alt" attribute
line 148 column 44 - Warning: <img> proprietary attribute value "absmiddle"
line 148 column 142 - Warning: <img> proprietary attribute value "absmiddle"
line 148 column 246 - Warning: <img> proprietary attribute value "absmiddle"
line 161 column 21 - Warning: <img> lacks "alt" attribute
line 161 column 62 - Warning: <img> lacks "alt" attribute
line 161 column 110 - Warning: <img> lacks "alt" attribute
line 161 column 160 - Warning: <img> lacks "alt" attribute
line 172 column 15 - Warning: <img> lacks "alt" attribute
line 187 column 21 - Warning: <img> lacks "alt" attribute
line 187 column 62 - Warning: <img> lacks "alt" attribute
line 187 column 111 - Warning: <img> lacks "alt" attribute
line 187 column 161 - Warning: <img> lacks "alt" attribute
line 188 column 11 - Warning: <img> lacks "alt" attribute
line 198 column 15 - Warning: <img> lacks "alt" attribute
line 213 column 11 - Warning: <img> lacks "alt" attribute
line 214 column 23 - Warning: <img> lacks "alt" attribute
line 214 column 64 - Warning: <img> lacks "alt" attribute
line 214 column 113 - Warning: <img> lacks "alt" attribute
line 214 column 163 - Warning: <img> lacks "alt" attribute
line 215 column 11 - Warning: <img> lacks "alt" attribute
line 225 column 15 - Warning: <img> lacks "alt" attribute
line 243 column 15 - Warning: <img> proprietary attribute value "absmiddle"
line 243 column 15 - Warning: <img> lacks "alt" attribute
line 243 column 58 - Warning: <img> proprietary attribute value "absmiddle"
line 243 column 58 - Warning: <img> lacks "alt" attribute
line 243 column 101 - Warning: <img> proprietary attribute value "absmiddle"
line 243 column 101 - Warning: <img> lacks "alt" attribute
line 243 column 144 - Warning: <img> proprietary attribute value "absmiddle"
line 243 column 144 - Warning: <img> lacks "alt" attribute
line 243 column 187 - Warning: <img> proprietary attribute value "absmiddle"
line 243 column 187 - Warning: <img> lacks "alt" attribute
line 244 column 22 - Warning: <img> lacks "alt" attribute
line 244 column 63 - Warning: <img> lacks "alt" attribute
line 244 column 112 - Warning: <img> lacks "alt" attribute
line 244 column 162 - Warning: <img> lacks "alt" attribute
line 245 column 11 - Warning: <img> lacks "alt" attribute
line 255 column 15 - Warning: <img> lacks "alt" attribute
line 277 column 23 - Warning: <img> lacks "alt" attribute
line 277 column 64 - Warning: <img> lacks "alt" attribute
line 277 column 113 - Warning: <img> lacks "alt" attribute
line 277 column 163 - Warning: <img> lacks "alt" attribute
line 278 column 11 - Warning: <img> lacks "alt" attribute
line 288 column 15 - Warning: <img> lacks "alt" attribute
line 307 column 15 - Warning: <img> proprietary attribute value "absmiddle"
line 307 column 15 - Warning: <img> lacks "alt" attribute
line 307 column 58 - Warning: <img> proprietary attribute value "absmiddle"
line 307 column 58 - Warning: <img> lacks "alt" attribute
line 307 column 101 - Warning: <img> proprietary attribute value "absmiddle"
line 307 column 101 - Warning: <img> lacks "alt" attribute
line 307 column 144 - Warning: <img> proprietary attribute value "absmiddle"
line 307 column 144 - Warning: <img> lacks "alt" attribute
line 307 column 187 - Warning: <img> proprietary attribute value "absmiddle"
line 307 column 187 - Warning: <img> lacks "alt" attribute
line 308 column 22 - Warning: <img> lacks "alt" attribute
line 308 column 63 - Warning: <img> lacks "alt" attribute
line 308 column 112 - Warning: <img> lacks "alt" attribute
line 308 column 162 - Warning: <img> lacks "alt" attribute
line 309 column 11 - Warning: <img> lacks "alt" attribute
line 319 column 15 - Warning: <img> lacks "alt" attribute
line 326 column 74 - Warning: <div> anchor "post_36" already defined
line 329 column 691 - Warning: <img> proprietary attribute value "absmiddle"
line 329 column 691 - Warning: <img> lacks "alt" attribute
line 339 column 22 - Warning: <img> lacks "alt" attribute
line 339 column 63 - Warning: <img> lacks "alt" attribute
line 339 column 112 - Warning: <img> lacks "alt" attribute
line 339 column 162 - Warning: <img> lacks "alt" attribute
line 340 column 11 - Warning: <img> lacks "alt" attribute
line 350 column 15 - Warning: <img> lacks "alt" attribute
line 368 column 1855 - Warning: <img> lacks "alt" attribute
line 376 column 23 - Warning: <img> lacks "alt" attribute
line 376 column 64 - Warning: <img> lacks "alt" attribute
line 376 column 113 - Warning: <img> lacks "alt" attribute
line 376 column 163 - Warning: <img> lacks "alt" attribute
line 377 column 11 - Warning: <img> lacks "alt" attribute
line 387 column 15 - Warning: <img> lacks "alt" attribute
line 394 column 901 - Warning: <div> anchor "xklayout" already defined
line 403 column 44 - Warning: <img> proprietary attribute value "absmiddle"
line 403 column 142 - Warning: <img> proprietary attribute value "absmiddle"
line 403 column 246 - Warning: <img> proprietary attribute value "absmiddle"
line 412 column 25 - Warning: <img> lacks "alt" attribute
line 417 column 267 - Warning: <img> lacks "alt" attribute
line 149 column 50 - Warning: trimming empty <font>
line 232 column 536 - Warning: trimming empty <span>
line 397 column 17 - Warning: trimming empty <tr>
line 400 column 50 - Warning: trimming empty <font>
line 125 column 68 - Warning: <nobr> is not approved by W3C
line 141 column 68 - Warning: <nobr> is not approved by W3C
line 177 column 27 - Warning: <nobr> is not approved by W3C
line 203 column 27 - Warning: <nobr> is not approved by W3C
line 230 column 27 - Warning: <nobr> is not approved by W3C
line 260 column 27 - Warning: <nobr> is not approved by W3C
line 293 column 27 - Warning: <nobr> is not approved by W3C
line 324 column 27 - Warning: <nobr> is not approved by W3C
line 355 column 27 - Warning: <nobr> is not approved by W3C
line 392 column 27 - Warning: <nobr> is not approved by W3C
Info: Document content looks like HTML5
Info: No system identifier in emitted doctype
Tidy found 182 warnings and 1 error!

The alt attribute should be used to give a short description
of an image; longer descriptions should be given with the
longdesc attribute which takes a URL linked to the description.
These measures are needed for people using non-graphical browsers.

For further advice on how to make your pages accessible
see http://www.w3.org/WAI/GL.
You are recommended to use CSS to specify the font and
properties such as its size and color. This will reduce
the size of HTML files and make them easier to maintain
compared with using <FONT> elements.

You are recommended to use CSS to control line wrapping.
Use "white-space: nowrap" to inhibit wrapping in place
of inserting <NOBR>...</NOBR> into the markup.

About HTML Tidy: https://github.com/htacg/tidy-html5
Bug reports and comments: https://github.com/htacg/tidy-html5/issues
Official mailing list: https://lists.w3.org/Archives/Public/public-htacg/
Latest HTML specification: http://dev.w3.org/html5/spec-author-view/
Validate your HTML documents: http://validator.w3.org/nu/
Lobby your company to join the W3C: http://www.w3.org/Consortium

Do you speak a language other than English, or a different variant of
English? Consider helping us to localize HTML Tidy. For details please see
https://github.com/htacg/tidy-html5/blob/master/README/LOCALIZE.md