Aumentar la velocidad de tu blog puede ser un proceso complejo, sin embargo, hay una cosa que puedes hacer realmente fácil. Te comparto la guía completa para optimizar tus imágenes.
Creo que estoy adicto con esto. Estos días, antes de leer el contenido de las página que visitó, lo primero que hago es revisar las imágenes. Cuando es posible reducir su peso, envío un mensaje al autor para contarle sobre esta posibilidad.
Las imágenes, son uno de más grandes factores que disminuyen velocidad de la página. Por lo tanto, no optimizarlas ralentiza la carga de tu página, sin importar que otros procedimientos aplicas.
More...
Aquí hay un ejemplo, de lo que las imágenes no optimizadas hacen con tu blog.
Es un ejemplo real, de un blogger, que tiene blog por años, pero nunca se preocupo por optimizar sus imágenes.
El resultado: tamaño de imágenes 4 veces más grandes que lo necesarios, 8.65 mb tamaño de su página principal, que resulta en 5,65 segundos por cargar su página y reduce su posibilidad de buena posición en búsqueda de Google.
Aunque no es difícil, no siempre sabemos cómo resolverlo. Pero, ¡ya basta con el problema de las imágenes no optimizadas! Vamos por cómo reducir su tamaño.
Formato de imagen
¿Qué formato de imagen es el mejor para usar en mi blog? De esto en gran medida depende su tamaño.
Dos de los más usados son JPG y PNG, y es bueno usar ambos, depende de la situación:
- JPG - el mejor uso para fotografías, y cada imagen que no exige transparencia
- PNG - en general tiene mejor calidad, pero también pesa más en tamaño, es recomendable usarlo con imágenes que necesitan transparencia, por ejemplo dibujos y logos, combinación de dos imágenes etc.
Otro formato que puedes considerar es GIF - puedes usarlo con imágenes que no necesitan muchos colores, y cuando quieres crear imágenes con movimientos.
En mi blog el 90% de las imágenes son PNG, porqué la mayoría de ellas son creadas de mis propios dibujos y en este formato obtengo la mejor calidad.
Cambiar el tamaño
Antes de subirla, guarda tu imagen con las dimensiones correctas para tu página (ancho y altura). Esto significa que si quieres subir imagen:
- en el artículo - comprueba que ancho tiene tu área de contenido
- en la barra lateral - comprueba que ancho tiene tu área de widget
Nunca subas imágenes con más ancho de lo necesario. Si dejas que el navegador lo cambie por ti, entonces una imagen de 700 pixeles, la reducirá a 300 pixeles, de todo modo será cargado como 700 pixeles y tu no ves nada de diferencia, solo generas más peso para tu página.
Ejemplos, donde puedes cambiar, de forma gratuita el tamaño de tus imágenes.
Aplicaciones:
- Paint - para todos usuarios de Windows
- Vista previa - para Mac (Seleccione Herramientas -> Ajustar tamaño)
- GIMP - programa gratuita para Windows y Mac
Herramientas online:
Mayoría de los programas de manejar imágenes tienen la opción de cambiar su tamaño, entonces no tendrás problema de encontrarla.
Comprimir imágenes
Tu objetivo: reducir hasta el mínimo el tamaño, medido en kilobytes, preservando la “buena” calidad de la imagen.
Me gusta aplicar aquí, el principio de Pareto, según el cual por reducir 80% de peso de tu imagen su calidad baja solo 20%.
Antes de comprimir mis imágenes (de 600x314 pixeles) pesan aproximadamente 90 y después solamente 25 kilobytes, siendo casi invisible al ojo el cambio en calidad de imagen.
Imágen PNG de 87 kb
PNG comprimido a 27 kb
¿Cómo obtener este resultado?
Puedes ajustar la calidad de la imagen con la opción “guardar para web”, por ejemplo en Photoshop, o puedes elegir una de las muchas herramientas online.
Te recomiendo la página optimizilla.com, donde fácilmente reducirás el peso de todas las imágenes en formato JPG y PNG. Es gratis y es donde comprimo mis imágenes.
Aquí tienes cómo hacerlo.
En Optimizilla puedes subir y después descargar 20 imágenes a la vez.
Plugin para optimizar imágenes
Si optimizas, con Optimizilla u otro programa, cada imagen antes de subirlo, entonces probablemente ya estás bien. Sin embargo, puedes estar aún mejor, y optimizar tus imágenes automáticamente. Si tu blog está en WordPress simplemente instala un plugin para hacerlo.
Beneficios de tener plugin para optimizar imágenes:
- te aseguras de no olvidar comprimir ninguna imagen;
- puedes optimizar a la vez todas las imágenes, incluso de viejos artículos;
- algunas imágenes pueden estar optimizados aún más.
¿Qué plugin usar para optimizar imágenes en mi blog?
Por un largo tiempo he usado Smash WP, y aunque hace buen trabajo, ocasionalmente puede dañar una de tus imágenes. Lo mismo pasa con EWWW Optimizer, y muchos de los demás.
Mi recomendación es Imagify, que es un plugin gratuito por 25 mb mensualmente y si no subes cientos de imágenes al mes es todo lo que necesitarás. El plan gratuito es el que estoy usando en mis blogs.
Instalación de Imagify
En tu Panel de WordPress ve a: Plugins –> Añadir nuevo –> busca por “Imagify"
Instala y activa el plugin Imagify Image Optimizer
Una vez después de activarlo tendrás un menú. Sigue las instrucciones:
Haz una cuenta, escribiendo dirección de tu correo electrónico, abre tu email, click en enlace para confirmar, cierra la página que se abrió y regresa a email donde tienes tu API Key, que necesitas copiar.
Click en “Tengo mi clave API" y pega ahí tu código.
Ve a la configuración y establece nivel de optimización.
Personalmente tengo nivel agresivo. Una vez he tratado ultra y se ahorra mucho más espacio, pero es notable la reducida calidad de algunas imágenes.
Guarda y ve por optimización masiva, donde podrás optimizar todas tus imágenes presentes de una sola vez.
Nota: si estás usando mod_pagespeed te recomiendo desactivarlo, porque con ello pueden cambiarse los nombres de tus imágenes.
Cuando estás listo -> Imagífalo todo
Espera un momento para el proceso de optimización. Si excedes el límite mensual de 25 mb no te preocupes, puedes esperar hasta próximo mes para restablecer el límite (o también puedes comprar la versión Pro del Plugin).
Reducir numero de elementos
Si te gusta poner texto en tus imágenes, considera usar una plantilla donde una parte de la imagen es simplemente fondo con texto. De esta manera reduces significativamente el tamaño de la imagen.
Menos elementos = menos colores = menor tamaño
Ejemplos de mi blog.
Si te gustaría crear imágenes como estos, aquí hay una guía cómo crear plantilla de esta forma.
Simplicidad es poder y también se aplica a las imágenes. Haz uso de él, al menos que seas fotógrafo y quieres exponer tu trabajo con todos sus colores.
Gracias por leer esta guía, y si tienes alguna duda déjame un comentario. Espero ver tus imágenes optimizados y tu página más rápida que nunca 🙂
Me encanto!
Me sirvió mucho la guía para reducir el tamaño de las imágenes.
Muchas gracias Kamil.
Hola Ruth,
me alegro mucho que te ha servido mi guía. Me gustan los cambios que has implementado en tu página estos días, todo se ve más claro y sencillo.
Saludos 🙂