Nadie dijo que ser diseñador web sea una cosa fácil, aunque a nuestros clientes les parezca que sea arrastrar y mover menús, imagenes, etc, es algo un tanto más complicado.
La tecnología va avanzando, y nosotros, con ella, también. Nuestra forma de programar hace 5 años y ahora, ha cambiado, se añaden nuevas tecnologías y nosotros debemos renovarnos con ellas. Como se dice: «Renovarse o Morir».
Es el returno de la «Retina Display» o alta definición.
Debemos de diseñar para tres tipo de pantallas, verdad? Para teléfonos, tablets y ordenadores de sobremesa o portátiles.
¿Qué debemos de hacer?
Para hacer una imagen de alta resolución lo que tenemos que hacer es crear una con el tamaño normal, y correcto, y luego, otra con el doble de su tamaño. Si quieres que tu logo se vea bien a 200×200 cea una imagen a 400×400 y ponla de tamaño a 200×200 usando css. Esto en todas las imagenes de la web. Sencillo, verdad?
Vamos al tema de optimización: Antes de documentarme al empezar a diseñar para retina display, vi un truco que decían por ahí: Si exportas una imagen en formato jpg al doble de resolución, con un 40% de calidad y CSS lo redimensionas a la mitad de su tamaño, se ve genial en pantallas normales y en pantallas retina.
Sería algo asi:
Style.css
#logo { background-image: url('images/logo.png'); background-size: 200px 200px; background-repeat: no-repeat; }
Retina.CSS
#logo { background-image: url('images/@2xlogo.png'); }
Fácil cierto? Todavía tu web no esta optimizada para retina display? A que esperas!!
Imagen destacada: https://www.shutterstock.com/es/image-photo/cracow-june-26-man-uses-ipad-290995835
Deja una respuesta