33% use mobile as PRIMARYway to accessSmaller screens + slower networks
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?
Retina screens are nice because we can show clearer images, but 2x larger images are also ~4x the file size
For a lot of users, we’re making the internet SUCK waaaaay more.STILL NOT CONVINCED?
- 30 terms : 20% less searches....speed matters.- page weight -30% : +30% more REQUESTS- Project 22% faster and saw 18% more page views.
SVGs are Illustrator files for the web
Bonus points if you use: SVGO (Optimizer)SVGs can’t be uploaded to WP by default
So we’re good to go right?(Sad trombone)
SVG as background imageFEAUTRE Detection adds a class to the body tag
Using SVGs in your HTML??
NO feature detectionNOTE the double download.
Uses ONERROR=…</SVG>
DASHICONS since WP3.8ICOMOON
Similar symbolsPrivate use UnicodeUse ARIA
TIP:SPRITES can be added to :BEFOREpseudo-ELEMENTCHECK TIME. Pause for questions maybe.
ImageOptim: Right click > Services > ImageOptimCompress a whole folder full of images. So good.
That’s how you show layout appropriate images.But truly responsive means right image forThe right context…so: