Preparar y optimizar imágenes en WordPress

Cómo preparar y optimizar imágenes en WordPress para mejorar el posicionamiento de tu página web paso a paso.
Preparar y optimizar imágenes en WordPress

Una buena selección de imágenes en tu sitio web es imprescindible para que el acabado de tu página web sea profesional y atractivo. Pero si queremos ganar posiciones en el buscador, además de las imágenes, debemos cuidar otros aspectos de las mismas, como su nombre o su peso.

Si un usuario encuentra un diseño atractivo y contenido de calidad, probablemente invierta más tiempo en tu sitio web y vuelva. En cambio, si encuentra imágenes cutres, pixeladas o que tardan millones en cargar, probablemente se vaya por donde ha venido, y lo que es peor, que piense que esta calidad se extiende a otros aspectos del negocio.

Antes de subir las imágenes a tu sitio web tienes que tener en cuenta lo siguiente.

Preparación de la imagen

Lo primero que hay que hacer es editar la imagen para ajustar sus dimensiones y resolución.

Las dimensiones son, las máximas a las que ajuste esa imagen en tu sitio web de manera responsive expresadas en píxeles.

La resolución óptima para la visualización de imágenes en la web es de 72ppp o 96ppp (píxeles por pulgada), aunque con los dispositivos retina esto ha cambiado y requieren el doble de pixeles. Si prevees que tu sitio web va a ser visualizado por un alto número de dispositivos retina, exporta tus imágenes a 150ppp.

Optimización del tamaño la imagen

En Photoshop las suelo exportar a una calidad media-alta (8 de 12), para a continuación pasarlas por TinyPNG o TinyJPG, un compresor de imágenes online. Prefiero la compresión y calidad que ofrece esta herramienta que la compresión que realiza Photoshop a tamaños más pequeños.

Es importante que tengáis activada la compresión GZIP en vuestro alojamiento, pero de esto hablaremos otro día.

Posicionamiento de las imágenes

Ahora toca rellenar los metadatos. Son los que interpretan las arañas de los buscadores, como no tienen ojitos, nos tendremos que encargar de describir la imagen con palabras de la manera más fidedigna.

En la sección de Medios del escritorio de WordPress podremos encontrar todos los archivos de medios que componen nuestro sitio web: imágenes, vídeos, audios, documentos… esto es nuestra librería multimedia.

Si pulsamos sobre cualquiera de ellos, se abrirá la página de Detalles del adjunto. En ella podremos encontrar:

Datos que se rellenan automáticamente

Nombre del archivo

Como se rellena automáticamente, este paso de posicionamiento SEO deberemos realizarlo en nuestro ordenador.

Cuando elijas el nombre de tus imágenes, es importante que utilices nombres descriptivos. Algunos consejos:

  • Debe contener la palabra clave.
  • Limítate a minúsculas a-z, 0-9, o guiones bajo(_) o medio (-).
  • No utilices mayúsculas, espacios, tildes o caracteres especiales como la ñ o puntos, barras, o podría haber problemas con su visualización.

Si vas a publicar una imagen del proceso de elaboración de cerveza artesana y tu archivo se llama DSC_0013.jpg, mal vamos. Lo ideal sería que se llamase como-hacer-cerveza-artesana.jpg.

Tipo de archivo

Aquí se indica el tipo del archivo en MIME.

Prueba a exportar tus imágenes en otros formatos. Para los logotipos o iconos, que suelen ser colores planos o incluir transparencias, el mejor formato es .png y para las imágenes .jpg.

Subido el

Fecha de inserción de la imagen en la biblioteca.

Tamaño de archivo

Expresado en kilobytes. Dependerá de la cantidad de información que contenga el archivo y de sus dimensiones. Asegúrate de que no sea una burrada para que el peso de la imagen no perjudique la velocidad de carga del sitio web.

Dimensiones

Dimensiones de la imagen expresadas en píxeles. Para que te hagas una idea, un móvil sencilo tiene una resolución de 640 x 480px, una tablet unos 1280 x 720px y una pantalla Full HD 1920 x 1080px.

Si quieres que tu imagen se adapte al ancho de todos los dispositivos deberás subirla al menos, en la dimensión máxima. Aquí lo ideal sería tener imágenes específicas para cada resolución y así ahorrar tiempo y peso en la carga del sitio web.

Subido por

Aquí aparecerá el nombre del usuario que ha publicado la imagen, se rellena automáticamente.

Subido a

La entrada o página en la que está enlazado.

URL del archivo

En WordPress los archivos de la librería multimedia se guardan por defecto en la carpeta ../wp-content/uploads.

Si queremos insertar la imagen como URL, por ejemplo en los archivos CSS, tomaremos este valor (hay un práctico botoncito para copiar la URL).

Metadatos que nos ayudarán con el posicionamiento

Aquí viene lo importante, si dedicamos un rato a incluir los metadatos de nuestras imágenes, ayudarán al posicionamiento orgánico de nuestra página web.

Texto alternativo (Alt text)

Este texto es el que aparece si la imagen no se puede mostrar, y el que leen los navegadores accesibles. Es decir, lo que escuchan las personas ciegas al entrar a tu página web.

Es muy importante. Más vale rellenarlo con algo que dejarlo sin nada. Tampoco abuses de la palabra clave principal, no intentes incluirla en todas las imágenes porque los buscadores te penalizarán.

Título

Es el que suelen mostrar los buscadores debajo de la imagen y es la información que toman para indexarlas.

WordPress lo rellena automáticamente con el nombre del archivo pero puedes editarlo. Es recomendable que el texto ALT y el título varíen ligeramente, por ejemplo utilizando sinónimos, y así aprovechar mejor las palabras clave.

¿Recuerdas nuestro archivo como-hacer-cerveza-artesana.jpg? Podrías titularlo Cómo hacemos nuestra cerveza artesana, y usar de título alternativo Proceso de elaboración de la cerveza artesana.

Leyenda

Es el texto que se muestra debajo de las imágenes. Ofrece una pequeña descripción del contenido o el copyright de la imagen. A los usuarios les ofrece información sobre la imagen. y te ayuda a insertar más palabras clave.

Se usan poco, la verdad. Por lo que si te esmeras en rellenarlas posicionarás rápidamente.

Aquí aprovecho para recordarte que debes poseer los derechos de las imágenes que quieras incluir en tu sitio web. No utilices cualquier fotografía que encuentres por internet porque te podría traer problemas. Si necesitas asesoramiento o acceso a bancos de imágenes para ilustrar tu sitio web contacta conmigo, puedo ayudarte.

Descripción

Aquí puedes añadir una descripción de la imagen, esta no se verá cuando la publiques. Es una descripción que ayudará a Google a saber de que trata tu imagen. No afecta directamente al SEO.

BONUS Plugins

Sustituir medios o reemplazar archivos en WordPress

El botón de Sustituir medios no lo encontrarás por defecto. Es un plugin súper práctico que te permite reemplazar las imágenes sin cambiar sus metadatos (como la fecha o el título).

¿Se te ha olvidado comprimir la imagen? ¿Quieres actualizarla sin tener que volver a enlazarla en todas las páginas donde se encuentre? Usa este plugin gratuito de WordPress, se llama Enable Media Replace.

Enable Media Replace

Comprime tus imágenes con Smush

Si tiendes a subir las imágenes directamente desde tu dispositivo móvil o sin procesarlas antes te recomiendo que instales algún plugin que se encarga de optimizarlas automáticamente como Smush.

Smush – Compress, Image Optimizer, Lazy Load, WebP Images

En resumen

Lo más importante es que subas los archivos con un nombre adecuado, que contenga las palabras clave, y al menos rellenes el título y el texto alternativo.

Si conoces otros trucos o herramientas para optimizar las imágenes en la web, no dudes en compartirlos a través de los comentarios 💭

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Pin It on Pinterest

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad
Abrir chat
1
¡Hola! Soy Cristina, ¿en qué puedo ayudarte?