Cómo optimizar las imágenes de tu página web en 3 pasos

Artículo blog optimizacion imagen wordpress
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email

Las imágenes tienen varias características fundamentales que debes aprender a valorar como merecen porque es uno de los factores más determinantes a la hora de atraer y seducir a tus potenciales clientes.

No podemos prescindir de ellas en casi ninguna situación.

Unas buenas imágenes son sinónimo de un aspecto profesional, sensación de calidad y buena opinión del cliente de quien está detrás de la web. Por eso debes pensar en la posibilidad de hacerlas con una profesional.

Sin embargo, su incorrecta utilización y optimización puede penalizar de manera decisiva tu diseño web.

Las imágenes suelen ser la mayor parte de datos que envía una página cuando es consultada por el usuario, ocupan un espacio destacable en los servidores, consumen los recursos del hosting y un peso excesivo de las mismas afecta negativamente al SEO.

Reducir su peso y adecuar su tamaño es un deber para todo aquel que mantenga una página web.

Una correcta optimización nos ayuda a hacer que las imágenes sean eficaces y mejore el rendimiento. Cuantos menos datos se descargue el usuario, mayor será la velocidad, menor el consumo de recursos y Google estará más contento.

En este sentido este artículo tiene como objetivo mostrar trucos y herramientas útiles para optimizar tus imágenes sin que pierdan calidad.

¡Acompáñame!

Selecciona el formato de imagen que mejor encaje

No es ningún secreto que el formato de la imagen determina sus características y también en parte su peso.

  • Imágenes vectoriales (o de formato SVG). Es un tipo de imagen formada por objetos geométricos definidos por valores matemáticos. Las imágenes vectoriales son ideales para logotipos, iconos, etc. y ofrecen un resultado óptimo en ajustes de aumentos de resolución, pues no se pixelan. Sin embargo, no sirven para fotografías.
  • Imágenes de mapa de bits (o bitmap). Son un tipo de imágenes formadas mediante una cuadrícula de pixeles con un color individual definido para cada uno. Este tipo de formatos tienen problemas al aumentarles el tamaño dando lugar a imágenes borrosas o distorsionadas. Sin embargo, son ideales para mostrar fotos. Formatos tan conocidos como JPEG, PNG o GIF son mapas de bits.

En este sentido ten en cuenta sus propiedades para saber que formato elegir en cada momento y por qué es la mejor opción:

Prioriza las imágenes vectoriales para formas geométricas, iconos y logotipos de alta resolución.

Escoge el formato GIF si necesitas imágenes animadas, y solo en este caso, porque tiene un importante límite de gama de colores (256 colores) lo que suele ser insuficiente para la mayoría de imágenes.

Opta por el formato PNG si quieres mantener detalles de alta definición y además necesitas fondos transparentes. Hay que tener en cuenta que suelen ser imágenes de mayor peso que las otras.

Elige el formato JPEG si quieres obtener una combinación de optimización con una pérdida mínima de calidad y un peso aceptable. Es ideal para la mayoría de las fotos, aunque debes tener en cuenta que no permite fondos transparentes.

Selecciones lo que selecciones hay que optimizar siempre al máximo las imágenes.

Optimiza las imágenes con software en tu PC

Puedes escoger el programa de edición de imágenes que desees, pero mi consejo es que lo hagas con el conocido Photoshop o con una buena alternativa libre, el Gimp.

Lo primero que tienes que hacer es fijarte en la resolución, y adaptarla. Excepto circunstancia justificada, no creo que necesites imágenes de más de entre 800px y 1000px de ancho (excepto que quieras una que ocupe la pantalla completa y tenga 1920px de ancho para pantallas full HD).

Photoshop tiene una opción óptima para realizar este paso, seleccionando la opción “guardar para web”, que reduce y optimiza la imagen directamente.

En el caso de Gimp debes redimensionar primero la capa y posteriormente exportarla.

Optimizando una imagen de 3857px de ancho y 3,76MB de peso conseguimos una reducción considerable tanto en Photoshop (91% de reducción – 339 KB sin pérdida de calidad) como en Gimp (96% de reducción – 150 KB con una pérdida de calidad mínima).

Photoshop optimizacion imagen wordpress

Optimiza las imágenes con aplicaciones online

Otro paso en la optimización de las imágenes sería utilizar TinyPNG, una herramienta en estos momentos imprescindible en mi día a día.

TinyPNG es una herramienta online que comprime al máximo las imágenes, combinando colores similares y suprimiendo los metadatos (información sobre dónde, cómo y cuándo fue sacada la foto).

El servicio es completamente gratis, puede optimizar un máximo de 20 imágenes a la vez y llega con arrastrar y soltar las imágenes para que la aplicación haga el resto.

tinyPNG optimizacion imagen wordpress

Optimiza las imágenes mediante plugins de WordPress

Tener un plugin de optimización de imágenes permite que no tengas que preocuparte de esta cuestión una vez que la imagen está en tu WordPress. Suelen funcionar de manera automática y existe una oferta múltiple de plugins gratuitos y de pago.

Smush Image. Su funcionamiento es súper sencillo. Una vez instalado empieza a optimizar las imágenes que previamente subiste.  Redimensiona, optimiza y comprime. Si quieres forzar la reoptimización, simplemente debes pulsar la opción “Bulk Smush Ahora”.

Este plugin está muy bien valorado por la comunidad, con 3.814 puntuaciones positivas y más de un millón de instalaciones. Tiene una versión PRO que permite, entre otras cosas, optimizar imágenes de más de 1MB de peso.

wp shush plugin optimizacion imagen wordpress

EWWW Image Optimizer. Un plugin muy similar al anterior. Optimiza automáticamente las imágenes a medida que se suben a tu sitio web. Simplemente hay que instalarlo y dejar que se encargue de todo.

SG Optimizer y LiteSpeed Caché. Si tienes tu hosting contratado con Siteground o con Raiola Networks, mis opciones principales de alojamiento como puedes leer en mi caja de herramientas, ya incorporan dos plugins de optimización propios que contienen diferentes opciones (entre las que se encuentra también el tratamiento de imágenes).

Conclusión

En el artículo de hoy viste la importancia de optimizar las imágenes para tu WordPress.

Con tres simples pasos reducimos de manera exponencial el peso de una imagen, sin casi pérdida aparente de calidad.

Si quieres tener una página veloz y donde el usuario navegue cómodamente, debes prestar especial atención al tema que acabamos de tratar. Y ten por seguro que va a ser muy difícil que consigas comprimir más la imagen de lo que lo acabamos de hacer.

¿Piensas que hay mejores métodos?

¿Cómo podemos mejorar el funcionamiento de las imágenes en nuestro WordPress?

¡Nos vemos en los comentarios!

Comparte :)

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email

Deja un comentario



¡Esto es para ti!