SVG can do THAT?! by sdrasner
119 slides from Sarah on a wide range of SVG magic (with code).
Tags: images
143
Sunday, August 13th, 2017
Tuesday, March 21st, 2017
Lisbon Azulejos
When I was in Porto a few weeks back, I took lots of pictures of the beautiful tiles. They reminded me of the ubiquitous repeating background images that were so popular on the early web. I was thinking about abstracting them into a collection of reusable patterns but now it looks like I’ve been beaten to it!
Saturday, March 18th, 2017
google/guetzli: Perceptual JPEG encoder
Google have released this encoder for JPEGs which promises 20-30% smaller file sizes without any perceptible loss of quality.
Sunday, March 12th, 2017
WebPonize - webponize.github.io
A Mac app for converting PNGs and JPEGs to WebP.
Friday, March 3rd, 2017
Small steps
The new Clearleft website is live! Huzzah!
Many people have been working very hard on it and it’s all looking rather nice. But, as I said before, the site launch isn’t the end—it’s just the beginning.
There are some obvious next steps: fixing bugs, adding content, tweaking copy, and, oh yeah, that whole “testing with real users” thing. But there’s also an opportunity to have some fun on the front end. Now that the site is out there in the wild, there’s a real incentive to improve its performance.
Off the top of my head, these are some areas where I think we can play around:
- Font loading. Right now the site is just using
@font-face. A smart font-loading strategy—at least for the body copy—could really help improve the perceived performance. - Responsive images. A long-term solution will require some wrangling on the back end, but I reckon we can come up with some way of generating different sized images to reference in
srcset. - Service worker. It’s a no-brainer. Now that the Clearleft site is (finally!) running on HTTPS, having a simple service worker to cache static assets like CSS, JavaScript and some images seems like the obvious next step. The question is: what other offline shenanigans could we get up to?
I’m looking forward to tinkering with some of those technologies. Each one should make an incremental improvement to the site’s performance. There are already some steps on the back-end that are making a big difference: upgrading to PHP7 and using HTTP2.
Now the real fun begins.
Thursday, March 2nd, 2017
microicon
These icons-as-a-service could be really useful for making quick’n’dirty HTML prototypes.
Wednesday, March 1st, 2017
State of Responsive Images 2017 - Cloud Four
Jason revisits responsive images. On the whole, things are looking good when it comes to browser support, but he points out that scrset’s precursor in CSS—image-set seems to have dropped off the radar of most browser makers, which is a real shame.
Tuesday, February 21st, 2017
Open Access at ESA
Images, videos, sounds, and 3D models are now available from the European Space Agency under a Creative Commons Attribution Share-alike license.
Saturday, February 18th, 2017
Base64 Encoding & Performance, Part 1: What’s Up with Base64?
Harry clearly outlines the performance problems of Base64 encoding images in stylesheets. He’s got a follow-up post with sample data.
Thursday, January 12th, 2017
Saving you bandwidth on Google+ through machine learning
This is an interesting use of voodoo magic (or “machine learning” as we call it now) by Google to interpolate data in a small image to create a larger version. A win for performance.
Tuesday, October 25th, 2016
Photo Toning with Gradients & Blend Modes
This use-case for blend modes is making me thirsty.
Also: look who’s blogging again!
Friday, September 30th, 2016
the new code – Even Stevens: Using Round and Space in Repeated Background Images
See, when I first heard about background-repeat: round; I thought it was something to do with making things circular. But no, it’s about tiling a background image so that nothing gets cut off. The amount of tiling required is rounded to the nearest whole number.
Now I get it.
Monday, August 29th, 2016
transceiver.frequency
Hypnotic.
Wednesday, August 24th, 2016
Psiu Puxa Wallpapers
Yummy wallpapers for your desktop, tablet, and phone, from NASA and ESA.
Friday, April 22nd, 2016
chartd - responsive, retina-compatible charts with just an img tag
This could be a handy replacement for some Google Charts images of graphs. It uses SVG and is responsive by default.
I bet it wouldn’t be too tricky to use this to make some sparklines.
Friday, April 15th, 2016
GitHub’s CSP journey - GitHub Engineering
A step-by-step walkthrough of how GitHub has tweaked its Content Security Policy over time. There are some valuable insights here, and I’m really, really happy to see companies share this kind of information.
Sunday, March 13th, 2016
Instagram-style filters in HTML5 Canvas | Viget
Una’s [Instagram filters in CSS}(https://github.com/una/CSSgram) are great, but the browser support for CSS filters isn’t as good as, say, the browser support for canvas. Here’s a clever bit of scripting to polyfill filters using canvas.
Wednesday, March 9th, 2016
Styling Broken Images
This is really, really clever. You can’t use generated content (:before and :after) on replaced content. The img element is replaced content …but only when the image actually loads. So if the image fails to load, you can apply specific fallback styles (using :before and :after).
Tuesday, January 26th, 2016
Responsive Image Breakpoints Generator by Cloudinary
A very handy tool for figuring out breakpoints for responsive images.
Upload an image in its largest size, play around with the settings, and then generate the breakpoints, the markup, and the resized images for each breakpoint.
Saturday, December 19th, 2015
SpaceHolder – A space-themed image placeholder service.
We’ve got Space Ipsum for text. Now we have SpaceHolder for images.