Disseny Web: imatges Retina Ready i Webs Responsives

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

facebook

4 comentaris

Afegir comentari
  1. Serchi 21 May, 2013 # | Reply

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

    • administrador 25 June, 2013 # | Reply

      Para eso estamos. De nada!

  2. Van 1 October, 2014 # | Reply

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

    • indeskai design 3 June, 2015 # | Reply

      Encantados de ayudarte!