by Christopher Schmitt at HTML5 Texas Conference, Austin, Texas (Deck)
“The open web doesn’t stop at our desktop. Smart phones and tablets not only contain more computing power and better browsers than the computers that started the Internet economy, they have better displays.In this session presented by Christopher Schmitt, we will work through tips and tricks to develop future friendly images in our sites and apps.”
Think about the iPad, which presents so many design challenges. It can be wi-fi only or 3G, so bandwidth issues can be present. It has retina, so there can be display issues. When you design for web, you want to have great-looking images, but how do we get higher resolution images to those devices.
Why don’t we ask the browser? http://www.usearagentstring.com/ Available since the first browser Mozilla/1.0 (Win3.1), but browser put tons of stuff in the user agent string and can be spoofed. Instead of asking the browser, we do feature testing.
Feature Testing vs Browser Sniffing
- Browser width
- Speed Tests
You can script it with JavaScript, jQuery or css media queries.
72 ppi (pixels per inch or points per inch) was standard – Windows increased it to 96 ppi. Retina display is 300 ppi at 12 inches from the eye. Give crisper text and changes resolution based on type of device.
[In 2013, Intel sees their product line] offer a higher resolution experience than a top of the line 1080p television.
Retina display means larger images and longer download times, so we can’t just serve those large files to everyone.
Speed Tests Hinder Speed and User Experience.
“Testing for speed of an internet connection is like stepping in front of a car to see how fast it’s going” – Christopher Schmitt
Mobile devices have a native speed test
- .htaccess
- <picture> and/or srcset
- HiSRC
Filament .htaccess – add additional content to an image tag
<script src=”responsiveimgs.js”></script>
The server has now way to know what resolution the client’s device is.
Add .htaccess, js, php5, gd lib*, & then <img>
media queries in HTML – borrow from the video element http://www.w3.org/community/respimg/2012/03/15/polyfilling-picture-without-the-overhead/
add if-lese html, js borrow <vide0>
@srcset standard – proposed
HiSRC – HD
Set, forget it
<script src=”hisrc.js”>
HiSRC does a series of checks to find out responsive path for images. Includes a native speed test. Checks pixel density. Forces a speed test. If speed is less than 4G, gives desktop images – high speed/high density swaps in retina images
Browsers that prefetch can be tricky.
css is core – use css media queries
Workarounds & Tricks
- background-size: auto
- SVG
- font-based solutions
- compressed jpegs
Native SVG – HTML5 Broilerplace
jQuery check
Use unicode characters <meta charset=”utf-8″>
Font-based RWD – font-family can require downloading more fonts
Icon Fonts – be careful if the icons are based on a character in the font
Compressed jpegs – make a large jpeg and compress it at 100%. Doesn’t work with high contrast or subtle gradients. Works well on images with a nice valley in the histogram, not when there are spikes. imageoptim
IMG – New school (we need a responsive image format where the browser pulls in the right size image, like the .ico file)
http://nonbreakingspace.tv
What do YOU think? Let me know...