Optimiza las imágenes de tu web antes y después de subirlas para mejorar la velocidad de carga

Cómo optimizar una imagen en tu web para mejorar la velocidad de carga

Ernesto BarrachinaDiseño web, WordPressDeja tu comentario

Contenido actualizado el: 1 julio 2018

Optimiza las imágenes de tu web antes y después de subirlas para mejorar la velocidad de carga
5 (100%) 5 votos

En el post de esta semana veremos lo importante que es optimizar una imagen antes y después de subirla a un sitio web, y aprenderemos cómo hacerlo.

!Añadir correctamente las imágenes a un artículo tiene truco!. No podemos limitarnos a sacarlas de la cámara e insertarlas 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 imprimirlas. Sino a que estén optimizadas a las exigencias de los motores de búsqueda y navegadores que van a gestionarlas.

Tras unas cuantas horas preparando uno de tus artículos, el siguiente paso será decidir qué imágenes utilizar. Supongo que después de tanta dedicación no te importará pasar un rato optimizando las 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. Por 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 (cambiar el tamaño). Retrasando un poco más ese tiempo de espera.

Puede que durante esos pocos segundos el visitante se canse de esperar, abandone la sesión y pierdas una posible conversión (una venta, una visita…).

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 con la finalidad de indexarlas.

Cuanto más grandes, pesadas y menos optimizadas estén las imágenes, más tardará Google en tener una copia completa de tu sitio web y por tanto en poder mostrarte en los resultados de búsqueda.

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 la foto aún está en nuestro ordenador: fase en la que la cambiaremos de tamaño, reduciremos su peso y titularemos el archivo.
  2. Al subirla a la página o entrada: que es cuando ayudaremos a Google a interpretar el contenido de las fotos mediante sus atributos. Si se lo ponemos fácil nos premiará.

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

Cuando realizo el mantenimiento web de las 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 me encuentro cosas así:

😳 2015_08_01_174110.jpg

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

¡Tampoco cuesta tanto cuesta retitular el archivo de imagen!

Comienza poniendo un nombre adecuado al archivo

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. Es decir, del tema que estás tratando.

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.

Lo primero para optimizar las imágenes es cambiar el nombre del archivo

No utilices espacios en blanco, tildes, letras ñ, puntos, ni caracteres raros. Usa solo letras minúsculas y números. Separa las palabras con guiones medios.

  • Optimización_imágenes.jpg ⇒ Mal.
  • optimizacion-imagenes.jpg ⇒ Bien.

No le pongas a la imagen el mismo nombre que a la url del post, porque Google lo interpretará como contenido duplicado.

No titules con el mismo nombre a dos fotos diferentes.

En caso de que la tengas clara, te vendrá muy bien incluir la palabra clave en el nombre del archivo.

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

Como optimizar una imagen para que ayude al posicionamiento

Tamaño y resolución de las imágenes optimizadas

Las cámaras modernas proporcionan imágenes de gran tamaño. Eso está bien si quieres imprimir un cartel de gran formato o consumir el espacio de memoria y 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.

En la mayoría de ocasiones tu web se visitará desde un dispositivo de no más de 1920px x 1080px (2.1Mpx). Así que si piensas subir imágenes a tu blog, por lógica deben tener el tamaño máximo al que van a verse desde un dispositivo estándar.

Como tu web será responsive (adaptada a todos los dispositivos), seguramente el momento en que mostrará las imágenes más grandes será cuando accedan desde un tablet en vertical (tablet-portrait).

En las páginas web que elaboro, uso el tamaño máximo de 800 ó 900px de ancho. A no ser que la imagen está destinada a un slider, que entonces puede que llegue a darle 1600px de anchura.

Como parte del proceso de optimización de las imágenes, hay que reducirlas todo lo posible

Cuando uses WordPress sigue las especificaciones del tema, ya que en sus instrucciones te dará las medidas para que las imágenes estén optimizadas.

Si una foto vertical tiene 900px de anchura pero 1500px de altura, redúcela hasta los 750px de alto. Si no, será más alta que casi cualquier pantalla y la imagen seguirá sin estar 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 no hace falta utilizar imágenes de más de 72ppp.

Herramientas para optimizar las imágenes

Puedes cambiar el tamaño y resolución de las fotos con Photoshop. Si no dispones del programa sigue las instrucciones de este artículo sobre cómo cambiar el tamaño de las imágenes de forma online, con vídeo incluido, en el que explico cómo dejarlas con el tamaño y calidad adecuados.

Para finalizar el optimizado, y antes de subirlas al sitio web, debes tratarlas con esta herramienta de compresión. Sí, otra 😉 , pero ya verás como bajan de peso sin perder calidad.

Tú no tienes más que subir la imagen a esa web y luego descargarla. El optimizado se hace solo.

Finaliza la optimización de tu imagen con Tiny PNG

Con esto habremos terminado de optimizar la 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, resolución y compresió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.

Supongo que a la foto le habrás puesto un nombre relacionado con el artículo. Procura que la palabra clave aparezca tanto en el nombre, como en los atributos “TITLE” y “ALT” que ahora veremos.

Todo esto sigue formando parte de la optimización de una imagen.

Completar la 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 HTML 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 la foto no se mostrará. Le dice al navegador en qué ruta está esa imagen entre todos los archivos de la web.

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.

Si se ha indicado, este texto es el que se muestra en forma de tooltip cuando ponemos el cursor sobre una imagen. Si no aparece es que la imagen no se ha optimizado del todo 😉

Desde hace poco Google muestra los títulos de las imágenes en los resultados de las búsquedas realizadas desde móviles. Así que no olvides poner el atributo.

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.

Es el texto que mostrará el navegador si por algún motivo no puede cargar la imagen.

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

Para el atributo “ALT” intenta que el texto sea más extenso y diferente al del “TITLE”.

Atributo WIDTH

Le indica a los navegadores el ancho con el que deben 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 página 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. Ya sabes, cuanto más información le proporciones a Google mejor.

Al rellenar los atributos puedes (y debes) escribir de forma natural. Utiliza tildes, letras ñ, espacios en blanco y lo que te haga falta.

Ya puedes adjuntar la imagen al post que estás redactando.

Desde hace algunas versiones de WordPress, cuando insertas una imagen a un artículo deja el campo del atributo title vacío. Supongo que será por si la quieres usar en diferentes posts.

Como no nos queda más remedio que volver a introducir el texto del atributo TITLE desde el editor de WordPress, clica sobre la imagen para editarla y rellena de nuevo el campo del atributo.

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

Actualiza para finalizar ¡POR FIN! la optimización 😀

Hemos visto lo importante que es optimizar las imágenes cuando van a formar parte de tu blog o tienda online, que el proceso forma parte del optimizado completo del sitio web y que el trabajo comienza cuando las fotos aún están en tu ordenador.

¡Tampoco es algo que nos va a llevar demasiado tiempo! 😉. Te va a costar más leer esto que ponerlo en práctica. Luego se convierte en un trabajo mecánico, no te preocupes.

Si te interesa aprender a manipular las imágenes un poquito más, te recomiendo este cursillo de Photoshop gratuito con el que iniciarte en el programa.

Imagen banner diseño web valencia

¿Hacemos juntos tu

Página web?

Te ofrezco un diseño web y un desarrollo de la página a la medida de tus necesidades.

Solicitar un Presupuesto!

Si te ha gustado comparte

Más sobre el 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.

¿Lo hacemos?

« Siguiente
Anterior »

Deja un comentario

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) +Info

Finalidad de los datos: Gestionar los comentarios que realizas en este blog. +Info

Legitimación: Consentimiento del interesado. +Info

Destinatarios: No se comunican los datos a nadie más. +Info

Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado.

Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (proveedor de hosting de EBWEB) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting.

Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control.

Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.