Imágenes en los contenidos de tu ONG (II): optimizarlas para web

por David Rico

Última actualización: 09 02 2016

En este segundo post sobre imágenes como parte de los contenidos de tu ONG nos centraremos en el uso de las mísmas dentro del canal web, aunque las recomendaciones podrán, en general, ser aplicadas a cualquier soporte digital. Me apetecía estrenarme como autor del blog de SocialCo, y lo hago con este artículo, en el que voy a intentar darte las claves para que ‘optimizar’, ‘ppp’ o ‘png’ dejen de sonarte a ingredientes de un sobre de sopa oriental.

Empecemos por la pregunta base: ¿por qué optimizar las imágenes si, desde mi punto de vista, ya se ve bien mi página? La respuesta tiene tres vertientes: posicionamiento, armonía y calidad.

Posicionamiento. El peso de tus imágenes afecta directamente a la velocidad de carga de tu página y, por tanto, el ilustre Google y su rastreador de páginas, la dejará en la lista de páginas ‘poco optimizadas’ (como ocurre con las páginas no optimizadas para móviles, por ejemplo). Es decir, ‘castigada al final de la fila’. Además, una imagen con un título significativo y correctamente etiquetada desde el punto de vista SEO será indexada de forma relevante y, por tanto, contribuirá también a un mejor posicionamiento de la web de tu entidad en buscadores (no vamos a hablar de SEO en este post, pero puedes visitar nuestra serie de contenidos sobre ello)

Captura-de-pantalla-2015-05-04-a-las-13.56

Armonía ergo buen diseño, ergo ayuda al usuario, ergo usabilidad. Efectivamente, debemos evitar que nuestras imágenes estén ‘tiradas’ por la página, volando, unas más altas que otras… Debemos equilibrar los pesos visuales para que las imágenes tengan su importancia, pero que no se coman al texto (que al final es el garante del carácter informativo de nuestra página), y proporcionen una maquetación armónica, bien sopesada.

Calidad. Hablamos de calidad en sus dos vertientes: calidad de la foto, sin pixelizar, que no esté borrosa y que no corte lo que queremos mostrar; y calidad del material, que sea representativa, y forme parte de nuestro hilo argumental. La calidad de nuestras imágenes incide directamente en la percepción de nuestra marca, de nuestra comunicación en definitiva. La calidad en la imagen es belleza. Es amor.

Voy a darte una pistas rápidas, que espero te sirvan de ayuda, para optimizar las imágenes de vuestra web. Te pongo un ejemplo de un caso de uso:

6000x4000IMAGEN NO OPTIMIZADA

  • Tamaño: 6000 x 4000 px
  • Resolución: 300 ppp
  • Tamaño (KB): 10,3 MB
350x233IMAGEN OPTIMIZADA

  • Tamaño: 350 x 233 px
  • Resolución: 72 ppp
  • Tamaño (KB): 33Kb

Estas dos imágenes, aparentemente, son idénticas. En su aspecto, lo son, nuestro ojo no es capaz de ver las diferencias. Sin embargo, la imagen de la derecha está optimizada y la de la izquierda no. La imagen de la izquierda podría ser una imagen ideal para formatos de impresión, como cartelerías, prensa, etc. pero para web necesitamos formatos comprimidos y bien optimizados, que se descarguen y se muestren rápido.

El píxel. ¿Qué es esto del píxel, del que tanto hablamos y no sabemos muy bien qué es? Muy sencillo: es la unidad mínima en pantalla, la celda mínima que nos puede mostrar nuestra pantalla. El monitor está compuesto de mini-celditas de luz, los píxels. Pero un solo píxel no nos da ninguna información, necesitamos un conjunto suficiente de píxels para ver una imagen. La resolución, de la que vamos a hablar a continuación, determinará el número de píxels por cada pulgada de nuestro monitor. A mayor resolución, más definida o nítida será la imagen.

Piensa que un monitor Full HD (de 19’’ moderno) tiene 1.920 píxels de ancho. La imagen no-optimizada del ejemplo anterior tiene 6.000 píxels de ancho, más de tres veces más. Siempre deberemos adaptar el tamaño de nuestra imagen optimizada al ‘hueco’ de la web donde vayamos a situarla. Por ejemplo, si quisieras optimizar una foto para ponerla en la cabecera de tu web a ancho completo, deberías recortarla a 1.920 píxels de ancho, por ejemplo, aunque probablemente éste sería el caso más extremo.

La resolución. Medimos la resolución en ‘ppp’ (píxels por pulgada, también llamado ‘dpi’ o ‘ppi’). Para web, la resolución ideal y suficiente, serán los 72 ppp en nuestras imágenes optimizadas. Para impresión necesitaremos a partir de 200 ppp, ya que se necesita una mayor concentración de píxels por pulgada, mayor definición de la imagen. En nuestro caso, como comentábamos, la pantalla no nos va a mostrar una mejor imagen si superamos los 72 ppp. Y, por tanto, si la optimizamos a 72 ppp, ganarás reduciendo el peso, y no reducirás la calidad.

El tamaño. Al adecuar la imagen al tamaño que necesitamos, y bajarle la resolución, el peso de la imagen disminuirá, pero aún puede bajar mucho más. Para ello, nuestras herramientas, ya sean software propietario (Photoshop), open source (Gimp) o incluso online (Pixlr, Kraken) nos ofrecen configuraciones diversas para optimizar aún más las imágenes, siempre recordando que no debe llegarse a ver borrosa la imagen, ya que nos habríamos pasado optimizando.

El formato. Este detalle es importante, ya que cada formato es adecuado para una cosa u otra. Los tres formatos más universales para la web, por ser multidispositivo y comprimidos, son:

  • .png: Perfecto para formas geométricas y colores planos, por ejemplo, infografías, iconos, logos, esquemas, etc.… Su gran punto a favor es que conserva transparencias si tu imagen tiene un fondo transparente, también que no pierde apenas calidad en la compresión. No es adecuado para fotos de gran tamaño, ya que el peso es enorme.
  • .jpg: Es el formato ideal para las fotos, el que te permite comprimir al máximo usando todos los colores posibles. La mayoría de software de edición de imágenes permite configurar gamas cromáticas, para optimizar la máximo tus imágenes.
  • .gif: También permite transparencias, aunque dejará una ligera ‘sierra’ en su contorno (utiliza mejor .png en estos casos). Es ideal para fondos de color plano, iconos, logos, etc. También permite crear gif animados para secuencias de imágenes en movimiento (banners, galerías de 3-4 fotos, screenshots, etc…). Trabaja mejor con imágenes con colores planos y se puede optimizar en gran medida.

Y ahora viene…

Nuestra recomendación con amor del bueno

No queremos dejar este post huérfano de ideas, con términos tales como ‘png’, ‘ppp’, ‘seo’, flotando en el interior de tu cabeza. Queremos aportarte nuestro granito de arena, más cálido, dándote algún consejo extra:

  • Las ‘imágenes-icono’ funcionan. El estilo aparentemente naíf de un icono va directamente a tu córtex cerebral, una flecha lanzada hacia tus dendritas, hacia tus días de escuela. Un pictograma, por sus simples formas, llega directamente al usuario, sin explicar nada más. No quiero decir con ello que inundemos nuestra web de iconos sin más. Si armonizas contenido icónico, utilizado para conceptos, enumeraciones, bloques, con fotografías para noticias, eventos, crearás una comunicación efectiva, bien segmentada y eficaz.
    Muchas grandes empresas (por ejemplo, Dropbox) apuestan en su estrategia de comunicación por un estilo naíf, con vídeos muy didácticos con monigotes, iconos infantiles, sobriedad cromática pero directa, etc.Captura-de-pantalla-2015-05-04-a-las-14.42
  • El ‘estilo cómic‘ (tebeo por esos fueros) recoge esta tendencia icónica, naíf, ya que es muy directa, y es capaz de mostrar desde lo más simple a lo más complejo, de un modo sencillo y amable (en ocasiones tenemos que explicar conceptos ‘duros’, pocos amables, que con un pictograma se resuelven a la perfección). Estos gráficos se optimizan muy bien para la web, como comentábamos, ya que se trata de pocos colores planos, sin degradados y en ocasiones incluso monocromos.
  • Menos es más. Mies van de Rohe, propulsor de la BauHaus nos lanzó su mantra: despídete de lo superficial, del adorno, ve a la esencia. En nuestro caso: comunica y no despistes, una web es un formato que, por naturaleza, despista, con demasiados elementos en ocasiones, y una lectura muy especial. Si no lo conduces, ¡y rápido!, el usuario se perderá, se irá a echar una primitiva antes de que haga el primer scroll del ratón.
  • Optimizar no es sólo para la imagen: cuida tu contenido, elimina la paja y quédate con el mejor grano.

Nuestro mejor consejo: cuida tu imagen y el usuario te amará.

David Rico

    Notice: Undefined variable: twitter in /var/www/clients/SOCIALCO/www.socialco.es/html/wp-content/themes/socialco/single.php on line 159

    Notice: Undefined variable: linkedin in /var/www/clients/SOCIALCO/www.socialco.es/html/wp-content/themes/socialco/single.php on line 162

    Notice: Undefined variable: web in /var/www/clients/SOCIALCO/www.socialco.es/html/wp-content/themes/socialco/single.php on line 165

Notice: Undefined variable: cargo in /var/www/clients/SOCIALCO/www.socialco.es/html/wp-content/themes/socialco/single.php on line 170

Deja tu comentario

Los campos con * son obligatorios