optimizar imagenes para web

Optimizar imágenes para web

Ya tengas una web corporativa o un blog personal, seguro que tu web tiene una gran cantidad de imágenes para mantener la atención de tus usuarios. Y si además sigues las tendencias de diseño actuales, cada vez tus imágenes serán más grandes, por lo que tu web tardará más tiempo en cargar. Vamos a explicarte porque debes tener tus imágenes optimizadas y como hacerlo.

Razones por las que debes preocuparte por el tamaño de tus imágenes

1.- La navegación móvil; la navegación móvil superó en 2016 por primera vez al ordenador para acceder a Internet, 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.

2.- 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.

3.- 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.

Tipos de Imágenes

Ahora que ya sabes porque debes optimizar las imágenes de tu web o blog, el siguiente paso es conocer los principales formatos de imagen que existen y elegir el más adecuado a tus necesidades. Seguro que alguna vez te has preguntado cuál es la diferencia entre un jpg, un png o un gif. No te aburriremos con tecnicismos, tan solo te diremos cuándo es mejor utilizar un formato u otro.

optimizar imagenes photoshop

    • .GIF

Un formato obsoleto, prácticamente solo se utiliza ya para imágenes animadas.

    • .PNG

El sustituto de Gif, porque también permite transparencia. Es ideal para imágenes planas o con grandes espacios blancos, como capturas de pantalla, logotipos, etc. PNG es un formato de imagen sin pérdidas, por lo que aunque no reduce tanto el tamaño como el JPG, la calidad siempre será mayor.

    • .JPG

Ideal para fotografías con detalles y muchos colores. Es un formato de compresión con pérdidas, es decir, que pierde calidad para reducir el tamaño, y con ello pierde nitidez, por lo que pueden aparecer aberraciones cromáticas en determinadas zonas.

RESUMEN: 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.

Programa para Optimizar Imágenes

Y por fin llega la hora de explicarte como optimizar tus imágenes, y lo vamos hacer con uno de los programas más usados, Photoshop.

Una vez llegado el momento de guardar nuestra imagen en Photoshop, debes guardar mediante la opción “archivo > Guardar para web…“.

Después debes seleccionar 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 vera 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.

optimizar imagenes web optimizar imagenes web

Hay muchas más opciones en el panel de “Guardar para web…” de Photoshop, pero ya que este post tiene un objetivo práctico no queremos ser demasiado técnicos, así que solo te mostramos las opciones más comunes. En el 90% de los casos no necesitarás más.

About the author: Franky Martin (ADMIN)

Leave a Reply

Your email address will not be published.

ocho + ocho =