A nadie se le escapa que las imágenes son una parte fundamental en cualquier sitio web y es indiscutible que su uso es muy beneficioso para el usuario de nuestra web. Pero también son elementos cruciales a la hora de conseguir tráfico orgánico… siempre, claro está, que se implementen de forma correcta y se optimicen de la manera adecuada.
Pues todo esto lo vamos a ver en el artículo de hoy, en el que veremos cómo optimizar las imágenes, cuándo y cómo hacerlo y (no menos importante) con qué las optimizaremos.
Explicación de los conceptos básicos de la optimización de imágenes.
Una web con imágenes atractivas y de alta calidad puede impresionar a los usuarios, aumentar su persuasión y generar más conversiones.
Sin embargo, aquí surge una contradicción: las imágenes tienden a ser los elementos que más peso añaden a nuestras páginas web, y reducir ese peso es a menudo necesario para que Google considere que estamos ofreciendo una excelente experiencia de usuario.
Nuestro objetivo al optimizar las imágenes es encontrar ese punto de equilibrio en el cual nuestras imágenes sean lo más livianas posible sin sacrificar la calidad percibida por el usuario.
Cuando hablamos de optimizar o formatear las imágenes de nuestra web, nos referimos a varios cambios que podemos realizar en las imágenes antes de publicarlas en el sitio.
Así que cuando hablemos de optimizar una imagen tenemos que tener claro que estaremos tocando casi siempre alguno (o todos) de estos aspectos:
- Formato: Convirtiendo la imagen para utilizar el formato más conveniente en cada caso (jpg, png, svg,…)
- Redimensionamiento: Asegurándonos de que el usuario cargue una imagen del tamaño que va a ver, evitando cargar imágenes redimensionadas que pesan demasiado pero no aportan valor.”
- Caché de imagen: Utilizando una caché para almacenar imágenes o implementando una caché de navegador, lograrás que el usuario cargue las imágenes más rápidamente cuando visite tu página, mejorando así la experiencia del usuario.
Ventajas de optimizar tus imágenes
Optimizar correctamente las imágenes de nuestra página web va a tener siempre una repercusión importante en la capacidad de esta de atraer tráfico orgánico.
Algunas de las ventajas de haber hecho un buen trabajo con las imágenes de nuestra web serán:
Mejoramos la velocidad de carga
La optimización de imágenes es una de las acciones más influyentes en el rendimiento web (WPO) y una prioridad clave para mejorar las Core Web Vitals.
Al reducir el tamaño de los archivos de imagen, logramos tiempos de carga más rápidos, lo que, a su vez, reduce la tasa de rebote.
Los usuarios adoran los sitios web que se cargan de manera rápida y esto puede reducir la tasa de rebote.
Google adora que los usuarios adoren la carga rápida y le da la importancia que se merece.
¿No crees esa ya es razón suficiente para tratar de mejorar el proceso de carga de tu web optimizando las imágenes?… pues aún hay más motivos.
Experiencia de usuario mejorada
Cuando las imágenes se cargan con rapidez y se muestran correctamente en dispositivos diversos, la experiencia del usuario mejora, lo que puede aumentar la retención de las visitas.
Este enfoque en la experiencia del usuario también es de los favoritos de los motores de búsqueda, lo que puede beneficiar aún más tu posición en los resultados de búsqueda.
Mejor posicionamiento orgánico
Ya te he dado pistas en los dos puntos anteriores, pero es que tanto Google como otros motes de búsqueda consideran el proceso de carga como un factor importante de posicionamiento.
Optimizar las imágenes que muestras y la forma en la que se cargan va a tener siempre un efecto importante en este proceso y, por lo tanto, en la clasificación de tu página en los resultados de búsqueda.
Reducción del consumo de ancho de banda
Si tu sitio web consume menos ancho de banda gracias a un buen trabajo de optimización, esto puede ahorrarte costes de hosting, especialmente si tu web tiene mucho tráfico.
Pero, de verdad, si tu hosting todavía mide la transferencia de datos y tiene limitaciones de este tipo, tal vez deberías plantearte en darle un poco de “cariño” y alojarla en un hosting más decente como el de Raiola Networks
Compatibilidad con dispositivos móviles
Las imágenes optimizadas son esenciales para que los usuarios que cargan la web desde dispositivos móviles tengan una experiencia eficiente.
Los usuarios móviles normalmente tienen menos ancho de banda y espacio de almacenamiento. Reducir esta carga hará que la experiencia desde estos dispositivos sea muy buena, aunque el ancho de banda no lo sea tanto.
Mayor accesibilidad
Incluir el uso de atributos alt bien redactados como parte del proceso de optimización de imágenes, mejora la accesibilidad web para personas con discapacidades visuales, lo que es importante tanto desde una perspectiva ética como de cumplimiento normativo.
Cómo Optimizar Imágenes para la Web y Mejorar el Rendimiento
La optimización de imágenes es una pieza esencial en el rompecabezas de la optimización web.
Así que vamos a empezar a ver cómo realizar la optimización de imágenes para tu sitio web y veamos los pasos clave que debes seguir para estar seguro de que tus imágenes sean lo más eficientes posible sin comprometer la calidad.
Desde la elección de formatos adecuados hasta la implementación de estrategias de compresión, te voy a contar cuales son las mejores prácticas para optimizar las imágenes y conseguir una experiencia de usuario excepcional.
Comprime las imágenes
La compresión de las imágenes es un proceso por el cual se consigue que el archivo de la imagen tenga un menor tamaño (lo que solemos llamar “menos peso”).
Esta compresión se suele realizar eliminando bytes de información de la imagen original. Para ello se utilizan algoritmos de compresión que son capaces quitar esos bytes que “sobran” para volver a guardar el archivo de la imagen con un aspecto similar.
Obviamente, al eliminar bytes se está eliminando información de la imagen y esto nos podría hacer pensar que la imagen se verá peor una vez comprimida.
Esto no siempre es así y a veces, aunque sea cierto, la diferencia no es apreciable a la vista. Con lo cual, una compresión eficaz será aquella que nos haga reducir el máximo peso al archivo de la imagen sin sacrificar su apariencia para el usuario.
¿Por qué es importante la compresión de las imágenes?
Las imágenes comprimidas están formadas por menos datos, por lo que su carga también será más rápida, mejorando así la velocidad de carga de la web.
No creas que la diferencia será mínima. Esto depende mucho del caso, pero en ocasiones tendrás diferencias de tamaño considerables sin perder calidad visual.
Utiliza la carga diferida cuando debas
Cómo y cuándo implementar la carga diferida para acelerar la carga de la página.
La carga diferida de imágenes puede ser una de las claves para optimizar la velocidad de carga de tu sitio web, pues te permite que las imágenes se carguen en el momento adecuado, en lugar de cargar todas las imágenes al mismo tiempo cuando un usuario entra en la página.
¿Para qué hacer que el usuario tenga que cargar las 20 imágenes de la página si en el momento de la carga solamente se verán dos? Es más lógico hacer que, según vaya haciendo scroll el usuario se vaya solicitando en el navegador la descarga de las imágenes que correspondan ¿no crees?
Pues eso es, precisamente lo que llamamos “carga diferida”.
La carga diferida tiene muchas ventajas a nivel WPO, pero entre las más destacadas están que obviamente reducen (a veces mucho) el tiempo de carga inicial y que también suponen un ahorro de ancho de banda (especialmente útil con ciertas conexiones móviles que no “vuelan” precisamente).
¿Cómo implementamos la carga diferida?
Si utilizas WordPress lamento decirte que hoy por hoy no hay una manera nativa para implementar el famoso “lazy load” en WordPress.
Vas a depender de un plugin específico o de la funcionalidad de algunos plugins de caché que te permitirán, entre otras cosas, implementar esta carga diferida.
Entre las opciones gratuitas tienes un montón de plugins en el repositorio de WordPress, pero si tengo que recomendarte solo uno quizás me decantaría por “Lazy Load” que es gratis (y eso os encanta, que lo sé yo)… pero además el javascript que usa es de unos 10kb, por lo que me parece una opción super-interesante.
Pero es que además de ser gratuito es de WP Rocket, que es uno de los plugins de caché más populares en WordPress.
Es de pago, eso si, pero a mi me encanta y yo creo que vale la pena cada euro que se paga al año.
Utiliza la etiqueta ALT de las imágenes
La etiqueta ALT, o texto alternativo, es una parte esencial de la optimización de imágenes en tu sitio web.
Esta etiqueta proporciona una descripción textual de una imagen y desempeña un papel crucial tanto en la accesibilidad web como en el SEO.
Piensa en la etiqueta ALT como si fuese una breve descripción que haga que, alguien que solo pueda leer el texto de la página, se entere perfectamente del contenido de la imagen y la pueda imaginar sin mucho margen de error.
Desde mi punto de vista, plantearlo así es la mejor manera de facilitar a Google la comprensión e indexación de la imagen.
Desde mi punto de vista este es un aspecto muy frecuentemente olvidado a la hora de publicar páginas y contenidos en la mayoría de los sitios web.
Pero es que además no nos damos cuenta de que todas, sí TODAS, las imágenes deberían tener un texto ALT para que nuestra página web se comprenda mejor. Pero la realidad es que iconos, botones, logotipos,… casi siempre se pasan por alto y eso es un error.
Te voy a dar tres claves que, si las tienes en cuenta a la hora de redactar el texto ALT de las imágenes:
- Descriptivo, pero conciso: No te pongas a describir el paisaje de la foto como si fueses J.R.Tolkien, porque ni lo haces tan bien como piensas ni hace falta. Simplemente transmite el significado y el contexto de la imagen de forma clara y sencilla.
- Palabras clave: Si ves que viene a cuento coloca las palabras clave en el texto ALT de la imagen. Esto puede ayudar a mejorar el posicionamiento orgánico de tu página.
- Evita el exceso de keywords: Ya os veo venir. Os acabo de decir “mejora el posicionamiento orgánico y ya estás corriendo a editar todas las imágenes para cambiar el ALT por “KW, KW,…” Aunque a la hora de la verdad todos las metemos ahí “con calzador”, es una buena práctica ponerlas de forma natural. Si te pasas se nota… Google lo nota.
Fíjate si será importante cubrir el campo ALT que hace ya un tiempo John Muller dijo que solventaba lo que puede ser el mayor problema SEO del lazy load que explicábamos en el punto anterior.
Pues sí, la carga diferida tiene un “problemilla” a nivel SEO. Si Google no renderiza la imagen y esta no tiene un texto que la explique, no podrá indexarla (pues no sabrá lo que hay).
En este aspecto, el texto ALT puede ayudarle a comprender el contenido de la imagen que aún no se ha cargado.
Esto lo podemos comprobar en Search Console de forma muy sencilla. En la sección “Inspección de URLs” podemos poner la página de nuestro sitio que queremos comprobar (una que use Lazy Load, claro).
Si pulsamos en “Probar URL publicada” haremos que Google rastree nuestra página en tiempo real.
Una vez rastreada podemos pulsar en “Ver página probada” y ahí nos mostrará 3 pestañas: HTML, CAPTURA DE PANTALLA y MÁS INFORMACIÓN (aunque esta última no viene al caso).
En “Captura de Pantalla” nos mostrará la página tal y cómo la renderizo. Verás que seguramente no ha llegado hasta el final del contenido.
Sin embargo, en la pestaña “HTML” sí que tenemos todo el código y en él se incluye la etiqueta <img> de las imágenes de nuestra página con sus correspondientes meta-etiquetas ALT
Esto hará que Google pueda conocer mejor el contenido de esas imágenes y considerarlas.
Pero no me tienes por qué creer a mí. Creételo si te lo dice John Mueller (que ya lo dijo hace algún tiempo):
Alt text is extremely helpful for Google Images -- if you want your images to rank there. Even if you use lazy-loading, you know which image will be loaded, so get that information in there as early as possible & test what it renders as.
— Expert prompt engineer with 8+ yrs experience, ama (@JohnMu) September 4, 2018
Para los que estudiasteis inglés con la LOGSE: “El texto alternativo es extremadamente útil para Google Imágenes — si desea que sus imágenes se clasifiquen allí. Incluso si utiliza la carga diferida, sabe qué imagen se cargará, así que obtenga esa información lo antes posible y pruebe cómo se representa.”
Especifica las Dimensiones de la Imagen
Especificar las dimensiones de cada imagen en el código HTML es una práctica esencial que va a afectar al rendimiento de la página desde varios enfoques distintos:
Por una parte, cuando se especifican las dimensiones de una imagen en el código, el navegador puede reservar el espacio necesario para la imagen antes de que esta se cargue por completo.
Esto evita que la página se reorganice mientras se cargan las imágenes, lo que proporciona una experiencia de usuario más fluida.
Por otra parte, si las dimensiones de las imágenes no se especifican, la página puede parecer desordenada y poco profesional cuando los elementos se mueven durante la carga.
Mejora el rendimiento del sitio
Se realizarán menos solicitudes al servidor, pues al conocer las dimensiones de las imágenes, el navegador puede realizar solicitudes precisas al servidor, lo que reduce la carga en el servidor web y acelera la carga de la página.
Mejora el seo
¿Empiezas a encontrar un patrón en todo esto?
¿Te has dado cuenta de que cuando algo mejora el rendimiento de carga y además mejora la experiencia de usuario… al final también mejora el SEO?
Pues sí, efectivamente, los motores de búsqueda le dan mucha importancia a la experiencia de usuario, pues al fin y al cabo sus usuarios son los que te envía como tráfico orgánico. Si estos no están contentos con los resultados de tu web, eso es que no están contentos con Google por recomendarte… y lo dejará de hacer.
Por otra parte, los motores de búsqueda valoran el rendimiento web, incluida la velocidad de carga de la página. Especificar las dimensiones de las imágenes contribuye a un mejor rendimiento, lo que puede influir positivamente en el SEO y la clasificación en los resultados de búsqueda.
¿Cómo especificamos las dimensiones de una imágen?
Pues básicamente hay dos formas de hacerlo: utilizando atributos HTML o mediante CSS.
Además, obviamente, de las facilidades que te dan constructores específicos como Elementor o GeneratePress, Visual Composser,… que en este caso las vamos a obviar (pero que al fin y al cabo suele ser tan sencillo como poner el alto y el ancho en dos campos)
MEDIANTE ATRIBUTOS HTML
Cuando añadimos una imagen se genera una etiqueta <img> a la cual le podemos poner los atributos “width” (ancho) y “height” (alto).
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20200'%3E%3C/svg%3E" alt="Descripción de la imagen" width="300" height="200" data-lazy-src="imagen.jpg"><noscript><img loading="lazy" loading="lazy" decoding="async" src="imagen.jpg" alt="Descripción de la imagen" width="300" height="200"></noscript>
La desventaja de este método es que al utilizar este método para definir las dimensiones de la imagen tenemos que tener en cuenta que estamos definiéndolas únicamente para esa imagen.
Así que si queremos usar las mismas dimensiones en otra imagen de la página tendremos que volver a añadir esos valores en los atributos correspondientes de la etiqueta de imagen.
La ventaja es que al encontrarse todo el código en el mismo documento estaremos mejorando el rendimiento inicial de la página.
MEDIANTE CÓDIGO CSS
También puedes usar CSS para definir el ancho y el alto de una imagen.
Para esto lo que haremos será asignarle a la etiqueta imagen una clase. En este ejemplo la clase “imagen” (que hoy no estoy. imaginativo)
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Descripción de la imagen" class="imagen" data-lazy-src="imagen.jpg"><noscript><img decoding="async" src="imagen.jpg" alt="Descripción de la imagen" class="imagen"></noscript>
Después definiremos en el fichero CSS de la página los valores alto y ancho para todas las imágenes que tengan asignada esa clase “imagen”
.imagen {
width: 300px;
height: 200px;
}
Sin embargo, es importante recordar que la especificación de dimensiones en HTML es preferible para el rendimiento inicial de la página.
Utiliza Imágenes Propias u Originales Siempre que Puedas
Utilizar imágenes propias y originales es una práctica que puede marcar la diferencia en la apariencia y la efectividad de tu sitio web.
Las imágenes únicas pueden ser una buena herramienta para destacar tu marca, pero además aportan credibilidad y autenticidad (al poder reflejar tu marca y tus valores de una forma única), diferenciación (pues nadie más va a tener estas imágenes… a no ser que te las roben, pero de eso hablamos en un momento) y por supuesto control creativo.
Sin embargo, es cierto que, en algunos casos, el uso de contenido de terceros o de bancos de imágenes es necesario o inevitable.
Si vas a utilizar imágenes de stock te aconsejo tengas muy en cuenta estos puntos:
- Revisa los derechos: Asegúrate de entender completamente los derechos y restricciones asociados con las imágenes de terceros o de stock. Cumple siempre con los términos de uso.
- Modificación y personalización: Siempre que sea posible, modifica las imágenes de terceros para que se adapten a tu marca y mensaje. Agrega tu propio toque creativo y personalización. Haz únicas las imágenes comunes.
- Utiliza como base: Considera utilizar imágenes de terceros como base para crear contenido original. Puedes agregar elementos, texto o efectos para hacer que la imagen sea única.
- Fuente confiable: Al seleccionar imágenes de terceros, elige fuentes confiables y reputadas. Esto minimiza los riesgos de problemas legales y garantiza la calidad del contenido.
Agregar Marcado de Schema
Cuando hablamos de los datos estructurados ya apuntamos a alguno de estos tipos de marcado, pero no está de más que destaque aquí los e que, en mi opinión, son más frecuentes a la hora de dar contexto a las imágenes:
- Producto: Si tu sitio web incluye imágenes de productos, el marcado de producto es esencial para mostrar información clave, como nombre, precio y disponibilidad.
- Receta: Si compartes imágenes de recetas o alimentos, el marcado de receta puede resaltar ingredientes, tiempo de preparación y calorías.
- Logo: El marcado de logo es valioso para destacar la marca de tu empresa en el logotipo de la imagen.
Otro marcado, que en mi opinión se utiliza menos de lo que conviene, pero que en algunos casos puede resultar muy interesante es el de Imagen. Este nos permite proporcionar información detallada sobre una imagen específica en una página web.
Este tipo de marcado permite describir la imagen, su autor, su ubicación, su licencia y otros detalles relacionados. A pesar de no ser tan común nos permite enriquecer la información de una imagen en particular.
Ventajas de aplicar el marcado de Schema.org en las imágenes de la web
Utilizar estos tipos de marcado en nuestras imágenes (u otro que sea más conveniente en cada caso) nos va a proporcionar ciertas ventajas en el rendimiento orgánico de nuestra página:
Más clics y más visibilidad: Las imágenes con fragmentos enriquecidos a menudo atraen más clics, lo que aumenta la visibilidad de tu contenido y potencialmente el tráfico hacia tu sitio web.
Mejor posicionamiento orgánico: El marcado de schema facilita a los motores de búsqueda información precisa sobre tus imágenes, lo que puede influir positivamente en la clasificación de tu página en los resultados de búsqueda.
Destacas entre la competencia: Puedes destacar en las SERPs gracias al marcado de datos. Esto es una clara ventaja competitiva… más aún cuando sabemos que es una estrategia frecuentemente olvidada.
Haz una auditoría de imágenes en tu web
Los sitios web cambian, crecen y evolucionan. Esto nos obliga a revisar y corregir errores que se producen en muchos aspectos. Uno de ellos ha de ser siempre el uso correcto de las imágenes.
Te recomiendo que cada cierto tiempo realices una auditoría de las imágenes en tu web. Es importante mantener su optimización bajo control, puesto que su peso suele suponer una gran parte del total del sitio y son una parte fundamental de nuestro contenido
Cómo realizar una auditoría de imágenes deberá ser parte de otro artículo en sí mismo. Pero como sé que la pregunta va a ser “¿qué herramientas utilizo para hacer la auditoría de imágenes?”, pues te voy a aconsejar dos. Ambas tienen su versión gratuita, aunque la versión de pago tiene muchas más ventajas y menos limitaciones (como es lógico).
La primera es Screaming Frog, que para mí es unan de las herramientas esenciales para mantener bajo control cualquier sitio web.
Pasos para realizar una auditoría de imágenes en tu sitio web (con la versión “free” solo hasta 500 URLs… es lo que hay).
Lo bueno de esta herramienta es que la forma en la que una vez configurado y hecho el rastreo, la forma en la que te muestra los resultados y los datos de las imágenes que presentan diferentes errores es tan sencilla que no hay forma de perderse. (Seguramente lo más difícil viene antes de darle al botón de “Empezar” el rastreo)
La otra herramienta es Website Auditor (de SeoPowersuite). Esta herramienta también está pensada para hacer auditorías web completas, pero es tan sumamente versátil que te permite hacer un seguimiento granular de cada aspecto… en este caso de las imágenes.
Desde el propio resumen de la auditoría ya de indica si existen problemas de imágenes rotas o sin texto ALT con las imágenes, cuales y en dónde.
Como ya te he dicho, ambas tienen versiones gratuitas y en ambas lo gratis es limitado. En Screaming Frog la limitación principal está en el número de URLs a analizar y en Website Auditor tendrás muy limitado el guardado de la auditoría y su exportación.
De todas formas, si vas a comprar una y tienes dudas de cuál te va a ir mejor para auditar imágenes, entonces creo Screaming es sin duda tu herramienta.
Protege tus imágenes contra robos.
No hay peor manera de empezar el día que enterándote de que te han “fusilado” un contenido que tanto trabajo te llevó hacer.
Las imágenes no son una excepción… es más, yo diría que es lo primero que te van a “coger prestado”. Al fin y al cabo, aparecen en la búsqueda de imágenes de Google y todos los vagos saben que si aparece ahí es suyo. 🤦🏻♂️
Seguramente ya te pasó alguna vez. O tal vez no lo sabes pero ya te pasó. De cualquier forma, las buenas noticias son que hay maneras de ponérselo difícil a esa gente que (luego te lo dirán ellos cuando protestes) han decidido “hacerte el favor de difundir tu imagen” (pero como si fuera suya eh, que “lo cortés no quita lo valiente”).
Estas son algunas de las acciones que puedes realizar para evitar, poner difícil o al menos molestar a quien se quiera apropiar de tus imágenes originales:
Marca de agua o logotipo
Si es posible incluye en tus imágenes una marca de agua o integra tu logotipo en la propia imagen.
Esto no va a impedir que usen tu imagen, pero al menos vas a estar haciendo marca.Todos mis “astronautas” llevan el traje corporativo de seook.
Lo que te voy a contar es un poco “off topic” pero esto lo aprendí en el albor de los tiempos leyendo la revista Microhobby cuando era pequeño. (Venga, ya podéis llamarme viejo).
El caso es que las portadas de esta revista las hacía un diseñador llamado Ponce que firmaba todas las portadas de una forma que me fascinaba, integrándolas en el propio diseño.
Deshabilita la función clic derecho
Una forma de ponérselo difícil a quien te quiere copiar la imagen es desactivar las funciones del clic derecho en la página.
Para ello, en WordPress, tenemos el modo fácil con plugins como “Disable Right Click For WP” o pegando tú mismo un sencillo código en el functions.php de tu tema (aunque te recomiendo que uses un Child Theme siempre que puedas si vas a hacer estas cositas)
function disable_rightclick() {
?>
jQuery(document).ready(function(){ jQuery(document).bind("contextmenu",function(e){
return false;
});
});
<?php
}
add_action('wp_footer', 'disable_rightclick');
A mí personalmente no me gusta desactivar el clic derecho, porque creo que tiene muchas otras funciones lícitas que pueden ser útiles para los usuarios.
Habilita la protección de Hotlinking
El hotlinking es cuando otros sitios web enlazan directamente a tus imágenes en lugar de alojarlas en sus propios servidores.
Esto es especialmente dañino porque, además de utilizar tu contenido están utilizándolo desde tu servidor, es decir, consumiendo tus recursos.
Puedes configurar tu servidor para bloquear el hotlinking, lo que impedirá que otros sitios utilicen tus imágenes sin permiso.
En realidad hay muchas formas de protegerte de estas prácticas, pero si decides hacerlo así pon mucho cuidado en configurarlo bien para no bloquear a los motores de búsqueda.
Una de las formas más accesibles para llevar a cabo esta protección es, si usas Cloudflare, en creando las reglas necesarias y habilitando la protección en el apartado “Scrape Shield”
Establecer políticas de uso de imágenes
Si tienes un sitio web y quieres que tu contenido sea compartible, considera establecer políticas claras de uso de imágenes que describan cómo las personas pueden utilizar tus imágenes y qué requisitos deben cumplir para hacerlo.
Considerar el registro de derechos de autor
En algunos casos, registrar tus imágenes con una entidad de derechos de autor puede proporcionarte una mayor protección legal en caso de infracciones.
Herramientas para optimizar imágenes
A estas alturas espero que tengas claro que optimizar las imágenes de tu web juega un papel crucial en el rendimiento que puedes esperar de cada página.
Pero también tienes claro que las imágenes son uno de los recursos más abundantes en muchas páginas.
Resulta evidente que poder utilizar herramientas que automaticen este proceso se hace casi inevitable si quieres tener vida propia.
Afortunadamente existen muchas herramientas que te van a ayudar a realizar este trabajo de una forma bastante adecuada.
En WordPress hay plugins que realmente funcionan de manera espectacular, así que te voy a dar 3 opciones que, desde mi punto de vista, son las más destacables:
Short Pixel
Mi favorita y que instalo en casi todos mis WordPress es Short Pixel (que ya la mencioné antes en este artículo).
Con esta herramienta instalada y configurada a tu gusto conseguirás que las imágenes de tu web se sirvan con el peso más reducido que te puedes imaginar, sin perdiddas de calidad visibles y en formatos de nueva generación como son WebP o AVIF (si quieres… que deberías querer)
Algo que me flipa de Shot Pixel es que no es solo para WordPress. Desde el panel de control de su página podrás optimizar imágenes a tu gusto subiéndolas de una en una o en lotes.
EWWW Image Optimizer
No puedo dejar de mencionar este plugin que tiene más de un millón de instalaciones activas y una valoración de 4,7 sobre 5 en las reseñas de WordPress.
Cabe destacar que, aunque tiene una versión gratuita, con la versión de pago puedes aumentar la compresión un 80% más (que no es poco).
Imagify
Otra de las más herramientas más populares cuando se trata de optimizar imágnes para WordPress es Imagify.
En el momento de publicar este artículo sobrepasa ya las 800.000 instalaciones activas y las reseñas dejan claro que sus usuarios están bastante satisfechos con el resultado, porque tiene una valoración del 4,4 sobre 5
La limitación más importante que tiene su versión gratuita es que no podrás comprimir más de 20Mb de imágenes al mes (lo cual a mí me parece muy poco, pero obviamente depende del uso que le vayas a dar)
Caso práctico de optimización de imágenes web
Ahora que ya te he soltado el rollo teórico quiero decirte dos cosas: primero que gracias por llegar hasta aquí, y segundo, que me quiero imaginar que no ha sido “tanto rollo” si has llegado 😅
Pero ahora me gustaría ir a la práctica y ver cómo aplicamos esto de la optimización de imágenes y que efectos directos puede tener en el rendimiento de tu web.
Para este ejemplo he cogido la web de una clínica dental de A Coruña que NO son cliente míos. (Los míos son de la competencia 😈) y que tienen mucho margen de mejora (que es el eufemismo que solemos utilizar todos para no decir “está mal”).
Comprenderás que voy a anonimizar las capturas. Pero oye, si eres de esa clínica y quieres que te la ponga así de bien, ya sabes donde hacer clic: aquí 😜
Voy a partir de la página principal, que el above-the-fold ya presenta una imagen grande en un banner.
En un primer análisis de la página ya vemos que tiene 46 imágenes en la home y además, nos muestra claramente que muchas de estas imágenes tienen pesos fuera de lo que sería óptimo y esto está aumentando el peso de la página.
Pero para detectar este problema tampoco es que haga falta usar Screaming Frog. Con pasar la url por PageSpeed Insights ya podemos darnos cuenta de que la web tiene un problema serio de rendimiento y, entre otros problemas, encontramos muchos relacionados con la optimización de imágenes.
Y ahora qué? ¿Vamos una por una optimizando? ¿Pagamos una herramienta premium y las optimizamos por lotes?
No. No hace falta. Vamos a utilizar la herramienta gratuita que nos facilita Short Pixel ¿ves por qué me encanta esta herramienta?
Si en esa clínica dental tuviesen el plugin de la herramienta sus imágenes se optimizarían de forma automática y con el tipo de compresión que decidan: Lossy (que se centran en optimizar la velocidad del sitio), Glossy (que optimizan la velocidad de carga pero con menor pérdida de nitidez) o Lossless (para reducir el peso de la imagen pero conservando cada pixel).
De cualquier forma, la opción que utiliza la herramienta de forma gratuita es la comprensión Lossy, que es la que más mejoras aportará en el rendimiento y la pérdida de nitidez es inapreciable para el usuario.
Por lo tanto, vamos a la URL de la herramienta y simplemente le indicamos la página de la que queremos optimizar las imágenes.
Al pulsar en “Details” se despliegan los detalles de las imágenes que se han mejorado.
En cada imagen se muestra el porcentaje de tamaño que se ha conseguido ahorrar y dos botones: uno a la izquierda para descargar la imagen optimizada y otro a la derecha (con forma de ojo) que nos lleva a una comparativa de la calidad que podríamos conseguir con cada uno de los tipos de compresión que nos ofrece.
Pero, no sé si te has fijado en un detalle y es que cuando analizamos la URL nos aparecían 46 imágenes en ella. Sin embargo, Short Pixel solamente optimizó 36. ¿Qué pasa con las otras 13?
La explicación a esta diferencia es muy sencilla y la propia herramienta nos avisa con un texto que hemos visto en la primera captura:
Se trata de algunas imágenes que pasan desapercibidas para la herramienta por ser mostradas mediante Java Script.
Cuando veas esta diferencia te aconsejo que no la dejes pasar, pues muchas veces se trata de imágenes grandes.
En este caso vemos que se trata de imágenes como, por ejemplo, la de fondo de la cabecera que pesa nada menos que 443 Kb
Lo que haremos será revisar una a una esas 10 imágenes que detectó Screaming Frog y no aparecen en la optimización automática de Short Pixel para determinar cuales se están cargando realmente al mostrar la página.
Todas esas imágenes las podremos descargar de la página y subir en lote de nuevo a la herramienta para que las optimice en bloque.
En este ejemplo hemos subido las 5 imágenes más grandes que se estaban cargando y, como puedes ver tenían mucho “margen de mejora”
Pero recuerda que este proceso estamos haciéndolo en “modo gratis”, es decir, sin la versión de pago del plugin. Bueno, en realidad sin ni siquiera acceder al panel de administración de la página.
Con el plugin instalado podemos hacer que todo esto vaya en piloto automático y muchas más cosas como utilizar el formato WebP al entregar todas estas imágenes.
Y esto no es todo. Lo que hemos hecho en este caso práctico es simplemente optimizar el peso de las imágenes. Habría que corregir también cosas como los textos ALT vacíos y los tamaños no definidos para algunas imágenes. Estos errores, si te fijas, ya aparecían en la captura de Screaming Frog que te mostré.
¡A optimizar las imágenes de tu web!
Aunque parezca mentira podríamos profundizar mucho más en muchos de los aspectos, pero con esto creo que yo ya cumplí mi parte que era explicarte la importancia de optimizar las imágenes de una página web y cómo hacerlo.
Hasta aquí ya hemos aprendido que las imágenes no solo embellecen nuestras páginas, sino que también desempeñan un papel crucial en la atracción de visitantes y en la clasificación en los motores de búsqueda.
También hemos descubierto cómo seleccionar los formatos de imagen adecuados, cómo comprimir imágenes sin sacrificar la calidad y cómo utilizar herramientas de optimización de vanguardia para acelerar la carga de nuestras páginas. También hemos explorado la importancia de etiquetas ALT, dimensiones precisas y la elección de imágenes originales.
Además, hemos profundizado en la protección de nuestras imágenes y en el uso de herramientas avanzadas como Screaming Frog y Short Pixel para llevar a cabo auditorías y mejoras prácticas en tiempo real.
Ahora que tienes las herramientas y el conocimiento necesario, te toca a ti ponerlo en práctica.
Al hacerlo, no solo estarás ofreciendo un sitio web más rápido y atractivo, sino que también estarás dando un paso adelante en la carrera hacia los primeros resultados de búsqueda.
…y si aún te quedas con dudas o te parece un poco “demasiado”, pues ya sabes donde encontrarnos.
