Stress guy looks like a crappy jpeg in Chrome, but stays nice and clean in Firefox and IE. Huh! Wonder if there’s something I can do on my end to get around that.
38. Paying Attention Ain’t Free
The Illustrated Guide to Law
The comic that teaches what the law is, how it really works, and why.
He’s alive! He’s aliiiiiive
Welcome back, Nathan. We missed you.
And thanks for the updates at the last page, they helped us survive without our dose.
Glad to be back!
Trial is hands-down my favorite part of being a lawyer, but there’s no room for anything else when it’s happening.
So, if you needed a scotch to appease the gypsy, what would it be?
And what do you draw all this in (and which tablet/? do you use)?
An Oban for me, a Talisker for her.
I use Paint Shop Pro. It’s got everything I use from Photoshop, Illustrator, and Paint in a single program. It’s not perfect, but I don’t have to keep switching back and forth between applications. For the actual drawing, I used to do it on a Bamboo, but a little while ago I upgraded to a Cintiq and it’s been worth every penny.
Both good, but I’ll take a Laphroaig Quarter Cask.
Ah, that explains a lot. My wallet has attention deficit disorder.
Where’s the damn upvote button?
Regarding image quality:
WordPress and Chrome are optimizing the page’s loading time, at the cost of quality, by transparently re-encoding your image into the WebP format. The WebP format is lossy, like JPEG, hence the artifacts. This implementation is particularly insidious, because if you download/save the image using Chrome, it downloads and saves the original version, a lossless indexed PNG. The original indexed PNG is what Firefox and IE display.
Chrome appears to be explicitly requesting the WebP format from the WordPress server. I’m not sure if this is part of a Google Pagespeed service (no time now to investigate). Google Pagespeed provides a module for webservers (including nginx, which is serving the image) and there appear to be WordPress plugins involving Pagespeed as well.
You might check for image-quality or -optimization related blog settings, or Pagespeed-sounding plugins. (I’m not familiar with WordPress — anyone else?) Good luck.
This is not web-development advice, and does not create or imply a web-developer – client relationship.
Ha!
Srsly, tho, I’d have thought it’d slow things down for the browser to send a request, and for the server to then convert the png to a webp, rather than just send the darn png.
The request is sent either way, and while the conversion adds a few microseconds (at the server) a reduced file might subtract several milliseconds (at the wire), so there’s usually a net gain. Not always, though – it’s a bit of a gamble, the goal is to get right more often than you get wrong. Since [supposedly] there are more photographs than line drawings in the Internet, it kinda makes sense to convert pngs to a “lossy” format by default, unless the user/administrator explicitly disables it.
I’ve wondered what “transparently” means in this context. I thought that maybe it would mean “transparent” in the sense of “you can see what’s going on inside”, but here it seems to mean the opposite of that.
Moral: don’t use Chrome. Or don’t use WordPress. Or maybe both, I don’t know.
Here it’s “transparent” in the sense of “invisible” or “not blocking”.
One could imagine a process where you ask for a file, and the server refuses to give it to you because it doesn’t exist, so you have to send a new message asking the server to create it for you.
Instead of doing that, when you ask for the file that doesn’t exist, the server just decides to create it without telling you, then give it to you as if it existed all along, so you (maybe) don’t even realize that it had to be created. You can see the end result of the process (the file you asked for) without your view being obstructed by the extra steps required to get there–those extra steps are therefore “transparent”.
There are two ideas from this chapter I would like to talk about:
1) Memory is not like a video camera.
2) One has only a limited amount of attention to spend.
I am mildly surprised that these two ideas are not already common knowledge. I would think that everyday life experience would be enough to convince one of their truth.
As for idea #1: who reading this has never “thought” that they remembered something (and possibly even acted on the “remembered” information), only to find out that their memory was wrong?
As for idea #2: who here has not had great difficulty accomplishing a task due to someone or something distracting them?
I think most people’s response to situation #1 is one of:
– I, individually, am losing my marbles.
– No, you’re wrong. It is definitely how I remember it
— Stop gaslighting me (if someone with more ranks in SJ can jump in here and give a non-overbroad definition for gaslighting, that would be wonderful)
– [doesnt notice anything and changes their memory a third time in response to the suggestion that they are wrong]
Gaslighting: deliberately spinning, twisting, or faking information or the environment to make the victim doubt their own memory and mental stability.
That is close to what I originally read when first learning about the concept and is a reasonably narrow concept. I’ve since encountered the definition
” Gaslighting is the attempt of one person to overwrite another person’s reality”, which is a rather broad definition that would seem to include any strenuous disagreement of fact.
https://medium.com/@sheaemmafett/10-things-i-wish-i-d-known-about-gaslighting-22234cb5e407
WordPress Jetpack’s Photon image-acceleration service is recompressing the images. Apparently you’ve set up your blog to use Jetpack and Photon.
Here’s where they describe Photon,
explain the lossy-compression options,
and tout adding WebP support.
Here are some observed file-sizes of this page’s image:
– Your original upload, on your blog server: 362 KiB
– Photon PNG, indexed and optimized [Firefox]: 108 KiB
– Photon WebP, artifacts and all [Chrome]: 82 KiB
Is this worth it? On my PC, converting the original PNG to WebP takes 131 milliseconds. Photon only needs to do this once, or once per edge-server, since the converted image can be cached in the Jetpack CDN. On my internet connection, the WebP-version of this page’s comic (via Jetpack) downloaded at about 360 KiB/s (numbers are approximate). Consequently, converting the original to WebP saved 667 milliseconds of download time.
(Photon’s indexed PNG, of course, as served to Firefox, still saves about 600ms over the original, in that scenario; as noted, WebP is best used for photographs.) Consulting the Photon documentation, linked above, yields the `quality` query-string argument, which lets you specify how little to compress your images. To disable lossy compression, and serve PNG to all browsers, use `quality=100`, like this:
There’s actually still some optimization being done, as the resulting PNG is 316KiB, instead of 362KiB, but the image data is unaffected. The downside, unsurprisingly, is 3x slower loading times for your readers and the Jetpack CDN.
You might think that using `quality=99` would help: no such luck. Although this enables the 108KiB indexed-PNG for Firefox, due to a bug or limitation in Photon, the maximum supported quality for WebP is 80, and Chrome will receive the same muddy 82KiB WebP. (Perhaps the real bug in Photon is encoding PNGs using WebP at all, instead of reserving that indignity for JPEGs.) Unless you’re a sadist and wish to subject Chrome users to the lowest supported quality, which appears to be 20 —
*** Your choice is `quality=100` or no-change. ***
(Addendum: as it turns out, there’s no bug and there are no quality limits in Photon. If you can tolerate PHP, here’s the source: )
Thank you very much, Art!
Hmm — are URLs pending moderation, or not permitted inside angle-brackets, where the latter are mistaken for HTML tags? If it’s only the latter, I’ll retry here.
(2nd paragraph)
Photon: https://developer.wordpress.com/docs/photon/
Photon lossy compression: https://developer.wordpress.com/2015/02/04/lossy-image-compression-with-photon/
Photon lossy WebP: https://developer.wordpress.com/2015/06/25/photon-webp-image-support/
(5th paragraph)
“like this”: https://i0.wp.com/lawcomic.net/guide/wp-content/uploads/2015/07/pt05pg38v2.png?quality=100
(addendum)
PHP source: https://code.trac.wordpress.org/browser/photon/index.php#L687