Hablar de optimizar imágenes para web, para la velocidad de carga y para el SEO On Page en 2022 puede parecer una tontería.
¡Todo el mundo sabe que es necesario!
Pero navegando en Internet veo que todavía hay muchas inexactitudes que también se posicionan en los primeros resultados de Google. Incluso cosas absurdas.
Entonces la IA de Google todavía tiene que aprender a distinguir los fakes.
Sin embargo, la velocidad de carga es uno de los factores de ranking más importantes.
Por lo que no se debe subestimar el rol que juegan las imágenes en las páginas web, ya que se encuentran entre los contenidos más pesados.
El diseño optimizado de una web que nos pueda dar un buen rendimiento no es cosa de web masters improvisados.
Un sitio web no es un folleto.
Y con esta afirmación no quiero decir que diseñar un folleto sea más fácil que diseñar una página web.
Lo que quiero decir es que son dos productos diferentes, por lo que un diseñador gráfico que no tenga conocimientos específicos de web y SEO podría cometer errores, a veces incluso demasiado triviales.
Hoy quiero explicarte cómo optimizar las imágenes para que tu página siga siendo muy rápida. Y con cuidado de no caer en trampas innecesarias que te harían perder tiempo precioso.
Para optimizar las imágenes para web, para no penalizar la velocidad de carga de la página, es necesario prestar atención a varios aspectos.
Así que he decidido que, además de este post, voy a publicar otros dos que cubrirán algunos temas más específicos.
Como en una «mini series».
Cómo optimizar las imágenes para web?
Para optimizar las imágenes de una web es necesario analizar y optimizar 5 puntos muy sencillos.
Y entonces hay que soltar un paso que es inútil pero que muchos creen necesario, perdiendo tiempo en una locura que no sirve para web.
He indicado en rojo y en verde lo que profundizaré en el segundo y tercero episodio de la mini series. De todos modos en esta primera publicación también te dejaré algunos consejos sobre esos temas.
Distinción entre imágenes y texto[ Volver arriba ]
Este es el primer aspecto al que hay que prestar mucha atención cuando queremos optimizar imágenes para la web.
En muchas páginas se proponen sliders o infografías que consisten en imágenes con textos integrados, o incluso con solo textos pero muy grandes y transformados en imágenes.
Las imágenes deben estar separadas del texto tanto como sea posible.
Esto se debe a que, además de sobrecargar la página al proporcionar texto en forma de imágenes, está evitando que los motores de búsqueda lean lo que está escrito en esa imagen (excepto las imágenes SVG, si no se convierten en trazados, y te lo explicaré en el tercer post).
Existen diversas soluciones que permiten publicar y fusionar gráficamente los textos con las imágenes, pero poniendo los textos en html para que los rastreadores puedan escanearlos: constructores de bloques, addons o plugins.
Mi consejo es limitar al máximo las imágenes con textos incrustados.
Sin embargo, hay casos en los que esta división no se puede evitar.
Por ejemplo para las imágenes creadas con el objetivo de ser compartibles en las redes sociales.
En ese caso, lógicamente el mensaje escrito debe enviarse necesariamente junto con la foto, por lo que es bueno ponerlos en un solo archivo de imagen.
PARSIMONIA. [ Volver arriba ]
Casi suena como una palabra mágica, ¿verdad?
En el caso de las imágenes para una página web, para mí realmente lo es.
Sucede dejarse llevar y querer “embellecer” nuestras páginas con una serie infinita de imágenes.
Incluso añadiendo efectos gráficos, movimientos de los elementos, slide de diapositivas, etc. etc.
Bueno, en mi hermoso país que parece una bota hay un proverbio muy conocido y… quizás el más corto que conozco.
Il troppo stroppia.
En castellano se podría traducir como El demasiado te deja inválido.
Este proverbio indica la negatividad de cualquier exceso: la abundancia exagerada, la gran suerte, la riqueza excesiva pueden volverse contraproducentes.
De hecho, creo que está claro que llenar los contenidos con fotos o imágenes lastra las páginas… probablemente sin ser necesario.
Así que es una buena regla limitarse a insertar imágenes verdaderamente útiles, como las que muestran productos, o detalles, o el sentido práctico de una idea.
Sin embargo, persiste una mala moda, aún bastante extendida entre las agencias web y los webmasters, que consiste en llenar de imágenes las web de los clientes.
Así probablemente, quieren demostrar que han construido páginas chulas, qué satisfacen la vista, pero provocando enormes retrasos en la carga de la página.
Pero quizás sean profesionales poco atentos a la velocidad de carga, diría casi que sean sin preparación en SEO.
De hecho, es natural preguntarles… ¿con qué propósito llenas en exceso esas pobres páginas que se convierten en «perezosos»? ?
¿Estáis tan seguro de que los usuarios acceden a esa web porque buscan dibujos, gráficos, fotos e imágenes?
Si eres fotógrafo, entonces SÍ, seguro.
¿Pero sois todos fotógrafos por ahí?
Entonces creo que el sentido común sea suficiente, porque en realidad no hay una regla estricta.
La clave está precisamente en la PARSIMONÍA.
¿Las imágenes de tu web son adecuadas y tienen dimensiones razonables? [ Volver arriba ]
Uno de los primeros errores que encuentro en los sitios web lentos se refiere a la dimensiones excesivas de las imágenes que se cargan en el servidor y que luego se insertan en las páginas de la web.
Creo que hoy en día todo el mundo ha entendido que las web deben ser «responsive», es decir, el tamaño de los contenidos y su disposición se adaptan según los dispositivos con los que se visualicen las páginas.
Y el propósito de todos los buenos webmasters es diseñar y verificar que el diseño de la página sea lo más adaptable posible a cada dispositivo.
Pero tal vez los webmasters con mucha frisa prefieren subir al servidor las imágenes originales, las que tienen enormes dimensiones y que podrían ser impresas en vallas publicitarias alrededor la ciudad.
Otros, en cambio, por lo menos tienen la previsión de pasarlas por un optimizador, que comprime su peso. Pero no siempre les importan las dimensiones.
Y ojo porque también el más banal de los smartphones actuales es capaz de captar imágenes con dimensiones desmesuradas, si pensamos en la web.
Por qué la web no es una valla publicitaria del tamaño de la fachada de un edificio.
Las imágenes de la web se adaptan según la plantilla gráfica y el tamaño del dispositivo.
Y las dimensiones de la imagen afecta el peso del archivo.
Un webmaster atento a la velocidad de carga de la página, que es uno de los factores de ranking más importantes, deberá identificar las dimensiones máximas en las que se puede visualizar la imagen.
Y tendrá que adaptar el tamaño de la imagen, utilizando una de las diversas herramientas disponibles, como Adobe Photoshop.
Por ejemplo, ¿por qué cargar e insertar una imagen de 5000×3750 píxeles en el slider de un producto que, incluso en una pantalla de resolución 4k, quizás alcance un tamaño máximo de 1000×750 píxeles?
El uso de imágenes grandes debería limitarse a aquellas páginas en las que por diversos motivos sea necesario hacer zoom para visualizar mejor los detalles del producto. Esta función lógicamente puede resultar útil en algunos casos concretos.
Pero por experiencia puedo garantizar que hay muy pocos casos de este tipo.
Y como dijo el legendario Forrest Gump, ¡Y eso es todo lo que tengo que decir al respecto!
Optimizar imágenes para web: ¿Cuál es el peso ideal de un fichero? [Volver arriba]
Es un lugar común entre los especialistas SEO decir que una imagen optimizada para la web y para SEO no debe exceder los 100 KB.
Si bien estoy de acuerdo en cierta medida con esta afirmación, personalmente creo que es más correcto hablar de la relación entre el peso, las dimensiones y el contenido de la imagen.
Establecer el límite en 100 KB en algunos casos sería demasiado restrictivo.
Entonces, ¿cuál es el peso que deben realmente tener las imágenes optimizadas para la web?
La respuesta correcta es lo menos posible.
Porque cada imagen tiene su propósito específico.
Por lo tanto, lo más importante es tratar de optimizar el archivo de acuerdo al resultado que tendrá que producir la imagen dentro de la página en la que se publique.
Piensa por ejemplo en la foto de un cualquier producto sobre fondo blanco, publicada en la página de un e-commerce que ocupará máximo un espacio de 800×600 px.
Casi seguro que los famosos 100KB para una imagen de ese tamaño y con esos contenidos, sería una auténtica barbaridad. ¿Sabes que el blanco ocupa menos espacio de datos que el negro?
Probablemente, una foto así, una vez optimizada, podría limitarse a pesar 30 KB, manteniendo una calidad excelente.
Por el contrario, para imágenes con colores oscuros que tienen que cubrir el ancho de toda la pantalla, los 100 KB podrían ser no suficientes, ya que tal resultado quizás solo se pueda obtener aumentando drásticamente la compresión de las informaciones de la imagen.
O deberías reducir las dimensiones en píxeles, pero al cargar imágenes de tamaño insuficiente, el navegador las expandiría automáticamente, produciendo ese efecto pixelado tan horrible.
Tal vez yo subo imágenes de hasta 150 KB o incluso más de 200 KB.
Porque hay que tener en cuenta que la página puede (o a veces incluso debe) cargarse en pantallas con eje horizontal de 1920 px (full HD) o 3840 px (4k).
Es sobre todo en este caso que la palabra mágica se vuelve fundamental: ¡parsimonia!
¿Cuántas imágenes de pantalla completa se necesitarán en la página?
Quizá solamente la de portada y, por lo tanto, podría ser un buen compromiso subir una sola foto de ese tamaño.
Es por esto que sostengo que el peso óptimo es variable.
Es decir, debe ser proporcionado de acuerdo al resultado gráfico que es estrictamente necesario publicar en el sitio web.
Lo cierto es que para estar optimizado, el peso del archivo debe ser lo más bajo posible.
Pero eso no es todo, porque hay otros factores que afectan el peso de una imagen.
Resolución de 72 dpi para la web: arcano, mito, leyenda urbana o… ¿confusión que solo crea problemas? [Volver arriba]
Para tratar los detalles de la resolución de las imágenes me arriesgaría a salirme del tema de cómo optimizar las imágenes para la web.
Esto se debe a que la resolución de una imagen no tiene nada que ver con la velocidad de carga web y el SEO.
¿Qué dices Ale, estás loco?
Esto no puedo descartarlo. ?
Pero estoy muy seguro de lo que digo y te demostraré que no me equivoco.
Para hacerlo de forma exhaustiva, pienso que sea mejor tratar el tema en otro post dedicado exclusivamente a la inutilidad de establecer la resolución de las imágenes, cuando se quiere publicarlas en una página web.
Allí te explicaré un poco de historia, para que pueda entender por qué la resolución a 72 ppi fué tan importante a mediados de los ’80. Y con un ejemplo te mostraré paso a paso por qué hoy en día la resolución de una imagen es un ajuste irrelevante para la web*.
Por lo tanto, irrelevante para la velocidad de carga, e irrelevante para el SEO.
* También sería irrelevante en el caso de un comercio electrónico que venda imágenes. Porque la alta resolución sería un requisito previo solo para los archivos que se pueden descargar después de la compra, no para las imágenes que aparecen en la página web.
Lo que puedo adelantar hoy, en breve, es que para las imágenes que se muestran en una pantalla no necesitas arreglar la resolución en dpi, porque tienen una dimensión ligada a dos valores: un ancho y una altura que pero se expresan en píxeles.
Y basándose en esas dimensiones expresadas en píxeles, las imágenes tendrán una cierta proporción en la pantalla.
Los píxeles son la unidad de medida en el video, por lo que no tiene sentido prestar atención a los dpi (dots per inch) o sea la proporción de puntos/pulgadas que, en cambio, es la resolución para imprimir.
Punto.
Y ahora te doy un consejo: para optimizar imágenes para la web, no pierdas el tiempo configurando la resolución, ya que no te importa imprimir estas imágenes en papel.
En su lugar, comprueba si el software que utilizas para el procesamiento de imágenes tiene la función «Guardar para web» o «Exportar para web» o algo similar.
Si es así, use esa función para optimizar tus imágenes para ser comprimidas para la web. Busca el equilibrio que más te guste entre la máxima compresión posible pero también obteniendo una calidad visual aceptable de la imagen.
A través de esa función, la resolución de la imagen producida probablemente será de 72 dpi, pero te aseguro que no es por eso que la imagen será optimizada para la web.
Si no quieres perderte los detalles y el ejemplo que profundizaré sobre este tema, vuelve a visitar mi blog o simplemente suscríbete a la newsletter.
Compresión y formatos: JPG, PNG, GIF, SVG o WebP? [Volver arriba]
Hay compresiones de imágenes con pérdida, llamadas imágenes Lossy, que ya solo porque eliminan partes de los datos darán como resultado un archivo más ligero.
Y este es un aspecto apetecible para la web.
Luego hay otras compresiones sin pérdida, por tanto más pesadas, llamadas imágenes Lossless. A primera vista pueden parecer menos adecuadas para nuestra causa de no ralentizar la velocidad de carga de la página.
Pero esto no siempre es verdad.
Además, para cada tipo de compresión existen varios formatos de imagen, algunos más adecuados que otros para la web.
Entonces, ¿qué formato elegir para nuestras páginas web?
También en este caso, para encontrar la respuesta, necesariamente debemos analizar el contenido que queremos publicar. Luego hacernos la pregunta clave de siempre, la que salva la vida al webmaster: ¿cuál es el propósito de la imagen que queremos publicar? ?
Cada tipo de compresión tiene ventajas pero también aspectos negativos. Por eso debemos prestar atención a estas diferencias y tener claro tanto los puntos fuertes como los débiles de cada uno.
Quiero adelantarte que PNG y JPG son los formatos más populares y que tienen características fundamentales para los desarrolladores.
Pero las imágenes SVG y el formato Web P de Google pueden estar un punto por delante de los demás, si quieres prestar atención a la velocidad de carga y al SEO.
Si quieres saber por qué, no te pierdas el tercer post de esta «miniserie» que dedicaré solo a los formatos (más una pequeña joya 💎).
Optimización de datos para la indexación de imágenes. [Volver arriba]
He llegado al final y quiero dejarte una sugerencia que no se centra en la velocidad de carga, sino que es fundamental para la optimización de las imágenes publicadas en tu web.
Los datos.
Y sí, porque de nada serviría preocuparse por optimizar las imágenes en cuanto a dimensiones, peso, formato, etc., dejando probablemente de lado uno de los factores más importantes para el SEO.
Ahora está claro para todos que las imágenes compiten entre sí también por el posicionamiento en los buscadores.
Entonces, ¿por qué no dedicar unos minutos más de nuestro arduo trabajo para insertar también los metadatos que nos permitirán ampliar las oportunidades para posicionar nuestro contenido, incluso si se trata de imágenes?
Tal vez, dado que ahora sabe que la resolución es irrelevante, podría aprovechar ese tiempo ahorrado para concentrarte en los metadatos que son esenciales. ?
Así que no olvides asignarle un nombre sensato al archivo y completar los atributos TITLE, ALT, REL y si quieres el pie de foto. Eh sí, Google también lee esas cosas que muchos lectores ni siquiera se cagan. ?
Pero hablaré de esto en otro post dedicado a la optimización de metadatos, ¿de acuerdo?
Estas son las características más relevantes para optimizar las imágenes con el fin de limitar al máximo el tiempo de carga de las páginas de tu sitio web.
Si los aplicas metódicamente verás que no te llevarán mucho tiempo.
Y sobre todo, es mejor realizar estas simples operaciones cuando estás creando la página. Porque si pospones este proceso, corres el riesgo de perder oportunidades de ranking.
Además, corres el riesgo de tener que volver sobre tus pasos y tardar el doble en encontrar las imágenes no optimizadas y luego corregirlas.
En este punto, sin embargo, te pongo yo un par de preguntas:
¿Crees que me perdí algo?
¿Tienes alguna idea sobre la optimización de imágenes para la web que te gustaría compartir?
Deja un comentario, por favor, porque estoy convencido de que nunca dejamos de aprender. Y siempre tengo curiosidad por conocer nuevos trucos, nuevos aspectos y nuevas tendencias sobre el SEO y cómo mejorar la velocidad de carga.
Mil gracias, y ¡hasta el próximo episodio!
Credits to images on this post:
freepik | Simo99 via Wikimedia Commons | Flaticon jpg y png