Imágenes optimizadas para webs rápidas

29.03.2016
Imágenes optimizadas para webs rápidas

La importancia de disponer de buenas imágenes para nuestras webs es primordial ya que nos permitirán:

_ Dar un estatus superior a la web puesto que las imágenes (sobre todo si son propias), ayudan aumentar el prestigio de nuestra marca.
_ Reforzar la idea del contenido.
_ Explicar una idea gráficamente.
_ Reforzar las llamadas a la acción a través de estas.
_ Describir un determinado producto, ideal para los sitios de ventas online.
_ Ayudan a la ejecución del proceso de compra.

Escribas en un blog o tengas un ecommerce, la calidad de las imágenes siempre ha de ser excelente y coherente con los puntos básicos anteriores.

Solamente tenemos que fijarnos en aquellas empresas que les va bien en internet, que tienen negocios online, ecommerce, apps, etc. cualquiera de estas empresas tratan con respeto su imagen corporativa porque saben que es un activo que juega a favor.

Ya tengo buenas imágenes ¿Y ahora qué?

Si ya te has hecho con tu catálogo de imágenes corporativas teniendo en cuenta los puntos básicos anteriores, estas en el buen camino, ahora solamente te queda lo más fácil: integrarlas en tu página web.

Si tienes diseñador pídele que te optimice el peso de las imágenes al máximo. No nos importa tanto el tamaño sino el peso de estas, sobre todo porque actualmente el diseño web responsive necesita un tipo de archivo un poco más grande para que pueda verse perfectamente sobre todo en los dispositivos retina.

¿Cuál es el tamaño ideal?

El tamaño ideal es aquel que tiene un peso reducido, un tamaño razonable para el cometido de la imagen y una calidad de compresión óptima.

Imagínate que tienes un sitio de venta de joyas. Necesitamos que nuestras imágenes sean lo más grandes posibles ya que tienen que describir muy bien los detalles del producto y a su vez tienen que tener el menor peso con la mejor calidad de compresión, con esta última nos referimos a la nitidez de la imagen.

Por tanto necesitaremos imágenes pequeñas para las miniaturas e imágenes grandes para hacer zoom y ver los detalles. Veamos el caso de la marca Tous:

Optimizar imágenes para ecommerce

Vemos que tenemos dos tipos de imágenes con dos tamaños, uno para miniaturas y el otro para la imagen central o seleccionada. Nos falta la imagen de zoom que es el resultado de hacer clic en la imagen central.

Para este caso será una imagen muy grande y optimizada en su peso y compresión, veamos:

Detalle imágenes Zoom

Esta imagen aunque no se muestra en su tamaño total ya que dependerá de cada dispositivo, tiene un peso muy reducido a 74 KB para un tamaño de 1600 x 1600, con lo que tenemos una fotografía muy grande, con mucha definición y ágil en su peso.

PhotoShop para optimizar imágenes de nuestra web

Sin duda PhotoShop es una herramienta muy poderosa para reducir el peso de las imágenes y dejarlas listas para nuestra web. Veamos un ejemplo práctico:

Abriremos una imagen en PhotoShop y la editaremos para subir posteriormente a nuestro web, blog, ecommerce etc.

Esta imagen nos la ha pasado nuestro fotógrafo en un tamaño decente pero vemos que pesa 111KB para un tamaño de 682 × 1024 así que decidimos que aún podría ser menos pesada.

Tamaño imagen para web

Imágenes Photoshop para web

En estas imágenes podemos ver su anchura, altura y la resolución.

Lo que haremos ahora es exportar una imagen de menor peso tocando su compresión. Para ello iremos a “Guardar para web y dispositivos…” y nos aparecerá una vista como la siguiente:

Guardar fotografía para web

Como vemos en la interficie de PhotoShop, tenemos 4 imágenes, la primera es la original y por tanto no tiene ninguna compresión, la segunda ya es una vista comprimida en un 67% de calidad, la tercera a un 33% y la cuarta a un 16% de su calidad total.

Calidad de compresión Photoshop

Si nos fijamos en los círculos grises, a menor compresión menor es la calidad que vemos en el logotipo de la marca. La perdida de calidad la apreciaremos antes en las zonas geométricas claras como por ejemplo, tipografías o formas planas básicas. Este será nuestro indicador de hasta donde podemos llegar para una buena compresión.

Para este caso decidimos quedarnos en 70% de su calidad reduciendo el peso de la imagen de 111KB a 53KB con una resolución igual de estupenda.

Resultado imagen comprimida

Una forma más rápida de optimizar y sin Photoshop

tinypng.com nos ofrece la posibilidad de comprimir imágenes a un peso muy optimizado con una resolución muy buena. Para ello tendremos que seleccionar nuestras imágenes y arrastrarlas al recuadro donde nos indica: “Drop your .png or .jpg files here”.

Tinypng para comprimir imágenes

Para que veáis como queda la imagen anterior de 111KB, la hemos arrastrado a tinypng y la ha comprimido en 26KB con una calidad muy aceptable.

Imagen comprimida con tinypng

Conclusión:

En realidad no importa que herramienta utilices si te va bien, y sobre todo al final lo que tienes es una buena colección de imágenes bien optimizadas para subir en tu web.

Optimizar la carga de las imágenes es muy importante ya que reduce el tiempo de carga de las aplicaciones hasta esa frontera que tus usuarios pueden no querer traspasar y dejar de visitar tu web simplemente porque “tarda mucho en cargar”.

Es evidente que la optimización de imágenes no es el único factor para que una web cargue rápido, influyen muchas otras cosas como la rapidez de servidor, escribir código optimizado, compresión de archivos etc, pero estas cosas corren a cargo del equipo de programación y diseño web y el cliente no tiene porqué saber nada sobre estos temas ya que debe dedicarse plenamente a la optimización del contenido que genera usualmente para su sitio web.


Gracias por compartir en:


Conoce más sobre:

Fotografía (1) Diseño web (14) Utilidades (11)

Utilizamos cookies propias y de terceros para ofrecerle una mejor experiencia y servicio. Si continua navegando consideramos que acepta su uso. Más información aquí.

Cerrar