indeskai design | Diseño Gráfico y Web Sant Boi, Barcelona, Hospitalet

responsive, retina display

Diseño Web: imágenes Retina Ready y Webs ResponsivasDisseny Web: imatges Retina Ready i Webs Responsives

¿Qué es un Retina Display? En términos generales es una pantalla de alta definición, eso es todo. Los productos de Apple no son los únicos que poseen este tipo de pantalla, estas pantallas están siendo ampliamente implementadas y utilizadas, por lo tanto, es importante crear sitios web y aplicaciones que soportan estas pantallas.

Dicho esto, permítanos explicar por qué las imágenes Retina Ready y el Diseño Web Responsivo van de la mano y cómo crear este tipo de imágenes.
 

¿Qué significa Retina?

Una visualización sencilla explicará este concepto bien así que eche un vistazo a la imagen de abajo, que compara los píxeles entre la Retina y una pantalla de definición estándar. En las pantallas Retina se obtiene el doble de píxeles en el mismo espacio, esta es la razón por lo que los iconos o texto en un iPad 2 se ven borrosos y luego en el iPad 3 o superior no.
 
diseño web sant boi de llobregat
 

El dilema

Diseñadores y desarrolladores ahora tienen que adaptarse a los diferentes tipos de pantallas. Si no es así los usuarios con pantallas Retina verán diseños borrosos, o los usuarios sin Retina tendrán cargas más lentas sin disfrutar de una alta calidad en las imágenes.
Por eso es importante que entre en juego el Diseño Web Responsivo.
 

¿Cómo crear imágenes Retina Ready en Diseño Web Responsivo?

Hay varios métodos. Vamos a exponer sólo unos pocos.

SVG
SVG es un formato de imagen para gráficos vectoriales, debido a que los vectores están compuestos de coordenadas matemáticas en vez de pixeles, se pueden manipular de muchas maneras manteniendo intacta su forma y calidad. Por desgracia, las imágenes de mapa de bits -JPG, PNG o GIF- no pueden hacer eso.

Fotografías e imágenes de mapa de bits
Desgraciadamente no todas las imágenes pueden ser un formato SVG, nos veremos obligados a trabajar también con mapas de bits. Hay una posible solución a este problema que consiste en utilizar la imagen al doble de su tamaño deseado y mostrar el 50% de esas dimensiones. Lo que queremos decir es que si tienes una foto que es de 150px de ancho por 150px de altura, utiliza una imagen de 300px x 300px. De esta manera, en una pantalla retina la imagen se muestra en la calidad adecuada.

Hay muchas maneras mostrar imágenes 2x en su sitio web a través de HTML, CSS o JS. No vamos a entrar en detalles, pero vamos a mostrar sólo los métodos básicos.

En primer lugar, si usted tiene una imagen que es de 300px x 300px, sólo tiene que declarar en el código HTML que el alto y el ancho de la imagen que van a 150px.

Imagen retina

También se puede cambiar la anchura y la altura de una imagen en el CSS declarando que la imagen será el 50% de su tamaño o literalmente definiéndola para que sea la mitad si, sabe cuál es la mitad.

CSS imagen retina

Por último, si la imagen que usted quiere reducir de tamaño es un fondo, éste es el código para hacer el truco:

responsive design barcelona

Hay una gran desventaja con este método, si su website tiene muchas imágenes, el tiempo de carga puede ser afectado enormemente por tener que cargar el fichero gigante. Esto es especialmente grave en teléfonos móviles, pues algunos smartphones usan conexiones muy limitadas.

Pero también hay maneras de arreglarlo.
 
Media Queries
Podemos indicarle al site si el dispositivo en el que se usa la web en cada momento es una pantalla retina. El código que presentamos a continuación trabaja mejor cuando las imágenes que usted utiliza en su sitio son fondos de divs de modo que en los media queries usted solo cambia la imagen que está a doble tamaño. De esta manera, las imágenes grandes se cargan únicamente para los dispositivos de pantalla retina.

dispositivos imagen retina

Retina.js
Si cree que los media queries no son la solución más fina. ¡Hay un Javascript para solucionar este problema! retina.js es un open source que hace fácil usar imágenes de alta resolución en los dispositivos con pantalla retina. Este script pide que dispongamos de dos imágenes, una del tamaño previsto (original) y el otro del doble de tamaño, retina.js detecta cuando hay un dispositivo y cambia la imagen por consiguiente. Es muy simple trabajar con este script y sugerimos el fomentar su uso. Todo lo que usted tiene que hacer es asegurarse de que nombra las imágenes en consecuencia para trabajar con el plug in.
 
Iconos
Gracias a @font-face y las fuentes que se componen de iconos en vez de letras, usted puede utilizarlas en vez de imágenes. Recomiendo este método por dos razones. Primero, las fuentes se pueden escalar de una manera similar los SVG, por lo tanto no dan ningún problema de peso ni de pixelación.

Segundo, el catálogo de @font-face es actualmente muy grande y crece día a día. La mayoría de los navegadores actuales -móviles y sobremesa- utilizan el @font-face y permiten que la mayoría de los usuarios visualicen tus iconos sin problemas.

 
retina is indeskai

Fuentes:
www.designmodo.com
Què és un Retina Display? En termes generals és una pantalla d’alta definició, això és tot. Els productes d’Apple no són els únics que posseeixen aquest tipus de pantalla, aquestes pantalles estan sent àmpliament implementades i utilitzades, per tant, és important crear llocs web i aplicacions que suporten aquestes pantalles.

Dit això, permeti’ns explicar per què les imatges Retina Ready i el Responsive Web Design van de la mà i com crear aquest tipus d’imatges.
 

Què significa Retina?

Una visualització senzilla explicarà aquest concepte ben així que faci un cop d’ull a la imatge d’abaix, que compara els píxels entre la Retina i una pantalla de definició estàndard. En les pantalles Retina s’obté el doble de píxels en el mateix espai, aquesta és la raó pel que les icones o text en un iPad 2 es veuen borrosos i després en l’iPad 3 o superior no.
 
diseño web sant boi de llobregat
 

El dilema

Dissenyadors i desenvolupadors ara han d’adaptar-se als diferents tipus de pantalles. Si no és així els usuaris amb pantalles Retina veuran dissenys borrosos, o els usuaris sense Retina tindran càrregues més lentes sense gaudir d’una alta qualitat en les imatges.
Per això és important que entri en joc el Responsive Web Design..
 

Com crear imatges Retina Ready en Responsive Web Design?

Hi ha diversos mètodes. Anem a exposar només alguns.

SVG
SVG és un format d’imatge per a gràfics vectorials, a causa que els vectors estan compostos de coordenades matemàtiques en comptes de píxels, es poden manipular de moltes maneres mantenint intacta la seva forma i qualitat. Per desgràcia, les imatges de mapa de bits -JPG, PNG o GIF- no poden fer això.

Fotografies i imatges de mapa de bits
Malauradament no totes les imatges poden ser un format SVG, ens veurem obligats a treballar també amb mapes de bits. Hi ha una possible solució a aquest problema que consisteix a utilitzar la imatge al doble de la seva grandària desitjada i mostrar el 50% d’aquestes dimensions. El que volem dir és que si tens una foto que és de 150px d’ample per 150px d’altura, utilitza una imatge de 300px x 300px. D’aquesta manera, en una pantalla retina la imatge es mostra en la qualitat adequada.

Hi ha moltes maneres mostrar imatges 2x en el seu lloc web a través d’HTML, CSS o JS. No anem a entrar en els detalls, però anem a mostrar només els mètodes bàsics.

En primer lloc, si vostè té una imatge que és de 300px x 300px, només ha de declarar en el codi HTML que l’alt i l’ample de la imatge que van a 150px.

Imagen retina

També es pot canviar l’amplària i l’altura d’una imatge en el CSS declarant que la imatge serà el 50% de la seva grandària o literalment definint-la perquè sigui la meitat, si sap quina és la meitat.

CSS imagen retina

Finalment, si la imatge que vostè vol reduir de grandària és un fons, aquest és el codi per fer el truc:

responsive design barcelona

Hi ha un gran desavantatge amb aquest mètode, si el seu website té moltes imatges, el temps de càrrega pot ser afectat enormement per haver de carregar el fitxer gegant. Això és especialment greu en telèfons mòbils, doncs alguns smartphones usen connexions molt limitades.

Però també hi ha maneres d’arreglar-ho.
 
Media Queries
Podem indicar-li al site si el dispositiu en el qual s’usa la web a cada moment és una pantalla retina. El codi que presentem a continuació treballa millor quan les imatges que vostè utilitza en el seu lloc són fons de divs de manera que en els media queries vostè solament canvia la imatge que està a doble grandària. D’aquesta manera, les imatges grans es carreguen únicament per als dispositius de pantalla retina.

dispositivos imagen retina

Retina.js
Si creu que els media queries no són la solució més fina. Hi ha un Javascript per solucionar aquest problema! retina.js és un open source que fa fàcil usar imatges d’alta resolució en els dispositius amb pantalla retina. Aquest script demana que disposem de dues imatges, una de la grandària prevista (original) i l’altre del doble de grandària, retina.js detecta quan hi ha un dispositiu i canvia la imatge per tant. És molt simple treballar amb aquest script i suggerim el fomentar el seu ús. Tot el que vostè ha de fer és assegurar-se que nomena les imatges en conseqüència per treballar amb el plug in.
 
Icones
Gràcies a @font-face i les fonts que es componen d’icones en comptes de lletres, vostè pot utilitzar-les en comptes d’imatges. Recomano aquest mètode per dues raons. Primer, les fonts es poden escalar d’una manera similar els SVG, per tant no donen cap problema de pes ni de pixelació.

També, el catàleg @font-face és actualment molt gran i creix dia a dia. La majoria dels navegadors actuals -mòbils i sobretaula- utilitzen @font-face i permeten que la majoria dels usuaris visualitzin les teves icones sense problemes.

 
retina is indeskai

Fonts:
www.designmodo.com

Comments

  • Buen post, se agradece, me ha sacado de dudas y puesto en el camino. Saludos!

    reply
  • Van

    Buena publicación, Super sencillo y conciso, lo necesario para despejar dudas e ir a investigar ^_^, gracias!

    reply

Post a Comment