{"id":2301,"date":"2014-05-27T18:19:32","date_gmt":"2014-05-27T16:19:32","guid":{"rendered":"http:\/\/bluekea.com\/blog\/?p=2301"},"modified":"2021-03-01T17:14:38","modified_gmt":"2021-03-01T16:14:38","slug":"un-futuro-mas-nitido-sobre-web-fotografia-y-pantallas-de-alta-resolucion","status":"publish","type":"post","link":"https:\/\/bluekea.com\/blog\/tecnica-digital\/un-futuro-mas-nitido-sobre-web-fotografia-y-pantallas-de-alta-resolucion","title":{"rendered":"Un futuro m\u00e1s n\u00edtido. Sobre web, fotograf\u00eda y pantallas de alta resoluci\u00f3n"},"content":{"rendered":"

Hemos escrito ya algunas entradas sobre la tendencia actual de uso de dispositivos inform\u00e1ticos: los ordenadores siguen perdiendo terreno a favor de tabletas y m\u00f3viles. Esto tiene varias consecuencias, una de las m\u00e1s positivas es la generalizaci\u00f3n de las llamadas pantallas de alta resoluci\u00f3n, tendencia que se inici\u00f3 con la pantalla retina del iPhone 4 hace ya algunos a\u00f1os. Este tipo de pantallas\u00a0contienen unos p\u00edxeles tan peque\u00f1os y juntitos que a simple vista no se diferencian, dando una\u00a0sensaci\u00f3n de nitidez propia de papeles fotogr\u00e1ficos.<\/p>\n

El problema: esta resoluci\u00f3n se consigue multiplicando el n\u00famero de p\u00edxeles que contiene la superficie de cada pantalla. Un\u00a0caso muy\u00a0claro es el del iPad, en sus primeras versiones la resoluci\u00f3n era de 1024×768 p\u00edxeles, pero con la llegada de la pantalla retina, la nueva resoluci\u00f3n es de 2048×1536, es decir, el doble en cada dimensi\u00f3n, cuatro veces m\u00e1s p\u00edxeles.<\/p>\n

\u00bfQu\u00e9 ocurre cuando se muestra una imagen de 300px de ancho en una pantalla de alta resoluci\u00f3n? En el caso anterior, la tableta estira <\/em>la foto para mantener su tama\u00f1o en pantalla, de modo que esos 300px se transforman en 600. Cualquiera que haya\u00a0aumentado una imagen en photoshop al doble de su ancho original conoce el resultado: una imagen pixelada y poco n\u00edtida. Y esto es exactamente lo que ocurre en una web que se ve en pantallas de alta resoluci\u00f3n: todas las im\u00e1genes que no est\u00e1n preparadas para ello se ven poco n\u00edtidas, y no es un efecto sutil, es muy\u00a0evidente.<\/p>\n

Este problema afecta a cualquier tipo de imagen,\u00a0tanto a fotograf\u00edas como a logotipos, iconos, etc.\u00a0\u00a0La otra cara de esta moneda es que cuando las fotos tienen tama\u00f1o suficiente, la nitidez y calidad con que se muestran en estas pantallas es impresionante.<\/p>\n

\u00bfSoluciones?<\/h2>\n

Veamos algunas alternativas para resolver este problema, y cu\u00e1les usamos y tenemos planeadas en Bluekea, nuestra plataforma de webs para fot\u00f3grafos<\/a>.<\/p>\n

Fotograf\u00edas<\/h2>\n

La soluci\u00f3n pasa por im\u00e1genes m\u00e1s grandes, digamos entre un 60% y un 100% mayores. Por este motivo, desde hace unos meses en Bluekea recomendamos un tama\u00f1o de imagen de 1200px de ancho frente a los 850\u00a0anteriores. Las fotos se suben a un tama\u00f1o mayor y el navegador las ajusta al marco que corresponda. Es curioso comprobar c\u00f3mo una imagen jpg a mayor tama\u00f1o\u00a0y con compresi\u00f3n media (calidad baja, poco peso) se ve m\u00e1s n\u00edtida que una imagen de tama\u00f1o normal pero compresi\u00f3n baja (calidad alta, mucho peso).<\/p>\n

\"Foto<\/p>\n

Aqu\u00ed vemos unas capturas de iPad, con las im\u00e1genes aumentadas para apreciar la diferencia.<\/em>
\nArriba, im\u00e1genes sin optimizar a 270px, su tama\u00f1o normal en pantalla de PC.<\/em>
\nAbajo, im\u00e1genes a 400px, optimizadas para pantallas de alta\u00a0resoluci\u00f3n<\/em><\/address>\n

En cuanto a las miniaturas, vamos a aumentar la calidad de todas ellas usando realmente im\u00e1genes mayores que las del tama\u00f1o seleccionado, por ejemplo si la miniatura escogida es de 150×150 p\u00edxeles, vamos a mostrar una de 250×250 en el espacio original de 150×150.<\/p>\n

Logotipos<\/h2>\n

La soluci\u00f3n en este caso es la misma: aumentar el tama\u00f1o.\u00a0Tenemos planeado permitir tama\u00f1os mayores en los logos personalizados\u00a0de nuestras webs, aquellos que sube el fot\u00f3grafo, y por otro lado duplicar el tama\u00f1o del logo que genera\u00a0la secci\u00f3n Dise\u00f1o de la web<\/em>\u00a0de nuestro panel de control.<\/p>\n

Iconos<\/h2>\n

En este caso, la mejor soluci\u00f3n que existe en mi opini\u00f3n son las tipograf\u00edas de iconos. Funcionan como las fuentes habituales (Arial, Verdana, etc) pero en lugar de caracteres contienen iconos. Son por tanto im\u00e1genes vectoriales y no mapas de bits, y admiten cualquier tipo de aumento mostr\u00e1ndose totalmente n\u00edtidos en cualquier pantalla.<\/p>\n

\"IconosIzquierda, iconos de Bluekea basados en\u00a0tipograf\u00eda. Derecha, iconos gr\u00e1ficos de otra\u00a0web.<\/address>\n
\u00a0<\/address>\n

En Bluekea ya hemos optado por esta soluci\u00f3n en los iconos\u00a0de redes sociales, iconos de compartir y tambi\u00e9n en los botones de navegaci\u00f3n de las galer\u00edas.<\/p>\n

\n","protected":false},"excerpt":{"rendered":"

Hemos escrito ya algunas entradas sobre la tendencia actual de uso de dispositivos inform\u00e1ticos: los ordenadores siguen perdiendo terreno a favor de tabletas y m\u00f3viles. Esto tiene varias consecuencias, una de las m\u00e1s positivas es la generalizaci\u00f3n de las llamadas … Sigue leyendo →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":2319,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-2301","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tecnica-digital"],"_links":{"self":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/2301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/comments?post=2301"}],"version-history":[{"count":1,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/2301\/revisions"}],"predecessor-version":[{"id":5425,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/2301\/revisions\/5425"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/media\/2319"}],"wp:attachment":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/media?parent=2301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/categories?post=2301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/tags?post=2301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}