CÓMO OPTIMIZAR TUS IMÁGENES
- Yesse Design
- 17 mar 2017
- 4 Min. de lectura
CONOCE LAS DIFERENCIAS ENTRE LOS FORMATOS DE IMAGEN MÁS COMUNES Y APRENDE A REDUCIR SU PESO EN PHOTOSHOP ¡PON A DIETA A TUS IMÁGENES!
No es nada nuevo que las imágenes son un pilar fundamental en nuestra portal digital: es lo que nos va a ayudar a captar la atención de nuestras visitas y hasta puede ser el elemento detonador de una compra... si lo hacemos bien.
Subir una foto de mala calidad, o tener una pésima organización de ellas, puede ocasionar el efecto contrario claro está.
¿Por qué es importante optimizar las imágenes?
La navegación móvil: Con datos de 2013, la navegación móvil supone un 17,4% de la navegación total, y la tendencia es a aumentar. Desgraciadamente la velocidad de las redes 3G o incluso 4G no puede equipararse con la banda ancha que tenemos en casa, nuestros usuarios móviles nos agradecerán que nuestra web no tarde demasiado en cargar.
No perder usuarios. Una web lenta y pesada es sinónimo de un porcentaje de rebote muy alto, y por supuesto tú no quieres eso. No hagas esperar a tus usuarios, optimiza el peso de tu web.
Posicionamiento SEO: Google dispone de un tiempo limitado para rastrear tu web, por lo que cuanto menos pese, más páginas podrá rastrear y tendrás más posibilidades de posicionar mejor, ya que además ahora sabemos que Google da mucha importancia a la velocidad de carga entre sus factores de posicionamiento.
Estética: las imágenes de pésima calidad hacen de todo menos transferir una imagen seria y profesional de nuestro negocio.
¿Qué formato? ¿.jpg, .png o .gif?
Vamos a presentarte a continuación los tres formatos de imágenes más comunes de una página web y para qué se utiliza cada uno.
Formato .png: se utiliza sobretodo para las imágenes que están hechas con formas geométricas y tienen colores planos. La gran ventaja de este formato es que conserva las transparencias y que no pierde mucha calidad en la compresión de la imagen, por eso se utiliza para logotipos.
Formato .jpg: es el formato universal que se utiliza sobre todo para las imágenes, pues aunque se pierde un poco de calidad al comprimir las imágenes, no se pierden colores o tonalidades.
Formato .gif: este formato se utiliza para animaciones sobretodo. Dado que se utilizan varias imágenes o un vídeo para hacer el gif, el tamaño en kb puede ser muy grande; por eso, en ocasiones se comprime la imagen y pierde calidad.
En general usaremos PNG para todas las imágenes que componen nuestra web (logotipos, iconos, botones…) y JPG solo para las fotografías, sobre todo las grandes.
Además de estos, cada vez es más normal utilizar formatos vectoriales (.EPS o .SVG) para logotipos e iconos, ya que son totalmente escalables a todas las resoluciones.
Programas para optimizar imágenes
Si estás en Photoshop, recuerda que debes guardar tus imágenes mediante la opción “archivo > Guardar para web…“, ¿pero, qué hacer después?
En primer lugar selecciona arriba a la derecha el formato en el que quieres exportar (gif, png o jpg). Si utilizas las pestañas superiores podrás ver hasta cuatro copias para comparar diferentes formatos o compresiones y ver su relación calidad/peso.
Si exportas en JPG, ten en cuenta:
La barra de calidad, de 0 a 100, siendo 0 compresión máxima y 100 compresión nula, es decir calidad alta.
La opción “progresivo”. Si la pulsas, el jpg guardará diferentes capas a diferentes calidades de manera que a la hora de cargarse en el servidor la imagen se verá en baja calidad e irá mejorando su definición a medida que vaya cargando. Si no, la imagen aparecerá directamente en alta, a trompicones.
Si exportas en PNG, ten en cuenta:
¿PNG-8 o PNG-24? La principal diferencia es que PNG-8 comprime un máximo de 256 colores, como un GIF, mientras que PNG-24 alcanza los 16 millones de colores. Normalmente usarás este último.
Transparencia. Bastante obvio, pero si lo activas el fondo de la imagen será transparente (siempre que no exista una capa sólida en el fondo de Photoshop).
La opción “entrelazado” es muy similar al “progresivo” en JPG, hace referencia al tipo de carga. Dependerá de nuestras preferencias y de las capacidades del navegador donde vaya a cargarse la imagen.
Combinación imágenes y textos
No sirve de nada que hayamos optimizado las imágenes si al final vas a hacer esto:
Para que un diseño sea efectivo y que las imágenes capten la atención de las visitas, es fundamental que estén bien combinadas. En el ejemplo superior, vemos imágenes de diferentes tamaños y con un alineación distinta (derecha, centrada...).
Para que las imágenes ayuden a organizar el contenido y funcionen como un elemento de atracción, debemos hacer que tengan el mismo tamaño (ancho x largo) o el mismo ratio (16:9, 4:3, 1:1) como en el ejemplo de la imagen inferior.
¿Ves la diferencia? El orden y la armonía de las imágenes y los textos hacen que las personas encuentren el diseño agradable ; y eso es lo que hace que sea efectivo o no.
Además de Photoshop existen otros programas que te ayudarán a “bajar de peso” tus imágenes, comprimiendo y eliminando metadatos. Dos de esos son:
Image Optim (MAC)
RIOT (PC).
Ya que conoces los detalles de cada formato y las diferentes opciones, no tienes excusa para seguir exportando las imágenes de cualquier forma. Piensa en tus usuarios, piensa en tu posicionamiento en buscadores y pon a dieta a tus imágenes, ¡no derroches kilobytes!
Comentarios