Using icon fonts
A handy walkthrough of using icon fonts. The examples here use the excellent IcoMoon service
Tags: image
Sensible jumps in responsive image file sizes
Some good thinking from Jason here. In a roundabout way, he’s saying that when it comes to responsive images—as with just about every other aspect of web development—the answer is …it depends.
Scalable Bitmaps
Some thoughts (and code) on responsive images.
National Geographic Found
Celebrating 125 years of National Geographic, this Tumblr blog is a curated collection of photography from the archives. Many of the pictures are being published for the first time.
Thumbs and Ammo
Ay!
Using SVG on CSS-Tricks
Chris takes a look at all the different ways you can use SVG today.
The Edge of the Web at Responsive Day Out
Slides, videos, and links from Paul’s presentation at the Responsive Day Out.
Protip: All browsers that support SVG background images also supports multiple background images.
A very hand tip from Ben on using SVG background images with a PNG fallback for IE8 and below.
YOU HAD ONE JOB!
Funny and painful in equal measure.
A primer to front-end SVG hacking by David Bushell – Web Design & Front-end Development
Everything you ever wanted to know about using SVG today.
Stratocam
Communal satellite eyes. A Mac screensaver is also available.
Flickr: ugordan’s Photostream
Gorgeous colour-processed images from NASA probes. I could stare at the fountains of Enceladus all day.
PlaceIt by Breezi - Generate Product Screenshots in Realistic Environments
A cute little service for mocking up pictures of your site being used on different devices. Just drag and drop a screenshot on to an image.
Deploying New Image Formats on the Web - igvita.com
A well-reasoned argument for tackling image optimisation on the server, using content-type negotiation.
Black Marble - City Lights 2012 - a set on Flickr
Gorgeous pictures from the Suomi satellite, just released by NASA
❍ IcoMoon
This is a great free service for generating small subsetted icon fonts. Launch the app and have a play around — you can choose from the icons provided or you can import your own SVG shapes.
Nice touch: you can get the resulting font (mapped to your choice of unicode characters) base-64 encoded for your stylesheet.
Retina revolution
You’ve probably seen this already, but it’s really worth bearing in mind: when you’re scaling up JPGs for retina display you can safely reduce the image quality by quite a lot—to the point of getting the exact same file size as a higher quality image that’s half the size.
Photo Album - Imgur
At least one of these will probably drive you crazy.
A List Apart: Articles: Mo’ Pixels Mo’ Problems
The kickass articles just keep on comin’. This one from Dave is a great overview of options for dealing with images in responsive designs.
A List Apart: Articles: The Web Aesthetic
A really great article from Paul that simultaneously takes a high-level view of the web while also focusing on the details. A lot of work went into this.
Responsive Web Design Patterns | This Is Responsive
A great collection of layout, navigation, and interaction patterns for responsive sites, delivered by Brad.
rekall
The not-so-new-but-hella-fun aesthetic.
JPEGmini - Your Photos on a Diet!
This looks like a really handy tool for reducing the file size of JPEGs without any perceptible loss of quality (in much the same way that ImageOptim works for PNGs)—available as a Mac app or an installable web service.
Uncle Dave’s Ol’ Padded Box - Dave Rupert
Yet another brilliant technique from Dave. The only caveat is that it uses background images rather than img elements, but it’s still very powerful (and very clever).
80’s Touch
The Old Aesthetic. It’s eighties-tastic!
Squirrel!
Here’s a brainbuster for ya: a single file that renders both as HTML and as a JPEG. As an HTML page, it even contains an img element with a src of …itself!
Compare the “view source” output with the generated source output to see it’s being interpreted.
Aegir Hallmundur, designer and maker of things.
Aegir’s portfolio is a thing of a beauty on every screen size.
Stretchy Pictures | Aegirscopic
Aegir is doing some very smart image enhancement in his (responsive) portfolio. Here’s the explanation.
Florian’s Compromise | Responsive Images Community Group
Wilto does an excellent job of summarising the current state of responsive images, highlighting Florian Rivoal’s compromise proposal that combines the best of the picture element with the best of srcset.
How We Improved Page Speed By Cleaning CSS, HTML and Images | Dyn Blog
Some good practical advice on improving performance. This should all be familiar to you, but it’s always worth repeating.
Responsive images: what’s the problem, and how do we fix it? - Dev.Opera
A nice round-up of the issues around responsive images and their potential solutions.
NoisePNG - Generate noisy PNG-images with alpha-transparency
If you’re adding some noise texture to your backgrounds, this little service might be handy. I usually base-64 encode these kinds of background images: it would be nice to see that added as an option here.
The responsive images problem
A run-down of the various approaches to the responsive images problem, concluding that this is something that needs to be solved in the image format.
» The real conflict behind picture and @srcset (Cloud Four Blog)
Jason outlines the real challenge to every proposed solution for responsive images: they just don’t jibe with the way that browsers (quite rightly) pre-fetch images.
Shallow Thoughts » srcset vs. picture
A well thought-out evaluation on responsive images from Bridget.
Jordan Moore: Source Shuffling—Responsive Images Based On Media Queries
Combine the lowsrc-like image technique I blogged about with the conditional CSS technique I blogged about and this is the result.
In Flux | Trent Walton
Trent offers some excellent advice for dealing with the effects of the iPad’s retina display on your websites. That advice is: don’t panic.
Responsive image format - blog
An idea for handling responsive images not with a new format, but with an existing one: progressive JPGs.
Highly optimized images for the web in 3 steps | pasz.nl/blog
Some practical advice for optimising your images on the web.
Internet! - Imgur
The Old Aesthetic.
tubalmartin/riloadr
This responsive image technique has a lot of moving parts but it seems pretty solid.
The state of responsive images | Feature | .net magazine
Wilto gives a thorough explanation of the state of things with responsive images, particularly the work being done at the Responsive Images Community Group at the W3C.
Media Query & Asset Downloading Results | TimKadlec.com
Tim has published the results of a whole bunch of testing he did on how different browsers deal with hidden or replaced images.
LukeW | Vector Images for Mobile
Luke rounds up some of the alternatives to bitmap-based images—an increasingly important topic for “resolutionary” “retina’ displays (bleurgh!).
ImageAlpha — lossy compression for 24-bit PNG images
From Kornel, the genius who gave us ImageOptim, comes another Mac desktop tool for optimising PNGs, this time converting 24-bit PNG to 8-bit with full alpha channel.
Responsive Summit » Blog » Elliot Jay Stocks
Elliot jots down some of the issues discussed at the responsive summit.
How I Learned to Stop Worrying and Love Responsive Images — Paul Robert Lloyd
Here’s a great braindump from Paul following the Responsive Summit, detailing multiple ways of potentially tackling the issue of responsive images.
JoshEmerson.co.uk · Blog · The Responsive Process
Josh goes through the talking points from the recent Responsive Summit he attended. Sounds like it was a great get-together.
A better responsive image format - Stuff in my head
Here’s a new angle on tackling the responsive image problem: what if the file format itself could specify multiple image sizes?
Responsive Images Community Group
There’s a W3C community group now for looking at the responsive images question.
A List Apart: Articles: Responsive Images: How they Almost Worked and What We Need
A terrific article from Wilto detailing the thinking that went into the Boston Globe’s responsive image techniques and how browser pre-caching is now throwing a spanner in the works.
Search by Image, Recursively, Transparent PNG, #1 on Vimeo
2951 images at 12 frames per second. Each image is the “related image” of the image before according to Google image search. The first image is simply a transparent PNG.
Sirens | Aaron Mentele
Some very interesting results from testing background image downloads contained within media queries or overridden with media queries: it turns out that, in iOS at least, the browser is getting smarter and smarter.
Responsive IMGs Part 2 — In-depth Look at Techniques « Cloud Four
Jason continues his look at responsive images techniques by diving into the nitty-gritty of the various options out there.
That Squiggle of the Design Process | Central
A visual representation of the design process.
Responsive images without Javascript - Notebook
This isn’t recommended as a robust means of delivering responsive images, but it’s still quite clever: using media queries to pass information to the server about the viewport size.
Responsive IMGs — Part 1 « Cloud Four
Jason takes a high-level look at tackling mobile-first responsive images (his next post will dig into the details). This is a really good summation of current thinking. Be sure to read the comments too: Andy chimes in with his experiences.
Responsive design and JavaScript - QuirksBlog
Unfortunately this article from PPK is flawed from the start: his first point (upon which all the subsequent points are based) is fundamentally flawed:
Right now responsive design is graceful degradation: design something for desktop and tablet, and remove stuff for mobile.
That’s not the way I’m doing responsive design. Responsible responsive design marries it with a mobile first approach (or more accurately, content first).
Creating responsive images using the noscript tag | Head
Now this is intriguing: putting your default images inside a noscript element, then do your viewport measuring and image-swapping before removing the noscript tags. But when I tried this a while back, I couldn’t get access to the noscript elements with JavaScript (which makes sense, when you think about it).
I wonder if it’s the use of class names or jQuery that allows it to work here?
Responsive HTML images
If you’re trying to retrofit an existing desktop-centric site for small screens, this server-side image-resizing technique might be useful but is definitely not the right tool for a content-out, small-screen-first approach.
FlexSlider - The Best Responsive jQuery Slider
This is something we’ve previously had to build from scratch at Clearleft so it’s nice to see an off-the-shelf solution.
Responsive images with ExpressionEngine — John Faulds
Here’s an approach to responsive images in the Expression Engine CMS …but I fundamentally disagree with the UA-sniffing required.
Responsive images using CSS3 – Nicolas Gallagher
Once there’s better support for the CSS3 attr() function, this could be a nifty way of handling responsive images (although large-screen user-agents will download more than one image).
Responsive images right now — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts
Another approach to responsive images, this time using background images. The disadvantage is that large-screen devices will download both images. Still, pretty darn clever.
Responsive images using cookies | Keith Clark
A well-thought approach to responsive images (although personally, I would use cookies to store the dimensions of the viewport rather than the dimensions of the screen).
JoshEmerson.co.uk · Blog · Base64 and the tiling background
Josh explains the pros and cons of embedding background images in your CSS using base 64 encoding.
The Cicada Principle and Why It Matters to Web Designers » HTML & CSS, Layout » Design Festival
A lovely bit of experimentation with prime numbers and multiple background images.
Media Query Test
Testing ways of only displaying background images on large screens whilst ensuring that they aren’t downloaded for smaller screens.
Jon Rafman
Some of the more unusual moments in time that have been captured by Google Street View. There’s something very Gibsonian about this.
{placekitten}
I may have to start using this for placeholder images—it won’t be distracting, right?
filamentgroup/Responsive-Images - GitHub
Some very smart ideas here for responsively enhancing image requests.
Yet Another Placeholder Generator
Look what Norm! built: it's another placeholder image service, but this is one that you can install and run on your own machine.
PaintbrushJS v0.1 Demo Page
A fantastic bit of image manipulation JavaScript from Dave.
Multiple Backgrounds and Borders with CSS 2.1 – Nicolas Gallagher — Blog & Ephemera
A clever technique to create the effect of multiple background images using the :before and :after pseudo-elements.
border-image-generator - In Case of Stairs
A very handy GUI for figuring out the somewhat complicated syntax of border-image in CSS3.
Placehold.it - Quick and simple image placeholders
This will be very, very handy for my day-to-day front end development work.
ignore the code: Realism in UI Design
Finding the sweet spot between realism and abstraction in interface elements.
Assorted GARbage» Blog Archive » The Secret to Transparency with PNG8’s and IE6
I'm kicking myself that I didn't know about this little Fireworks trick.
three frames
There is something utterly hypnotic and disturbing about these three-frame looping animations.
Social Media Icons — Paul Robert Lloyd
A set of icons (in different sizes) from various trendy websites to use in your designs.
Classics in Lego - a set on Flickr
Classic photographs recreated in Lego.
Fluid Images — Unstoppable Robot Ninja
Ethan follows up his Fluid Grids article with an equally excellent piece on resizing images.
Multicolr Search Lab - Idée Inc.
A beautiful use of the Flickr API that allows you to browse photos with a colour picker.
Crowd-sourcing a "fair use" case (Lessig Blog)
The Fair Use Project needs your help in defending Shepard Fairey. Have you seen other photographs similar to the iconic Obama "hope" pose? Send 'em to shep_use@pobox.com.
Part 1/5, My Favorite Graph: at the Equator
"I love this graph because in one small space, it shows the time of Sunrise and Sunset across the entire world throughout all Latitudes throughout the entire year of this tilted planet."
polaroiderizer - a slideshow from your flickr tags
A great little Flickr slideshow from Phil Hawksworth.
Juicy Studio: Requiring the alt Attribute in HTML5
Gez lays out the case for and against keeping the alt attribute mandatory in HTML5. If he's missed anything, add a comment.
The Art of Jim Denevan
The circlemakers work with vegetation. Andy Goldsworthy works with the landscape. Jim Denevan works with sand.
Networks - a set on Flickr
A collection of network diagrams and visualisations from the simple to the sublime.
HTTP errors - a photoset on Flickr
Friendlier HTTP errors.
Pixish: We bring visual artists and publishers together
The latest website from Derek Powazek allows artists and businesses to hook up. Nicely done.
Flight thru Instruments - a photoset on Flickr
A collection of beautiful illustrations scanned from a flight-training manual.
favikon
A great little tool for creating favicons.
My Christmas card image.
Actually, maybe this is the best picture on the internet. Take this picture brother, may it serve you well.
Blaby Conservative Future: Subscription Rate
This blogging Tory MP is stealing someone's bandwidth for the photo in this post. Said photo has been subtly altered. Hilarity ensues in the comments.
V2-panorama.jpg (JPEG Image, 3074x1816 pixels)
This is the first picture of Earth taken from space, specifically from a V2 rocket 60 miles up.
HubbleSite - NewsCenter - The Carina Nebula: Star Birth in the Extreme (04/24/2007) - Release Images
Another stunning image from the Hubble telescope. This image is heart-stoppingly beautiful.
Molt:n Core » Jeremy Keith killed JFK?
Apparently I look like Lee Harvey Oswald and Keanu Reeves. Whoa! Cameron Adams, on the other hand, looks like a bunch of girls (a bunch of hot girls, admittedly).
Urban Dirty: Free texture stock photography for your artwork, desktop and design
A nice collection of royalty free texture photos using the Flickr API.
Multiple CSS background images
Got Safari? Try resizing this page.