Imágenes Responsive y soporte Retina Display

Page 1

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 • 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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.