Responsive Images (STL WordCamp 2014)

Notas do Editor

1. Intro, welcome to Wash U,
2. 33% use mobile as PRIMARYway to accessSmaller screens + slower networks
3. While more people are using SMALLER SREENS with SLOWER NETWORKS to access our websites, the SIZE is getting BIGGER.----- Meeting Notes (3/1/14 07:16) -----The amount is the SAME. Just bigger. Why?
4. Retina screens are nice because we can show clearer images, but 2x larger images are also ~4x the file size
5. For a lot of users, we’re making the internet SUCK waaaaay more.STILL NOT CONVINCED?
6. - 30 terms : 20% less searches....speed matters.- page weight -30% : +30% more REQUESTS- Project 22% faster and saw 18% more page views.
7. SVGs are Illustrator files for the web
8. Bonus points if you use: SVGO (Optimizer)SVGs can’t be uploaded to WP by default
9. So we’re good to go right?(Sad trombone)
10. SVG as background imageFEAUTRE Detection adds a class to the body tag
11. Using SVGs in your HTML??
12. NO feature detectionNOTE the double download.
13. Uses ONERROR=…</SVG>
14. DASHICONS since WP3.8ICOMOON
15. Similar symbolsPrivate use UnicodeUse ARIA
16. TIP:SPRITES can be added to :BEFOREpseudo-ELEMENTCHECK TIME. Pause for questions maybe.
17. ImageOptim: Right click > Services > ImageOptimCompress a whole folder full of images. So good.
18. That’s how you show layout appropriate images.But truly responsive means right image forThe right context…so: