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 1000px x 1000pxqualidade 20mesmos 80KB 320px x 100pxexportado do Inkscapesó 9 KB 640px x 200pxexportado do Inkscape19 KB @1x @1x @2x @2x 640px x 200pxotimizado como PNG-8só 7 KB @2x WORKFLOW PREFIRAVETOR CRIE PRARETINA AUTOMATIZE NÃOBITOLE TESTE MUITO BÔNUS OTIMIZEO SVG COMPRESSÃO Inkscape > Save As > Optimized SVGsvgo / scour COMPRESSÃO Habilite GZIP! SPRITES grunticonsvg_stack FAVICONRETINA xiconeditor.com SEO IMAGE SITEMAP código exemplo ACESSIBILIDADE WAI-ARIA código exemplo REPENSANDO O FRONT-END PARA TELAS DE ALTA RESOLUÇÃO sergiolopes.org@sergio_caelum OBRIGADO FONTES SÃOINDEPENDENTESDE RESOLUÇÃO ESQUEÇAFRAMEWORKSRETINA retina.js, picturefill,adaptative images, capturing, etc PORTABILIDADE cupom 10% offFRONTINBH10 cupom 10% offFRONTINBH10 200px físicos 100 DIP EFICIENTEMENTE NA WEB COMO TESTARRETINA SEM TER UMAPARELHO RETINA MEDIA QUERY&devicePixelRatio USABILIDADE
babuino

Babuíno

babuino
@font-face {
    font-family: 'PT Sans';
    src: url('pt-sans.ttf');
    font-weight: normal;
    font-style: normal;
}

.titulo {
    font-family: 'PT Sans';
}
@font-face {
    font-family: 'Icones';
    src: url('icones.eot');
    src: url('icones.eot?#iefix') 
            format('embedded-opentype'),
         url('icones.woff') format('woff'),
         url('icones.ttf') format('truetype'),
         url('icones.svg#pt_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.icone-legal {
    font-family: 'Icones';
}
screencast diferença ícones
<img src="logo.svg">
<!doctype html>
<html>
<body>
<h1>Meu teste de SVG</h1>

<svg>
  <circle cx="50" cy="50" r="40" fill="#F90">
</svg>

</body>
</html>
.logo {
    background: url(logo.svg) no-repeat;
}
<img src="logo.svg" 
     onerror="this.src='logo.png'">
.svg .logo {
    background: url(logo.svg) no-repeat;
}

.no-svg .logo {
    background: url(logo.png) no-repeat;
}
<img src="foto.jpg">

<img src="grafico.png">            
<img src="fallback.jpg" 
     srcset="foto.jpg 1x, retina.jpg 2x">


<img src="fallback.jpg"
     src2="(min-width: 400px) medium.jpg"
     src3="(min-width: 1000px) large.jpg">
.foto {
    background: url(foto-normal.jpg) no-repeat;
}

@media (resolution: 2dppx) {
    .foto {
        background-image: url(foto-retina.jpg);
        background-size: 100%;
    }
}
.foto {
    background: url(foto-normal.jpg) no-repeat;
}

@media (-webkit-min-device-pixel-ratio: 1.5),
       (min-resolution: 144dpi) {

    .foto {
        background-image: url(foto-retina.jpg);
        background-size: 100%;
    }
}
<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
 
 <url>
   <loc>http://example.com/exemplo.html</loc>
   
   <image:image>
     <image:loc>http://example.com/image.jpg</image:loc> 
     <image:title>Minha foto bacana</image:title>
   </image:image>
 </url> 
</urlset> 
<div class="foto" role="img" 
     aria-label="Semanticamente, sou uma foto!">
</div>