Optimizar imágenes: Guía paso a paso

02 Jun Optimizar imágenes: Guía paso a paso

Aunque se trata de uno de los ámbitos más ignorados, optimizar imágenes es imprescindible para cualquier sitio web. Hoy en día, todavía es común encontrar páginas con imágenes enormes, con nombres de archivo sin describir o con dimensiones que no se corresponden con como se muestran.

Optimizar imágenes para web

Una buena optimización de imágenes es clave desde un punto de vista SEO por varios motivos. En primer lugar, se debe tener en cuenta la medida de las imágenes para asegurar que no hacen empeorar el tiempo de carga de una web.

Por otro lado, los motores de búsqueda de Google aún no leen imágenes (aunque tienen la capacidad para llegar a hacerlo) y utilizan los textos alternativos para saber qué aparece en ellas. Por lo tanto, para los motores de búsqueda, no contar con este tipo de texto representa leer la imagen como un espacio vacío.

También hay que tener en cuenta que los motores de búsqueda reconocen el contenido de la página a través de las palabras clave que se facilitan y uno de los lugares donde pueden ir a buscar estas palabras es en el texto alternativo de las imágenes.

En definitiva, una vez destacada la importancia, la pregunta es: ¿Cómo optimizar imágenes correctamente? A continuación, detallamos todos los aspectos que deberías tener en cuenta.

Revisar el formato

Idealmente, el formato más recomendado es JPG (o JPEG) para imágenes grandes y con mucho color y PNG para iconos o imágenes con fondo transparente. Sin embargo, según las características y necesidades de cada imagen, puede que se tenga que utilizar otro. En este caso, es importante destacar que algunos formatos como JPEG 2000, JPEG XR o WebP no son soportados por todos los navegadores, aunque este último cada vez es más usado y actualmente es el más recomendado por Google.

Optimizar las medidas

El tamaño de la imagen, de ancho y de largo, debería ser la misma que se acaba mostrando en la web. En caso contrario, se produce una redimensión de la imagen a la medida indicada y esto conlleva un trabajo extra cuando se sirve la web al usuario.

Para saber cuál es la medida real de la imagen y en qué medida se muestra, podemos abrir la página donde se encuentra la imagen que nos interesa inspeccionar. Con el ratón encima de la foto, tenemos que hacer clic en el botón derecho y se desplegará un menú, volvemos a hacer clic en “inspecciona”.

Tal como se ve en la imagen, se abrirá una pestaña con el código de la web en HTML y, pasando el ratón por encima la imagen, veremos la medida real y como se muestra. Si los valores no coinciden, entonces será recomendable optimizar la imagen.

Ejemplo:

Imagen con medidas no optimizadas:

Imagen con medidas optimizadas:

Optimizar el peso

Evidentemente, cuanto menos pese una imagen, mejor, ya que reducirá el tiempo de carga de la web. Generalmente, se recomienda que una imagen esté por debajo de los 100KB. Para conseguirlo, se puede reducir la medida, bajar la calidad, reducir la escala de colores o utilizar otros formatos de imagen. Sea como sea, sobre todo, hay que tener cuidado de no empeorar su calidad en vista del ojo humano y, por tanto, no pixelar la imagen.

Se debe tener en cuenta la cantidad de Puntos Por Pulgada (PPPs) de la imagen, ya que la calidad óptima para imprenta (300 ppp) no es la misma que la calidad óptima para pantalla, que siempre se debe reducir a 72 PPPs. Este es un parámetro optimizable desde cualquier editor de imágenes de los comentados en el último punto del post.

Título y texto alternativo

Después de realizar todos los pasos anteriores, ya tendremos la imagen lista para subir al gestor. Sin embargo, antes de hacerlo, es recomendable cambiar de nombre del archivo evitando los caracteres especiales, los símbolos de puntuación y sustituyendo siempre los espacios por guiones medios. Además, es preferible escribir siempre en minúsculas.

Una vez subida la imagen al gestor, se debería definir un título y un texto alternativo. Es aconsejable que estos dos elementos incluyan también la keyword principal o alguna derivada. Además, se recomienda que el texto alternativo sea capaz de ilustrar lo que muestra la imagen.

Tal como os explicamos en nuesto anterior post sobre la importancia del texto alternativo, este elemento está conformado por un tipo de texto que acompaña las imágenes y que permite facilitar información sobre ellas. Por tanto, su principal función es ilustrar el contenido de la imagen, especialmente en aquellos casos en que esta no es visible.

Herramientas para optimizar imágenes online

Hoy en día, existen muchas herramientas para optimizar imágenes. Que se encuentren online recomendamos especialmente: compressor.io, fotor.com, tinyjpg.com o squoosh.app. Como herramientas de escritorio, habitualmente se utiliza Photoshop. Por otra parte, en caso de querer optimizar imágenes para WordPress, también existen varios plugins, como por ejemplo Smush.

¿Necesitas ayuda con la optimización de imágenes?

… Y hasta aquí esta pequeña guía sobre cómo optimizar imágenes. Recuerda que, si necesitas más información o tienes dudas sobre cómo optimizar para web, puedes contactar con nosotros sin compromiso. Estaremos encantados de poder ayudarte!