ImĂĄgenes Responsive y soporte Retina Display (v. 2016) www.xpert.video
Marlon Ceballos - @adobexpert Adobe Community Professional / Adobe CertiďŹ ed Instructor
pert pert
Learn design & code Learn design & code
www.xpert.video
CERTIFIED INSTRUCTOR Web C E R Design T I F I E DMaster I N S T R/ U C T OMaster R
Design Master / Web Master
CERTIFIED INSTRUCTOR
Design Master / Web Master
www.linkedin.com/in/marlonceballos/
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Learn
Learn
pert
design & code
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Conceptos fundamentales
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Imágenes en la web • <img src="image.jpg" alt="Description" height="42" width="42"> • www.w3schools.com/tags/tag_img.asp • www.w3.org/TR/html-markup/img.html.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Imágenes en la web • Inline por defecto • No es una etiqueta contenedora.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Comportamiento por defecto
1200px / 160kb
Learn
pert
design & code
700px / 160kb
www.xpert.video
300px / 160kb
CERTIFIED INSTRUCTOR
Design Master / Web Master
Como deberÃa ser
1200px / 160kb img-l.jpg
Learn
pert
design & code
700px / 45kb
300px / 12kb
img-m.jpg
img-s.jpg
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Imรกgenes responsive
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
www.responsiveimages.org
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Picturefill • Polyfill que habilita el soporte para <picture> • https://scottjehl.github.io/picturefill/ • Polyfill o polyfiller es un código que provee funcionalidades que no son soportadas nativamente por un navegador.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Picturefill - uso <script> document.createElement( "picture" ); </script> <script src="js/picturefill.min.js" async></script>
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
2 técnicas para RWD en Imágenes • Etiqueta <img> + atributos srcset y sizes - Imágenes grandes y/o alta resolución
• <picture> - Imágenes con diferencias de proporción,etc - Progressive enhancement.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Etapas iniciales • Defina las imágenes realmente necesarias • Definir tamaños: ej. 1200px (desktop), 800px (tablet), 500px (mobile) • Optimizar al máximo posible.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
E8queta <img> + atributos
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
srcset y w • <img src="image.jpg" alt="Description" srcset="imgs/img-s.jpg 600w, imgs/img-m.jpg 800w, imgs/img-l.jpg 1200"> • Tamaño del viewport o Width Descriptor (w) • http://w3c.github.io/html/semantics-embeddedcontent.html#element-attrdef-img-srcset.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Tamaños • El ejemplo anterior solo se controla el viewport • Es recomendado usar tamaños con el atributo sizes • sizes="(min-width: tamañoViewport) tamañoImg", valorDefecto.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Tamaños • <img src="image.jpg" alt="Description" srcset="imgs/img-s.jpg 600w, imgs/img-m.jpg 800w, imgs/img-l.jpg 1200" sizes="(min-width: 900px) 600px, 100vw"> • Tamaño del viewport • Tamaño de la imagen • Valor por defecto.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
X o Pixel Density Descriptor • Alternativa al Width Descriptor (w) • Permite definir una condición de densidad de pixeles bajo la cual se carga una imagen • Normalmente se usa en imágenes de tamaño fijo.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
X o Pixel Density Descriptor • <img src="image.jpg" alt="Description" srcset="imgs/img-s.jpg 1x, imgs/img-m.jpg 2x, imgs/img-l.jpg 3x"> • Indica la densidad de pantalla.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
E8queta <picture>
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
<picture> • La etiqueta <picture> contiene la etiqueta <img> y permite usar la etiqueta source • Permite mas control que la técnica anterior • No le deja la elección de imagen al navegador • La etiqueta source permite especificar Media Queries.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
<picture> • <picture> <source srcset="imgs/img-s.jpg, imgs/img-m.jpg 2x" media="(min-width: 800px)"> <source srcset="imgs/img-s.jpg, imgs/img-m.jpg 2x" media="(min-width: 900px)"> <img src="image.jpg" alt="Description" srcset="imgs/img-s.jpg 600w, imgs/img-m.jpg 800w"> </picture>
• <picture> contiene la etiqueta <img> • <source> permite definir imágenes y Media Queries • Valores por defecto.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
<picture> en IE9 • <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="imgs/img-s.jpg, imgs/img-m.jpg 2x" media="(min-width: 800px)"> <source srcset="imgs/img-s.jpg, imgs/img-m.jpg 2x" media="(min-width: 900px)"> <!--[if IE 9]></video><![endif]--> <img src="image.jpg" alt="Description" srcset="imgs/img-s.jpg 600w, imgs/img-m.jpg 800w"> </picture>
• Soporte de <pictura> para IE9.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Soporte Re8na Display
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Favicons
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Favicons • Son una pequeña imagen que se muestra en las pestañas del navegador y en los Bookmarks • <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> • www.favicon.cc • www.css-tricks.com/favicon-quiz/.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Usos actuales • Tabs y Bookmarks • Iconos de inicio iOS y Android • Tiles de Windows.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Crear Favicons
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Archivos SVG
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
SVG • Scalable Vector Graphics • Formato vectorial basado en XML • Permite control mediante CSS.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Soporte
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Creación • www.convertio.co • Photoshop • Illustrator.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Optimización • Crear vectores optimizados desde el inicio • Menor cantidad posible de nodos • http://petercollingridge.appspot.com/svg-optimiser.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Uso • <img src="image.svg"> • <img src="image.svg" onerror="this.src='image.png'; this.onerror=null;"> • Inline • URI: www.dopiaza.org/tools/datauri/.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Fallbacks • www.sitepoint.com/graceful-fallback-svgs-old-ie/ • www.css-tricks.com/a-complete-guide-to-svg-fallbacks/ • www.grumpicon.com.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Soporte Re8na Display
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Tamaño de pantalla vs resolución
109 ppi 264 ppi
2560 px x 1440 px
2048 px x 1536 px
Apple iMac (27")
Learn
pert
design & code
iPad Air
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Tamaño de pantalla vs resolución
Resolución estándar
Learn
pert
design & code
Re8na Display
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Tamaño de pantalla vs resolución
100px 100px 200px 200px
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Tamaño de pantalla vs resolución • La resolución de imagen es irrelevante • Importa el número de pixeles (tamaño).
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Tamaño de pantalla vs resolución
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Tamaño de pantalla vs resolución Listado de tamaños, resoluciones y densidades: • http://github.com/h5bp/mobile-boilerplate/ wiki/Mobile-Matrices.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Diseño para múltiples densidades • Evita el uso de imágenes • Uso de gráficos CSS (limitado) • Uso de gráficos SVG (pueden afectar el desempeño).
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Técnicas para Re8na Display
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Imagen 2x • Crear una imagen 2x • Comprimirla al máximo: www.karelia.com/retina/ • Escalar al 50% (HTML o CSS).
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
CSS @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { /* Reglas CSS */ } • http://hidpi.brianwoodtraining.com/bg.php.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
retina.js â&#x20AC;¢ http://imulus.github.io/retinajs/.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Learn
pert
design & code
Gracias!
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Esta presentaciรณn (y otras)
www.xper.co/presenta
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Recursos
www.delicious.com/marliton
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master