[sxsw2013] Extremely Compressed JPEGs
•
22 likes•2,799 views
The document appears to be a presentation about designing web and mobile graphics. It discusses using different sized image assets and the <picture> element to serve the optimal image based on screen size. It shows examples of image sizes for different screen densities and dimensions. It also discusses compressing images to reduce file size while maintaining quality.
Report
Share
More Related Content
Similar to [sxsw2013] Extremely Compressed JPEGs
Similar to [sxsw2013] Extremely Compressed JPEGs (20)
More from Christopher Schmitt
More from Christopher Schmitt (20)
Recently uploaded
Recently uploaded (20)
[sxsw2013] Extremely Compressed JPEGs
- 1. CHRISTOPHER SCHMITT @teleject DESIGNING WEB &MOBILE GRAPHICS SXSW 2013
- 5. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv
- 6. Mozilla/1.0 (Win3.1) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
- 7. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
- 8. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/ 534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3 http://webaim.org/blog/user-agent-string-history/ (cc) flic.kr/p/vUBHv
- 9. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/ 534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3 http://webaim.org/blog/user-agent-string-history/ (cc) flic.kr/p/vUBHv
- 12. SVG
- 19. OS X Lion The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X Lion takes the Mac further than ever. Learn More iCloud iOS 5 OSX Lion iPad 2 iPhone
- 20. ! OS X Lion " ← The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X ↑ Lion takes the Mac further than ever. Learn More iCloud iOS 5 OSX Lion iPad 2 iPhone
- 21. ! ↙ OS X Lion " ← ← The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X ↗ ↑ Lion takes the Mac further than ever. ↖ Learn More ↑ ↖ iCloud iOS 5 OSX Lion iPad 2 iPhone
- 22. ↑ ↗ OS X Lion ← " " The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X ↙ ! Lion takes the Mac further than ever. ↘ Learn More ! ↘ iCloud iOS 5 OSX Lion iPad 2 iPhone
- 25. 446kb < 8,755.2kb 0% vs 100% (cc) flic.kr/p/64fGf6
- 26. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb 1024x1536 2x 1,745kb Extra Large 512x768 1x 503kb 640x960 2x 746kb Large 320x480 1x 223kb 500x750 2x 485kb Medium 250x375 1x 145kb
- 27. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb 1024x1536 2x 1,745kb Extra Large 512x768 1x 503kb 640x960 2x 746kb Large 320x480 1x 223kb 500x750 2x 485kb Medium 250x375 1x 145kb
- 28. <picture> Patch <picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <!-- <source src="small.jpg"> --> <source src="small.jpg"> <!-- <source src="medium.jpg" media="(min-width: 400px)"> --> <source src="medium.jpg" media="(min-width: 400px)"> <!-- <source src="large.jpg" media="(min-width: 800px)"> --> <source src="large.jpg" media="(min-width: 800px)"> <!-- Fallback content for non-JS browsers. Same src as the initial source element. --> <noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript> </picture> http://www.w3.org/community/respimg/2012/03/15/polyfilling- picture-without-the-overhead/
- 29. One Image, One IMG <img src="rock-climber.jpg" alt="" />
- 31. EXTREMELY COMPRESSED PROBLEMS (cc) flic.kr/p/64fGf6
- 35. THANK YOU! CHRISTOPHER SCHMITT @teleject http://goo.gl/gSYmS @DWMGbook