¿Sabes cuál es uno de los errores más comunes que cometemos y que influye en la velocidad de carga de una web? No optimizar las imágenes.
Seguro que en más de una ocasión has querido acceder a una página y te has desesperado viendo que no termina de cargar, has desistido, la cierras y buscas otra.
Pues ni a ti te gusta esperar ni a Google que los usuarios esperen.
Así es que si tienes una web y entre tus objetivos están, aumentar el número de visitas, obtener un buen posicionamiento web, y mejorar la experiencia de usuario, debes hacer lo posible por evitar que esta sea lenta y pesada.
A continuación, vas a ver como puedes optimizar las imágenes antes de subirlas a tú página, empezando por elegir el formato de imagen correcto y viendo que herramientas puedes usar para cambiar su tamaño y comprimir su peso.
Y no solo eso, sino que también te mostraré cómo optimizar los atributos en tu gestor de contenidos para mejorar su indexación.
En este post podrás leer:
- Qué significa optimizar imágenes
- Cómo optimizar imágenes para la web y mejorar el rendimiento
- Tipos de formato de archivo de imagen más comunes
- Herramientas que puedes usar para modificar el tamaño de las imágenes
- Herramientas Online para comprimir imágenes
- Plugins WordPress que puedes usar para comprimir imágenes
- Cómo facilitar la indexación de las imágenes en Google
- Donde descargar imágenes para la web
- Conclusión
Qué significa optimizar imágenes
En demasiadas ocasiones se utilizan los términos comprimir o redimensionar como sustitutos o sinónimos de optimizar, cosa no del todo correcta, ya que la compresión y la adaptación del tamaño de una imagen, son parte del proceso de optimización.
Veamos que significa cada uno de estos conceptos:
Significado de optimizar imágenes
Consiste en poner en práctica varias acciones para conseguir que las imágenes de nuestra web sean indexables y tengan tanto el tamaño como el peso idóneo sin pérdida visible de calidad.
Significado de comprimir o redimensionar imágenes
Es la acción de aligerar el peso y adaptar el tamaño de una imagen, para que entre otros factores, además de mejorar la velocidad de carga:
- Reduzcamos el espacio ocupado en nuestro servidor
- Optimicemos el consumo de recursos de nuestro alojamiento web, ya que aun teniendo contratado el mejor hosting, sino optimizamos recursos obtendremos un bajo rendimiento.
Por todos estos motivos, no debes caer en el error de creer que comprimiendo y cambiando el tamaño de tus imágenes ya las tienes optimizadas, habrás dado un gran paso, pero no todos, todavía debes mejorar su indexación.
Porqué es importante optimizar imágenes
El principal dispositivo con el que nos conectamos a Internet, es el móvil, con esto quiero decirte, que además de que tu web debe ser responsive, también tiene que ser ligera para evitar que un usuario la abandone mientras espera a que cargue.
Otro motivo importante para tener una web con una velocidad de carga dentro de los estándares, es porque los robots de los buscadores disponen de un tiempo limitado para rastrear e indexar el contenido.
Motivo por el cual, a mayor tiempo de espera menos páginas rastreadas y menor contenido indexado.
Sin duda, las imágenes son necesarias en una página web, pues estamos ante un elemento que además de enriquecer visualmente el contenido, ofrecen una mejor experiencia de usuario, logrando captar su atención y haciendo que su visita sea más amena.
Además, también son capaces de facilitar la comprensión e incluso transmitir emociones.
Resumiendo, optimizar las imágenes en WordPress o en cualquier otro CMS, es importante si queremos empezar a mejorar su Web Performance Optimization (WPO).
Cómo optimizar imágenes para la web y mejorar el rendimiento
Siguiendo estos sencillos pero efectivos pasos que te indico a continuación, tendrás como resultado final una imagen perfectamente optimizada para mostrarla en tu web.
Antes de subir las imágenes debes:
1. Elegir el formato correcto
Sin duda, el primer paso es seleccionar el formato de imagen correcto.
Y para ello es necesario conocer los tipos de formato más comunes y cuál es su uso ideal.
2. Adaptar el tamaño de cada imagen
No tiene ningún sentido subir a nuestro gestor de contenidos, imágenes con un ancho superior al que van a ser mostradas.
Por lo que un paso que no debes obviar es el de modificar su ancho, adaptándolo al que tienen predefinido en tu web.
3. Comprimir y reducir su peso
Para comprimir imágenes existen varias opciones, utilizar un tipo de herramientas u otras dependerá de tus necesidades y de si quieres hacer el proceso de compresión, de forma Online (sin descargar ningún programa), o habilitando un plugin en WordPress.
Y después de tener la imagen subida a tu gestor de contenidos:
4. Optimizar los atributos para facilitar su indexación
Partiendo de la base de que los buscadores no leen las imágenes ni tampoco el texto que pongas en su interior, para conseguir que estas sean indexadas de forma correcta, haremos uso y optimizaremos los atributos correspondientes.
Empecemos por conocer los diferentes formatos de imágenes, y a continuación veremos una serie de herramientas para modificar su tamaño y reducir el peso.
Tipos de formato de archivo de imagen más comunes
Estos son los tipos de archivo más comunes que vas a utilizar.
Formato de archivo .PNG
Es un formato de imagen que no tiene pérdida, permite transparencias y degradados.
Su uso ideal es para:
- Logotipos
- Imágenes con fondo blanco
- Imágenes con texto
- Gráficos
Formato de archivo .GIF
El GIF, es un formato de imagen que soporta animaciones y transparencias, pero con una limitación de colores.
Se usa principalmente para la creación de imágenes animadas.
Formato de archivo .JPG
Este tipo de formato nos permite guardar imágenes grandes en un espacio reducido, aunque es un tipo de compresión con pérdida.
Su función es que las imágenes mantengan una buena calidad pero con menos peso, por ejemplo, para que se puedan cargar rápido en un servidor.
Su uso se recomienda para:
- Imágenes fijas
- Fotografías
- Imágenes con muchos colores
Herramientas que puedes usar para modificar el tamaño de las imágenes
Para modificar el tamaño de las imágenes dispones de múltiples herramientas, entre mis favoritas se encuentran:
Canva
Sin duda, estamos ante una gran herramienta para la edición de imágenes de forma Online.
Una de las múltiples funciones que vas a encontrar en Canva, es la de reducir el tamaño de las imágenes de forma muy sencilla.
Además, también podrás aplicar filtros, ajustar el brillo, el contraste y la saturación, recortar la imagen o rotarla.
Resize Photos
Con la herramienta Resize Photos, además de poder cambiar el tamaño de las imágenes, tienes la posibilidad de comprimirlas y aplicar algunos efectos.
No es necesario que descargues ningún tipo de programa en tu ordenador, puesto que lo harás de forma Online.
Es tan sencillo como, indicar el nuevo ancho que quieres en la imagen y la herramienta de forma proporcional la redimensionará, dejándola lista para que la descargues.
Herramientas Online para comprimir imágenes
En este apartado podría nombrar herramientas tan conocidas como Compressor.io o TinyJPG y TinyPNG, que seguramente son las más utilizadas para reducir el peso de nuestras imágenes.
Pero cómo sobre estas herramientas se ha hablado mucho y puedes encontrar cantidad de información, prefiero mostrarte otras, que no por ser menos conocidas son peores.
Kraken.io
Está considerada una de las mejores herramientas Online para el proceso de compresión de imágenes.
Con Kraken.io, obtendrás una compresión de imágenes sin perdida visible de calidad.
Cuenta con 3 modos distintos de compresión y con cada uno de ellos podrás aplicar diferente grado de optimización en tus imágenes.
Puedes usar sin problema esta herramienta en su opción gratuita, pero encontrarás ciertas funciones más avanzadas que están bloqueadas y para hacer uso de ellas deberás contar con un plan PRO.
Image Optimizer
Se trata de otra conocida herramienta Online para la compresión y reducción del tamaño de las imágenes.
Con Image Optimizer, puedes usar la optimización en línea o descargar el programa de forma gratuita, instalarlo en tu ordenador y utilizarlo de forma personal.
Su interfaz es altamente intuitiva y su uso muy simple:
- Sube el archivo
- Elige el tamaño al que quieras redimensionar la imagen
- Escoge entre uno de los 6 diferentes tipos de compresión que te ofrece
- Descarga la imagen
Plugins WordPress que puedes usar para comprimir imágenes
Desde luego que una de las mejores opciones para reducir si cabe todavía más, el peso de las imágenes que subimos a WordPress, es tener instalado un plugin para este fin.
Así cada vez que subas una imagen a la web, automáticamente la comprimirá si el proceso realizado con las herramientas Online no ha reducido del todo su peso.
Imagify Image Optimizer
Imagify, es un plugin Freemium, creado por WP Media, misma compañía que ha creado WP Rocket, considerado el mejor plugin de caché para WordPress, con esto quiero decirte que estamos hablando de un plugin top.
En su versión gratuita te permite optimizar cada mes 25MB de imágenes, a partir de ahí hay que contratar uno de sus planes.
Es muy potente y fácil de usar, además dispone de tres niveles de compresión:
- Normal
- Agresivo
- Ultra
Sin duda con este plugin ayudaremos a que nuestro sitio web sea más rápido, con imágenes sin pérdida de calidad y más ligeras.
ShortPixel Image Optimizer
ShortPixel, es otro de los plugin Freemium, en su versión gratuita puedes aplicarlo máximo a 100 imágenes mensuales, si necesitas comprimir más imágenes debes contratar uno de sus planes.
En la versión de pago tenemos una opción en la que nos comprimirá las imágenes que tengamos ya subidas a la web con anterioridad a la instalación del plugin, todo ello de forma automática.
Y a medida que vayas subiendo nuevas imágenes las irá comprimiendo directamente.
Cómo facilitar la indexación de las imágenes en Google
Y ahora es momento de ver qué pasos debemos seguir para optimizar los atributos de una imagen y de este modo facilitar su indexación en Google.
1. Optimizar el nombre del archivo
Utiliza nombres descriptivos y es recomendable incluir la keyword que queremos posicionar, en lugar de nombres genéricos.
Por ejemplo, tengo esta imagen que quiero mostrar en un artículo en el que hablaré sobre las distintas razas de perros, sus características y personalidad.
El nombre del archivo que puedo asignar sería: “razas-perros.jpg” en lugar de “imagen-3.jpg”.
Tal cómo hacemos con las URL´s:
- Separaremos las palabras por guiones
- Evitaremos el uso de tildes, ni “ñ”
- Tampoco usaremos caracteres extraños
2. Optimizar la descripción
Se trata de un texto alternativo <alt>, que debe ser conciso y descriptivo de la imagen.
Trata de incluir también la palabra clave, y en este apartado sí que podemos usar separación entre las palabras, tildes y “ñ”.
El objetivo de este atributo, es facilitar una descripción en caso de que se produzca algún error y la imagen no logre cargarse.
Cómo texto alternativo a la imagen, podríamos poner:
” Existen multitud de razas de perros, de compañía, guías, de campo, etc. Conoce sus características, personalidad y encuentra la que mejor se adapta a ti”.
3. Optimizar el tittle
Es el título de la imagen que se muestra al usuario cuando pasa el ratón sobre ella.
Es un complemento del atributo <alt>, y al igual que en la descripción, es recomendable incluir la palabra clave y seguir las mismas pautas de escritura.
Siguiendo el mismo ejemplo anterior, el tittle para la imagen, podría ser: “Razas de perros”
Una forma sencilla de comprobar los atributos de una imagen, es inspeccionado el código fuente de la misma.
Si usas el navegador Chrome, y te posicionas sobre la imagen, con pulsar el botón derecho del ratón y desplazándote hasta “inspeccionar elemento” podrás ver que atributos tiene.
Y ahora que ya has visto punto por punto cómo optimizar imágenes para la web, es hora de que lo apliques, pues tan solo nos falta elegir la imagen a optimizar y para ello, te traigo una serie de páginas en donde podrás descargar fotografías con una excelente calidad y de forma gratuita.
Donde descargar imágenes para la web
Ya tengas un blog de empresa o personal, estoy seguro de que en estos bancos de imágenes vas a encontrar muy buen material.
Pues en la mayoría de ocasiones, no es tarea fácil dar con esa imagen perfecta que ilustre nuestro contenido y lo haga más apetecible para los usuarios.
Pikwizard
Pikwizard, es un banco de imágenes con características distintas al resto y en el que encontrarás más de 100.000 fotografías de gran calidad.
Las puedes descargar de forma gratuita y utilizar sin necesidad de atribuir autoría.
Además, 20.000 de ellas son exclusivas y no las podrás obtener en ningún otro banco de imágenes.
Continuamente están agregando nuevo material y su biblioteca no deja de crecer día a día.
Esto es posible, gracias a múltiples empresas colaboradoras y al aporte de grandes profesionales en el ámbito de la fotografía y que ceden sus creaciones para que sean difundidas.
La plataforma se ha fijado un objetivo realmente ambicioso, y es llegar a ofrecer ¡¡Más de 1 millón de imágenes gratuitas!!
Sin duda, cada vez están más cerca de conseguirlo.
Una de las ventajas que tiene esta plataforma es que no necesita registro para empezar a realizar descargas.
Así es que, te recomiendo incluyas este banco en tu lista de recursos.
Pues siempre es necesario, tener un lugar donde poder encontrar fotografías originales y distintas al resto de bancos gratuitos.
Pexels
Pexels, es un excelente banco de imágenes, y que está en continuo crecimiento gracias a la aportación de múltiples y profesionales fotógrafos.
Cada mes agrega una media de 3.000 nuevas imágenes y fotos de alta resolución.
Sus más de 20 millones de visitas mensuales son su tarjeta de presentación
Aparte de encontrar fotografías ordenadas por categorías, tienes la opción de aplicar un filtro para ver las imágenes o búsquedas más populares.
También encontrarás vídeos cortos y que además puedes descargar de forma gratuita,
El uso de las imágenes y fotografías no está restringido, ni tampoco debes atribuir derechos de autor.
Unsplash
Se compone de más de 200.000 fotos de alta resolución, por ello, es considerado uno de los más completos y mejores bancos de imágenes.
La web de Unsplash, recibe aproximadamente 14 millones de visitas mensuales, claro indicador del buen material que posee.
Las imágenes además de poseer una excelente calidad, las encontramos clasificadas por Colecciones, cosa que nos facilita cualquier búsqueda que realicemos.
Y algo muy importante es que les podemos dar cualquier uso sin necesidad de atribuir autoría.
Conclusión
Bueno, creo que ya no te falta nada, con todo lo que hemos visto en este artículo sin duda conseguirás optimizar tus imágenes para la web de forma profesional.
Ahora tan solo queda que te pongas manos a la obra y apliques todos los pasos en cada una de tus imágenes, eligiendo correctamente su formato, adaptando su tamaño y reduciendo su peso, bien con las herramientas Online que te he nombrado, así cómo con los plugins del repertorio de WordPress que hemos visto.
No olvides la importancia de optimizar los atributos para facilitar a los buscadores la labor de indexación de tus imágenes, sin duda, será un paso más en el objetivo por conseguir un buen posicionamiento SEO.
Si utilizas alguna otra herramienta para optimizar imágenes para la web o conoces algún plugin interesante y quieres recomendarlo, puedes dejar un comentario.
¡Manueeeeeeeel!
Joder, compi. Me viene al pelo este post, jaja!
Es una tarea que tengo pendiente desde hace (no te exagero) años. Y es el típico post-it que voy moviendo de hoja en hoja en la agenda y de agenda en agenda cada año 😂😂 ¡soy lo puñetero peor! 😂😂
Y cada vez me cuesta más, claro. Porque cuanto más tiempo pasa, más tarea se me acumula. Y, de verdad, que soy consciente de lo que puede mejorar mi blog si lo hago, pero me da una perezaaaa.
Me lo guardo para tenerlo a mano y como propósito para 2019, ¿vale?
Un abrazo, compi y gracias por explicarlo todo tan guay, jiji!! 🤓
¡Hola Bea!
Yo también tengo algunos post-it que ya no pegan de tanto retrasarlos hoja tras hoja en la agenda, que le vamos a hacer… 😂😂😂
Pero si te soy sincero, cuando digo hoy toca, hasta que no termino la tarea no empiezo otra cosa, es la única forma de no ver que se amontonan cositas sin importancia, pero que al final, muchas cosas sin importancia se transforman en una importante.😅
Sobre el tema de optimizar las imágenes en la web, es un asunto que llevo al día, ya que es fundamental, minimizar el tiempo de carga de una página, pues si queremos dar una buena experiencia a nuestros usuarios, es uno de los puntos a atacar.
Además, es una de las tareas que no necesita de conocimientos técnicos para llevarla a cabo de forma correcta, más bien como tú dices, es dedicarle tiempo.
Yo también recomiendo, tener instalado un buen plugin de caché, es fundamental para optimizar los tiempos de carga en una web, a mí WP Rocket me va genial, 🚀, es de pago, pero noté mucha diferencia comparado con los gratuitos que tenía instalados, sin duda que compensa invertir en este plugin.
¡¡Venga compi!! A ver si es cierto que este propósito para 2019, es uno de los que cumples 😉
Un gran abrazo y muchas gracias por pasarte por el Blog y comentar 😘