Cuando hablamos de optimizar las imágenes, comprende varios aspectos que usualmente son pasados de alto al momento de crear un sitio web, y mi finalidad es ayudarte a ver con claridad la importancia de tomar un tiempo para optimizar las imágenes en tu sitio web, sea cual sea el tipo de CMS que estés usando como WordPress ó incluso si estas maquetando sin un CMS.
¿Porqué optimizar las imágenes de mi sitio web?
Las imágenes son archivos que tienen un peso, cuando un visitante entra a una página de tu sitio web, todos los archivos que contenga la página son cargados al navegador del visitante, quién puede acceder usando diferentes velocidades de Internet, así como puede tener limitaciones de capacidad de datos.
Usualmente las imágenes como ya lo había mencionado son cargados tal cual como fueron tomadas o bajadas de Internet, en esa condición suelen ser muy pesadas, por ejemplo una imagen tomada con el celular puede tener en promedio 2mb incluso unos 10mb si cuentas con un celular que tiene una exelente cámara, y colocar la imagen con este peso es un suicidio para tu página si tienes visitantes con limitaciones de velocidad, en realidad para cualquier visitante; y si en toda la página tiene como 3 imágenes del mismo tamaño, tu visitante esta cargándose los 6 megas, tampoco olvidemos el peso de la página que si no fue optimizada (lo hablaremos en otro artículo), tu visitante se estaría cargando en promedio unos 7 megas.
Esto aparte de afectar la velocidad, afecta el posicionamiento de la página, y con este artículo espero ayudarte a resolver este problema, pero todo parte de tu iniciativa de dedicarle un tiempo a esta tarea.
Optimizando el peso de las imágenes
El peso de las imágenes es muy importante que sea reducido al máximo, sin perder calidad y de acuerdo al ancho y alto de la zona donde se va a colocar, en este sentido antes de subir o colocar las imágenes en tu sitio web debes recortar las imágenes haciendo uso de alguna herramienta que te ayude a reducir el peso.
Programas que puedes usar para cambiar el tamaño y optimizar la calidad de las imágenes
- Photoshop
- Illustrator
- Gimp
- RIOT – me recomendaron para optimizar la calidad
- WordPress editor – Solo para recortar imágenes
- U otro editor de imágenes
Cambiando el tamaño de las imágenes
En el siguiente ejemplo puedes ver una imagen tal cual se tiene tras la toma fotográfica ó quizá como la hemos encontrado en Internet y a la derecha tenemos la zona del sitio web donde la queremos insertar, claramente no necesitamos toda la foto y tampoco en el tamaño original. La zona donde se va a insertar la foto tiene 378px de ancho por 230px de alto, por lo tanto es necesario cortar la foto.
Cambiando el tamaño con WooWeb
Para cambiar el tamaño existen muchas herramientas de edición de imágenes entre ellas puedes usar Photoshop, Illustrator, incluso paint; pero de forma sencilla puedes utilizar el editor de imágenes de WordPress como te muestro a continuación:
Reducir el peso de las imágenes sin perder calidad
Al momento de cambiar de tamaño de una imagen reduces algo de peso; pero es necesario también optimizar la calidad, depende de ello tendrás un mayor o menor peso, pero también se verá peor o mejor, como puedes ver a continuación una imagen del mismo tamaño en formato JPG; en el lado izquierdo se tiene 60 de calidad con un buen resultado y en el lado derecho 20 de calidad, claro en la imagen del lado derecho no se tiene un buen resultado en la imagen pero se tiene un peso muy bajo.
Te muestro una pequeña captura de la configuración que uso de forma frecuente en Photoshop, en mi experiencia obtengo un menor peso sin perder la calidad al usar el formato JPG en calidad 60. Los pasos en Photoshop son simples, cargo la imagen en Photoshop, luego doy clic en Archivo > Exportar > Guardar para web e inserto los datos que se muestra en la imagen del lado izquierdo.
El formato PNG usualmente tiene un peso mayor, y no tiene muchas opciones para configurar la calidad, aunque en algunas ocasiones se obtiene un menor peso con una buena calidad frente al JPG, dependerá mucho de la imagen y solo probando en la exportación de dicha imagen lograrás darte cuenta.
¿Cómo automatizar la optimización de la calidad de las imágenes en WordPress?
WordPress no trae consigo la opción para optimizar imágenes, digamos porque no es una tarea sencilla a nivel de Software, para ello existen servicios externos que brindan este servicio.
Servicios de optimización de imágenes:
- Imagify
- reSmush.it
- NitroSmush
Plugins que optimizan las imágenes en WordPress
Existen plugins que consumen estos servicios externos para que puedas optimizar la calidad de tus imágenes, como por ejemplo:
- Plugin de Imagify.
- Smush PRO.
¿Cómo optimizar la calidad de una imagen en WooWeb?
En WooWeb sabemos la importancia de la velocidad de un sitio web, por ese motivo tenemos incorporado la opción de optimizar las imágenes de forma automática y también manual para que se haga sencillo obtener una imagen con un menor peso sin perder calidad.
Para optimizar las imágenes manualmente dirígete a la siguiente opción:
Uso de un CDN para mejorar la velocidad de carga de las imágenes
Otra forma un poco mas avanzada es usar un CDN o en español conocido como Red de Envío de Contenidos, ¿Y de qué trata esto?, no es mas que una red de servidores (Computadores) regados al rededor del mundo en la cual se guardan las imágenes ó videos de tu sitio web, y cuando un visitante entre al sitio obtendrá las imágenes del servidor mas cercano a su localización.
Suena loco ¿Verdad?, 😀 pues si un poco, pero es una realidad y gran opción para acelerar la carga de tus archivos de imagen o video; vale recalcar que también se puede usar para todos los archivos del sitio web.
Otra gran finalidad de esto es que la carga de imágenes no se obtiene directamente de tu servidor o hosting, entonces se logra que tampoco se sobrecargue o colapse tu servidor en caso tengas muchas visitas, en términos para los mejores entenidos, no golpeas al servidor, evitas la sobrecarga, ahorras recursos en tu servidor.
¿Cómo usar un CDN en WordPress?
Siendo sinceros este asunto tiene un nivel de complejidad un poco mayor a lo normal, pero a nivel muy básico se puede usar un servicio externo gratuito llamado Cloudflare, para usarlo con WordPress debes configurar el plugin y encuentras varios tutoriales en internet para lograr este cometido.
Quiero dar una especial ALERTA en este caso, para que después no te estés asustando si tu sitio se ha caído por usar el servicio, alerta que casi nunca te lo dicen porque solo informan de la maravilla de Cloudflare, cosa que esta muy bien, pero es maravilloso en su servicio de pago; pero aquí estamos aprender las cosas tal cual y convertirnos en profesionales webs; el tema es que Cloudflare es gratis para una capacidad de 1GB de transferencia, superado esa cifra tu sitio web no abrirá a menos que uses el servicio de pago de Cloudflare donde ya todo se vuelve costoso para sitios webs pequeños o medianos.
¿Cómo usar un CDN en WooWeb?
Si tienes tu sitio web en WooWeb no tienes que hacer nada adicional, la infraestructura que manejamos en WooWeb incluye el que tus imágenes son cargadas a través del servicio de Amazon Cloudfront CDN, tanto tus imágenes y videos son cargados del servidor mas cercano que tiene Amazon a tu visitante.
Y si eres un poco más técnico te estarás preguntando como usar Cloudfront CDN en tu propio sitio web que no tienes con WooWeb; la respuesta no es tan sencilla, se necesita invertir un poco más de dinero de lo que se paga habitualmente en un hosting e interviene temas de manejo de servidores, donde ya es necesario contar con el apoyo de un experto o dedicar horas a la investigación, de hecho existen algunos tutoriales en Internet.
Otros tips para mejorar el SEO de tu sitio web con tus imágenes
Son dos las recomendaciones finales que vengo a darte en este artículo, aparte de mejorar la velocidad de carga de las imágenes en tu sitio web para mejorar el posicionamiento en los buscadores, claro también la experiencia de tus usuarios; existen otros pequeños detalles que te ayudarán a mejorar tu posicionamiento.
Nombrar los archivos de las imágenes
Tienes que ¡colocar un nombre a tus archivos!, cada vez que me topo con un sitio web que arreglar, siempre encuentro nombres de archivos terribles, es mas encontré una imagen de algún usuario que lanzó una pregunta y termine guardando la imagen y obtuve un gran meme:
jajajaja, miren nada mas que nombres tan acertados y ¡El peso!, el peso de las imágenes…
Los nombres son muy importantes para el SEO de tu sitio web, para los buscadores son como un indicativo de que se trata la imagen.
Usa el atributo alt y title en tu sitio web
Estos atributos son otros de los grandes olvidados, si el nombre del archivo esta mal colocado, un puntito a favor para que los buscadores conozcan de que trata la imagen, es colocando los atributos alt y title, estos atributos son colocado dentro del sitio web y te muestro en que parte de WordPress puedes editarlo:
Una diferencia entre los dos atributos es que Title, valga la redundancia es un título corto para la imagen y ALT o texto alternativo, corresponde al contenido o significado de la imagen.
Ambos atributos mejoran también en gran parte la accesibilidad del sitio web para personas con discapacidad visual, y esto a los buscadores también les gusta; sitios webs que tengan este plus de accesibilidad.
Espero haberte ayudado y darte un alcance para que optimices las imágenes de tu sitio web, cualquier duda déjala en los comentarios 😀