¿Cómo optimizar imágenes para web?
¿Por qué optimizar imágenes para web es una tarea tan relevante y prácticamente imprescindible que debes realizar?
Da igual el tipo de web que tengas, es un hecho que cada vez utilizamos y subimos más imágenes a nuestras webs, es una tendencia al alza imparable.
Al mismo tiempo, desde hace unos años es mayor la importancia que Google le da al WPO de una web para posicionarla.
También te puede interesar: Guía de optimización WPO
En esa optimización de los tiempos de carga de una web los elementos que más peso suelen tener e influencia en los tiempos de carga suelen ser las imágenes.
Así pues, este es uno de los principales factores por los que la optimización de imágenes es clave.
A lo largo de este post vamos a ver cómo podemos optimizar correctamente todas y cada una de las imágenes que tengas en tu web.
¿Cuándo se considera que una imagen está optimizada?
Una imagen optimizada es esa que tanto su peso como su tamaño son los necesarios y correctos para ser mostrada en diversos tamaños de pantalla de diferentes dispositivos.
O lo que es lo mismo, una imagen optimizada debe mostrarse correctamente en cualquier tipo de dispositivo.
La forma de optimizar las imágenes se basa en dos tareas clave a realizar:
- Reducción de su tamaño: ajustar su tamaño al máximo que se va a mostrar pantalla
- Reducción de su peso: comprimir el archivo sin que sea perceptible una pérdida de calidad en su visualización
Tenemos que tener en cuenta que también afectan al peso los formatos del propio archivo.
Los más comunes en web son los siguientes:
- jpg
- png
- gif
- webp
- svg
Por otro lado tenemos que tener en cuenta que este proceso es totalmente relativo dependiendo del propio uso que vayamos a hacer de las imágenes y dónde se muestren.
Por ejemplo, no es el mismo uso el de una imagen que vamos a utilizar en el slider del encabezado principal de una web a ancho completo que el de la imagen interna de un post como este mismo que estás leyendo ahora mismo.
Evidentemente, la imagen del slider debe tener un mayor tamaño para que se muestre correctamente y por tanto también será inevitable que pese más.
Si la imagen de ese slider tiene el ancho máximo al que se va a mostrar, tiene un formato apropiado, y se ha comprimido al máximo posible su peso, la tendremos optimizada.
En cambio, una imagen como la del post si no la reducimos de tamaño al ancho del propio blog en el que se muestra, y esta es mayor, aunque la comprimamos y el peso final sea muy inferior a la imagen del slider, esa imagen no va a estar optimizada.
Por tanto, no se trata de obtener el menor peso posible en todo caso.
¿Qué métodos podemos utilizar para optimizar las imágenes?
Podemos distinguir dos formas de llevar a cabo todo el proceso de optimización.
Método manual
Es el que nosotros llevamos a cabo y que aplicamos en esta web, además será el que te vamos a explicar extensamente a lo largo de este post.
Es un proceso completamente manual cuyas tareas de optimización realizamos de forma previa a la subida de las imágenes a nuestra web.
Por tanto, una vez que subimos las imágenes a nuestra web ya están perfectamente optimizadas y listas para ser mostradas.
Este método tiene una ventaja importante que queremos destacar:
- Nos permite tener un control total sobre todo el proceso de optimización de las imágenes
Por contra, la principal desventaja que tiene:
- Es más pesado y requiere ciertas rutinas
Método de automatización en servidor
Es el proceso por el cual optimizamos las imágenes una vez subidas al servidor donde está alojada nuestra web.
Su optimización se puede hacer en WordPress de forma automática mediante plugins que se encargan de modificar el tamaño, comprimir el peso o incluso cambiar los formatos de las propias imágenes, creando copias incluso.
La principal ventaja de este método:
- No necesitamos hacer prácticamente nada, salvo una configuración inicial para todo el proceso.
Y la principal desventaja:
- Estamos utilizando recursos del propio servidor que también requiere tu web para otros procesos
Optimización de imágenes de forma manual
A continuación te vamos a explicar los pasos que llevamos a cabo habitualmente para llevar a cabo una optimización manual antes de subir las imágenes al servidor de la web.
1- Reducir el tamaño de las imágenes
Este es el primer paso de todos, pero antes necesitamos conocer el tamaño máximo al que se van a mostrar nuestras imágenes.
En general nos va a ser suficiente con conocer el ancho máximo para establecer el tamaño final al que ajustar cada imagen.
Para conocer ese ancho máximo nos podemos valer de la funcionalidad «inspeccionar» (se llama así en Chrome) pero la tienes disponible también en otros navegadores.
Simplemente sitúate en esa sección de tu web en la que va a ir tu imagen y acciona esta funcionalidad de tu navegador.
De este modo puedes conocer el tamaño exacto en píxeles de tus imágenes cuando se muestran.
Una vez tenemos esas medidas ya podemos utilizar la herramienta que más nos interese utilizar, como Photoshop, Gimp, Paint, Canva o alguna herramienta online gratuita como esta que te mostramos a continuación.
Se trata de Picresize y reduce el tamaño de nuestra imágenes de forma individual o en lotes.
Entre las ventajas de esta herramienta se encuentran que podemos modificar tanto el ancho como el alto con las medidas exactas para ese lugar pero también que podemos elegir cambiar el formato original por otro más apropiado y que pese menos.
¿En qué casos cambiar de formato?
En la mayoría de los casos es recomendable cambiar de PNG a Jpg por el menor peso y compresión que admite este otro formato.
Eso sí, convierte a Jpg siempre y cuando tu imagen no tenga fondo transparente o gráficos que requieran de una mayor calidad de visualización.
Utilizar esta herramienta es muy sencillo:
- Accede y selecciona una o varias imágenes que puedes simplemente arrastrar o seleccionar de tu equipo
- Sube a la herramienta esa imagen o imágenes
- Selecciona los ajustes de tamaño final y formato
- Selecciona «guardar en disco»
2- Comprimir el peso de las imágenes
Una vez tenemos las imágenes reducidas al tamaño idóneo ahora es necesario comprimir esas imágenes para que pesen menos, pero sin perder calidad de forma aparente.
Es importante que sigas estos pasos y no comprimas antes de ajustar el tamaño.
Para comprimir el peso nuevamente puedes utilizar las mismas herramientas offline que te indicábamos antes para modificar su tamaño o también puedes utilizar la misma herramienta online que nosotros usamos: Tinypng.
Con Tinypng puedes comprimir el peso de imágenes en formato PNG o Jpg indistintamente de forma individual o en lote (hasta 20 archivos a la vez) y obtener reducciones de peso de un gran porcentaje y sin perder en ningún caso calidad perceptible en nuestras imágenes.
¡Te retamos a que hagas la prueba y analices la foto una vez comprimida!
Su funcionamiento es muy sencillo:
- Arrastramos o seleccionamos la imagen/imágenes
- Hacemos clic en descargar de forma individual o en lote para descargar un .zip con todas las imágenes
¡Y con esto ya tendríamos listas nuestras imágenes para subirlas optimizadas a nuestra web!
Optimización de imágenes de forma automática
Bien, hasta ahora te hemos contado el procedimiento que nosotros solemos llevar a cabo y que es el que te recomendamos pero también te vamos a indicar otros modos automáticos de optimizar una vez subidas las imágenes al servidor.
¿Para qué casos o situaciones te puede resultar útil y necesario?
- Cuando la gestión de esa web es compartida o se permite la subida de imágenes a otras personas. Puede ser el caso de un foro.
- Cuando ya existen imágenes subidas anteriormente y se necesite optimizarlas
Tal y cómo decíamos al principio de este post en WordPress hay plugins que nos lo ponen muy fácil.
Estas son nuestras recomendaciones.
Litespeed Cache
Este es uno de nuestros plugins favoritos, uno de los que te recomendamos también en este post.
Entre las muchas funcionalidades estupendas que trae ofrece también la compresión de imágenes sin perder calidad.
También has de saber que para aprovechar todo el potencial de este plugin tu hosting debe tener disponible esta tecnología desde el propio servidor.
Por supuesto en Host-Fusion la incluimos en todos los planes para nuestros clientes.
Puedes conocer más a fondo todo el potencial de este plugin aquí.
Imagify
Imagify es un plugin estupendo que de forma automática comprime en lote todas las imágenes que subas a tu web pudiendo además elegir de forma previa la compresión que queremos aplicar.
Además, otra funcionalidad que nos gusta mucho y que incorpora es la conversión de las imágenes al formato WebP, de mucho menos peso, con mayor compresión y similar calidad.
Tinypng
Sí, de Tinypng te hemos hablado antes, pero es que además de herramienta online también disponen de plugin para WordPress (hasta para Photoshop) que comprime las imágenes igual de bien, así que no podíamos dejar de recomendarlo.
¡Tan sencillo como instalar y comenzar a optimizar en tu web las imágenes que subas de forma automática!
Conclusiones
A lo largo de este post te hemos contado los métodos disponibles para llevar a cabo una correcta optimización pero queremos que te quedes realmente con lo más importante que te queremos transmitir:
Lo importante no son las herramientas que utilices sino que entiendas la importancia de disponer de imágenes optimizadas en tu web
Nuevamente, si te preocupan los tiempos de carga y el SEO de tu web no puedes prescindir de la optimización de tus imágenes.
¡Si no lo has hecho ya ponte con ello, esperamos que esta pequeña guía que hemos elaborado para optimizar imágenes para web te sirva!
