Mejora la velocidad de carga de tu web optimizando las imágenes antes de subirlas

Optimizar una imagen en tu web es algo fundamental para su velocidad de carga

En el artículo de esta semana veremos lo importante que es optimizar una imagen antes de subirla al sitio web y aprenderemos cómo hacerlo. Añadir correctamente una imagen a un post no consiste solo en sacarla de la cámara e insertarla en el contenido.

Al hablar de optimizar imágenes no me refiero a ajustarlas de niveles, quitar los ojos rojos, ni a que tengan calidad suficiente como para ser imprimidas. Sino a que deben estar optimizadas a las exigencias de los motores de búsqueda que van a gestionarlas.

Tras unas cuantas horas preparando alguno de tus artículos, probablemente el siguiente paso será pensar en qué imágenes vas a utilizar. Y supongo que después de tanto trabajo no te importará pasar un rato optimizando imágenes para sacar el máximo rendimiento a tu esfuerzo.

Por qué perder el tiempo en optimizar imágenes

Tener tus imágenes optimizadas es fundamental para el posicionamiento porque afecta a la velocidad de carga de la página. Con lo que cada vez que añadas una imagen optimizada estarás aumentando las posibilidades de mejorar tu posicionamiento. ¿Qué mejor motivo que este?

Piensa que si además de pesadas, las medidas de las imágenes son excesivas, será el navegador el que haga el trabajo de escalado. Retrasando un poco más ese tiempo de espera.

Puede que durante esos pocos segundos el visitante abandone la sesión, haciéndote perder una posible conversión.

Quizás entendamos lo crucial del asunto si conocemos el hecho de que los robots de Google tienen un tiempo limitado para recorrer tus páginas e indexarlas. Por tanto, cuanto más grandes, pesadas y menos optimizadas, más tardará Google en tener una copia completa de tu sitio web.

Cómo optimizar imágenes

El proceso de optimizar una imagen se realiza antes y después de subirla a la página web. Así que podemos decir que tiene dos fases principales.

  1. Cuando aún está en nuestro ordenador, fase en la que la cambiaremos de tamaño y la titularemos.
  2. Al subirla a la página o entrada, que es cuando ayudaremos a Google a interpretar el contenido de las fotos. Si se lo ponemos fácil nos premiará.

Optimizar una imagen cuando aún está en el ordenador

Cuando realizo el mantenimiento en la página de amigos y clientes,  solo por curiosidad, suelo buscar los nombres que asignan a los archivos de imagen.

En la mayoría de los casos los me encuentro cosas así:

20150801_174110.jpg

Es una lástima que después de dedicar tanto tiempo a la redacción de un artículo, el proceso no se finalice de forma correcta porque no se optimizan las imágenes.

El proceso de optimización comienza nombrando adecuadamente a la imagen

Para comenzar a optimizar una imagen, lo primero es cambiar el nombre del archivo de la foto por uno descriptivo del contenido o el contexto.

Debes cambiar el nombre que viene por defecto. No uses el que tiene cuando sale de la cámara o al descargarla de un banco de recursos gráficos. Cámbialo por otro más adecuado al contenido.

No utilices espacios en blanco, tildes, letras ñ, puntos, ni caracteres raros. Solo letras y números. Para separar las palabras usa guiones medios.

No le pongas al archivo de imagen el mismo nombre que pondrás a la url del post, porque google podría interpretarlo como contenido duplicado. Y por supuesto no le pongas el mismo nombre a dos fotos diferentes.

En el caso de que tengas clara la palabra clave a trabajar en el artículo, también te vendrá bien incluirla en el nombre.

Por ejemplo para esta foto y en este contexto: importancia-optimizar-imagen.jpg

Como optimizar una imagen para que ayude al posicionamiento

Tamaño de las imágenes optimizadas

Con lo que has leído hasta ahora podrás deducir que el tamaño de una imagen importa, y mucho.

Las cámaras modernas con un montón de mega pixeles, proporcionan imágenes de gran tamaño. Eso está muy bien si vas a imprimir un cartel de gran formato, si quieres consumir el espacio de memoria o la transferencia de datos de tu hosting. Pero ya te digo que no es lo más óptimo para las imágenes de un website.

A pesar de que las pantallas modernas cada vez tienen más resolución, en la mayoría de los casos tu web se abrirá desde un dispositivo de no más de 1920px x 1080px (2.1 Mpx). Así que si piensas subir imágenes a tu página con la intención de apoyar a los artículos, por lógica deberán tener el tamaño máximo al que se van a ver desde un dispositivo estándar.

Como tu web será responsive (adaptada a todos los dispositivos), el momento en que va a necesitar mostrar la imagen más grande seguramente sea cuando accedas desde un tablet en vertical (tablet-portrait).

En las páginas web que elaboro, suelo utilizar el tamaño máximo de 900px de ancho. A no ser la imagen destinada a un slider que en esas ocasiones puede que llegue a los 1600px de anchura.

En el caso de usar WordPress siempre puedes seguir las especificaciones del creador del tema ya que en sus instrucciones te dará las medidas para que las imágenes estén optimizadas.

Por supuesto, una imagen vertical que tenga 900px de anchura y 1500px de altura, debes reducirla para que a lo sumo quede de 750px de alto. Si no será más alta que casi cualquier pantalla y seguirá sin estar optimizada.

Resolución de un imagen optimizada

Otra cosa que nos dan las cámaras modernas son imágenes de más de 72ppp. Los puntos por pulgada son como su propio nombre indica, la cantidad de pixeles que tenemos en cada pulgada cuadrada de nuestra imagen.

Algunos dispositivos superan los 300ppp, pero esto también es algo que solo nos vendrá bien a la hora de imprimir, y será contraproducente en cuanto a la optimización de imágenes para web. En un website siempre usaremos imágenes de 72ppp.

La mejor forma de optimizar una imagen en cuanto a tamaño y resolución es utilizando Photoshop, pero si no dispones del programa puedes seguir las instrucciones de este artículo, con vídeo incluido, sobre cómo comprimir las imágenes de forma online para dejarlas con el tamaño adecuado.

Con esto hemos terminado de optimizar una imagen desde el ordenador. Vamos con la siguiente fase.

Recibe nuevos artículos mensualmente

y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo electrónico.

Optimizar una imagen una vez subida a la web

Siguiendo los pasos anteriores ya tendremos la imagen con el nombre, tamaño y resolución adecuados, pero aún debemos integrarla en el texto para lo más importante, que Google entienda el contenido de la misma.

Rodea las imágenes con contenido relacionado

Repito que es un factor fundamental para mejorar el posicionamiento de tu web. Rodea las imágenes con un contenido que les aporte valor y esté relacionado con ellas.

Está claro que ya le habrás puesto un nombre relacionado con el artículo. Procura que la palabra clave aparezca tanto en el nombre de la imagen, como en su atributos “title” y “alt” que ahora te explicaré.

Todo esto seguirá formando parte de la optimización de esa imagen.

Completa el proceso de optimización con los atributos de imagen

El código HTML para insertar una imagen en cualquier tipo de página web es el siguiente, y es lo que le dice a Google que esto es una foto:

<img title="titulo de la foto" src="http://tudominio/imagenes/foto.jpg" alt="texto alternativo" width="900" height="450" />

Si te fijas verás una etiqueta de imagen y dentro de ella los atributos title, src, alt, width, height.

Atributo SRC

Es el único atributo obligatorio porque si no lo indicamos no se mostrará nada. Indica al navegador la ruta de la imagen a mostrar.

Atributo TITLE

No tiene aparentemente demasiada utilidad en cuanto al SEO, pero nunca está de más ponerlo y aprovechar para introducir una vez más la palabra clave o una semánticamente similar. Este texto se mostrará, en forma de tooltip, cuando pongamos el cursor sobre la imagen al visitar la web.

Atributo ALT

El atributo “alt” o texto alternativo es lo que leen los buscadores para saber qué contiene la imagen. Debe describir su contenido o contexto y debe contener la palabra clave. Este es el texto que mostrará el navegador si por algún motivo no puede cargarla.

Si no lo usamos la foto se mostrará igualmente pero estaremos dejando de pasar información crucial a Google.

Intenta que el texto no sea el mismo que has utilizado en el atributo “title”.

Atributo WIDTH

Le indica al navegador el ancho con el que debe mostrar la imagen, y ya sabemos que todo lo que sea facilitarles la vida a ellos es bueno para nosotros.

Atributo HEIGHT

Señala al navegador el alto con el que mostrarla.

En este momento has terminado de optimizar una imagen. Si trabajas desde una web HTML todo esto deberás hacerlo a través de código, pero como seguramente tengas una web WordPress vamos a aprender cómo rellenar los atributos desde él.

Rellenar los atributos de imagen en WordPress

Atributos de imagen al optimizar una imagen en WordPress
Una vez has subido la imagen a tu WordPress clicando sobre ella accedes al editor. Desde él podrás añadir el título y el texto alternativo. Si quieres también una descripción y la leyenda, que se mostrará como pie de foto.

En todos estos casos puedes y debes escribir de forma natural usando tildes, letras ñ o espacios en blanco.

Desde hace algunas versiones de WordPress, cuando insertas una imagen a un artículo, deja el campo del atributo title vacío. Supongo que es por si la utilizas en diferentes artículos, pero el caso es que aunque hayas puesto el atributo al subirla, ahora no lo tiene.

La solución para esto es que una vez añadida cliques sobre ella para editarla y rellenes de nuevo el campo del atributo.

Desde hace algunas versiones hay que volver a introducir el title de la imagen

Ya has visto lo importante que es optimizar una imagen si va a formar parte del contenido de un blog o una tienda online. Que el proceso forma parte del optimizado completo del sitio web y que el trabajo comienza cuando las imágenes aún están en tu dispositivo.

Ante cualquier duda sobre la gestión de imágenes, en este mismo blog encontrarás algunos artículos interesantes, pero si con eso no es suficiente puedes recurrir al formulario de comentarios un poco más abajo.

Si te ha gustado comparte

Información del autor

Ernesto Barrachina

¿Quieres ver mi biografía?

Aunque soy escultor y modelista de profesión, a los 40 decidí adaptar mis herramientas de trabajo. Un teclado y un ratón han sustituido a la arcilla, la silicona o al poliéster. Ahora me dedico al diseño web Valencia y el desarrollo de tu página web o de la imagen de tu marca pueden ser nuestro próximo proyecto.

Siguiente
Anterior

Deja un comentario

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

*