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:
- Reduce the contrast of the image in Photoshop
- Re-apply contrast using CSS
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…
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.
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.
If you’re at all interested in new CSS features and their implementations in browsers, bookmark this:
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