Thoughts on the Contrast Swap Technique for Improving Performance

In her post three days ago on CSS Tricks, Una Kravets described a clever technique she discovered for significantly reducing image sizes on the web with little loss of quality. Essentially the idea is this: 

  1. Reduce the contrast of the image in Photoshop
  2. Re-apply contrast using CSS filter()

With this process, Kravets managed to get between 23% to 28% reduction in image size, which can add up to a lot of KB if you have many images on the page. I think this technique is a great discovery and a boost for image-heavy sites that don’t need to worry much about good IE support… but. But, I can’t help but think it does smell a bit hacky.

This kind of contrast trickery shouldn’t be done in CSS, it should be in the image format. And to be clear, I don’t mean to criticize Una’s discovery. If it’s possible to reduce contrast and then re-apply it on the fly with little perceptible loss in quality, surely those instructions could be passed along in the image files themselves and not have to rely on a separate stylesheet which may or may not load? I guess we’d need a new image format for that…

Posted in Web

John Gruber on Annoying Sharing Bars

Over on Daring Fireball, John Gruber has some true words to say about those pesky floating sharing bars (or “dickbars” like he calls them) used by Medium and others.

A website should not fight the browser. Let the browser provide the chrome, and simply provide the content. Web developers know this is right — these dickbars are being rammed down their throats by SEO experts. The SEO folks are the same dopes who came up with the genius strategy of requiring 5-10 megabytes of privacy-intrusive CPU-intensive JavaScript on every page load that slows down websites. Now they come to their teams and say, “Our pages are too slow — we gotta move to AMP so our pages load fast.”

Switched to a VPS, again

During the years, my blog hosting has gone back and forth between a self-configured VPS and shared hosting. Thanks to a special WordCamp Europe 2015 offer, for the past couple of years I’ve been on Siteground shared hosting, which has worked fine. I certainly have no complaints: the site has been fast, setup was easy with free SSL, but… a nerd’s gotta be nerdy. As the subscription for my shared hosting was about to expire, I looked around for options, and decided to go for a small VPS on DigitalOcean for $5/month (yes that’s a referral link). One reason I chose them was their comprehensive set of tutorials, but I was still suprised how quickly and painlessly I got my virtual server set up with Ubuntu, Nginx, SSL and WordPress, in just a couple of hours. Simply by following instructions, so I can’t claim to be very clever.

Let’s see how long this lasts.

CSS Grid Layout and Accessibility

CSS Grid is the future. However just like with many other layout techniques, it’s very easy to go crazy with it and cause an accessibility nightmare. There’s an excellent article on MDN on potential pitfalls:

If at any time in the design process you find yourself using grid to relocate the position of an element, consider whether you should return to your document and make a change to the logical order too. 

Full article: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility