image/svg+xml COMO SUPORTAR TELAS DE ALTA RESOLUÇÃO sergiolopes.org@sergio_caelum TELAS DEALTA RESOLUÇÃO px != px .nuvem { width: 100px;} .nuvem { width: 100px;} .nuvem { width: 100px;} .nuvem { width: 100px;} 100px 200px .nuvem { width: 100px;} 100px físicos pixel físicovs.device independent pixel (DIP) device pixel ratio(dPR) pixel físicosDIPs dPR = device pixel ratio 0.7511.331.523 low dpinormal, mdpitvdpihdpiretina, xhdpixxhdpi device pixel ratio 0.7511.331.523 Galaxy 5, Galaxy Ynormal, iPhone, iPadNexus 7Galaxy S2iPhone/iPad/MacBook retina, Galaxy S3, Nexus 4Galaxy S4 device pixel ratio 12 normalretina O PROBLEMADAS TELAS DEALTA RESOLUÇÃO COMO SUPORTARAS TELAS DEALTA RESOLUÇÃO TEXTO CSS border-radius box-shadowtext-shadow background-image: linear-gradient(#F90,#000) opacityrgba transform: rotateskew ... filter: blur, saturate, grayscale, ... ICONFONTS PT-Sans.ttf A B C D E F G H I J K L M N Oa b c d e f g h i j k l m n o p q0 1 2 3 4 5 6 7 8 9 . ! ? , : ; " ' ] [ { } ( ) - + = codigo usando fonte no CSS Icones.ttf codigo usando fonte no CSS multiplas cores no icone da caelum text-shadow e tamanhosda caelum desenhos multi-cor e complexos compatibilidade e diferencasscreenshot IE vs Chrome vs Firefoxe é trabalhoso, exige ferramentasmto especificas SVG SUPORTE codigo, opcao 1: <img> codigo, opcao 2: inline codigo, opcao 3: css bg <img onerror>downloads multiplos, whatever CSS feature detect <svg width="100" height="80" ...<svg viewBox="0 0 100 80" ... FOTOS <img src jpg e png <img> com futuro srcsetcomenta <pict futuro media -queries com min-resolution: 2ppx media -queries completa PERFORMANCE,CERTO? COMPRESSIVEIMAGES 500px x 500pxqualidade 8080KB