¿No te gustan las imágenes?
Pueden transformar un texto en una experiencia atractiva mientras lees. Las imágenes mejoran una publicación de blog, la hacen más compartible y establecen el tono y la marca de todo su sitio.
¿Y sabes qué? Estamos programados para responder a las imágenes. Es por eso que incorporar imágenes en su contenido es una herramienta poderosa para usar cuando comercializa su blog.
Pero, si no tiene cuidado, las imágenes pueden representar más de la mitad (o más) del tamaño total de su página web. Hace solo unos años, el tamaño promedio de una página web era 600–700K. Ahora, el promedio es de 2 MB y aumenta cada año.
¡Eso es enorme!
La razón principal por la que esto sucede es porque se utilizan varias imágenes con más frecuencia en las páginas web, y estas imágenes no tienen el tamaño y la optimización adecuados. Esto significa que no se guardan ni compilan de una manera amigable para la web y, en cambio, están hinchando sus páginas.
Sin embargo, la mayoría de nosotros dejamos las imágenes de optimización como una ocurrencia tardía y preferiríamos hacer cosas divertidas como crear una publicación épica o establecer contactos con otros bloggers en tu nicho.
Pero, tener la página hinchada significa que la velocidad de carga de su página se ve afectada. Es posible que no pienses que esto es un gran problema si estás en una conexión de alta velocidad, pero muchos de tus visitantes no. Además, a Google no le gustan las páginas de carga lenta, y puede afectar negativamente su SEO.
Por qué necesitas optimizar las imágenes
Trabajas duro para crear contenido estelar y pasas innumerables horas promocionando tu blog y redes con otros bloggers, ¡así que lo último que quieres es que los visitantes potenciales abandonen tu sitio web incluso antes de que se cargue!
Los estudios muestran que hasta el 40% de los visitantes hacen clic en el botón Atrás si un sitio tarda más de tres segundos en cargarse.
Lo sé, tres segundos realmente no es mucho tiempo, pero cuando estás en una conexión móvil y estás esperando que se cargue un sitio, un segundo puede parecer para siempre.
Y dado que la mitad de sus visitantes pueden estar en conexiones móviles más lentas, queda claro: debe reducir el tamaño de su página. Y ya sabemos cuál es el mayor infractor de la hinchazón del tamaño de la página: son sus imágenes.
Las imágenes innecesariamente grandes también ocupan espacio en su cuenta de alojamiento. Si bien algunos de ustedes pueden tener alojamiento con espacio de almacenamiento “ilimitado”, muchos proveedores de alojamiento premium lo limitan a alrededor de 10 GB de almacenamiento en planes de nivel inferior. Esto puede llenarse rápidamente, especialmente si aloja múltiples sitios con muchas imágenes en la misma cuenta.
Entonces, ¿cómo puede saber si sus imágenes están ralentizando su sitio? Pruebe la velocidad de su sitio con Google PageSpeed Insights.
Si Google informa que las imágenes no optimizadas son un problema, esto es lo que necesita saber para solucionarlo.
Conceptos básicos de optimización de imagen
Cuando se trata de optimizar imágenes en su blog, hay algunas cosas diferentes que debe tener en cuenta: tipo de archivo, tamaño y dimensiones de imagen, cómo sirve sus imágenes y compresión de imágenes.
Echemos un vistazo más de cerca a cada una de estas áreas.
Tipo de archivo
Las imágenes en la web generalmente se guardan en formato de archivo PNG o JPEG, o GIF para animación. ¡Quién no ama esos divertidos GIF animados que flotan en la web!
Ahora es técnicamente bueno si guarda sus imágenes en cualquier formato, el navegador de su visitante no tendrá problemas para mostrar su página web, pero para obtener la mejor calidad y optimización, cumpla con las siguientes reglas:
- JPEG: se utiliza para fotografías y diseños donde se muestran personas, lugares o cosas
- PNG: ideal para gráficos, logotipos, diseños con mucho texto, capturas de pantalla y cuando necesita imágenes con fondos transparentes
- GIF: si necesita animación, de lo contrario use PNG
Entonces, ¿por qué hay diferentes formatos?
Bueno, PNG se usa tradicionalmente para guardar logotipos y gráficos porque conserva la calidad de imagen original: nadie quiere texto borroso y formas pixeladas. Pero, si intenta guardar una foto como PNG, se verá increíble, pero el tamaño del archivo resultante será menos que sorprendente.
JPEG se usa tradicionalmente para guardar fotos. Algunos de los datos de la imagen se desechan para crear un tamaño de archivo drásticamente más pequeño, pero dado que las fotos contienen una amplia variedad de colores y variaciones naturales, la pérdida de calidad generalmente no se nota en el ojo humano.
Entraremos en más detalles sobre la compresión más adelante, pero por ahora si solo recuerda dos cosas, recuerde: JPEG para fotos y PNG para texto / gráficos.
Dimensiones de la imagen
¿Alguna vez has cargado una página web y has notado que una pequeña imagen (tal vez un tiro en la cabeza, por ejemplo) toma f-o-r-e-v-e-r para descargar? ¿Tan lento que puedes ver cada línea entrando? Piensas para ti mismo, ¿cómo puede tardar tanto tiempo en descargar una imagen tan pequeña?
Y cuando sucede con una imagen de encabezado grande, es aún peor porque puede detener la carga de toda la página.
La razón por la que esto sucede es porque el blogger no ha redimensionado y optimizado adecuadamente su imagen, y en el caso de nuestro ejemplo de tiro en la cabeza, podría haber subido un JPEG de resolución completa directamente desde su cámara DSLR.
¡Y ese es un archivo enorme!
Verá, un navegador web (por lo general) escalará una imagen de sus dimensiones originales para que encaje bien en su lugar en una página web. Lo que parece ser una pequeña imagen en pantalla realmente podría ser una gran foto de 10 megapíxeles, reducida en tiempo real por el navegador.
Ahora, algunas plataformas de publicación web crearán automáticamente múltiples variaciones de su imagen de resolución completa en diferentes tamaños, pero si no, debe cambiar el tamaño de sus imágenes de antemano en un editor de imágenes como Photoshop, Lightroom, Pixlr, o incluso MS Paint. Puede significar la diferencia entre un archivo de 50K y uno de 5MB.
WordPress, por ejemplo, creará automáticamente tres (o más, dependiendo de su tema) copias de su imagen cargada, todas con diferentes dimensiones, que puede usar en publicaciones de blog, en lugar de usar siempre la imagen a tamaño completo.
Si tiene la costumbre de cargar grandes imágenes de fotos de archivo y desea ahorrar espacio en su cuenta de alojamiento, el complemento de WordPress Imsanity le respalda.
Cambia el tamaño y reemplaza la imagen original por algo más manejable, por lo que incluso si inserta la imagen de tamaño completo en su publicación, no será tan mala.
Una vez activado, Imsanity también puede buscar sus imágenes existentes y cambiar el tamaño en consecuencia.
Sirviendo tus imágenes
La forma en que entregas tus imágenes a tus visitantes no se trata estrictamente de optimizarlas per se, pero puede tener un impacto dramático en el tiempo de carga de tu página.
La mayoría de los bloggers publican sus imágenes directamente desde su cuenta de hosting y eso generalmente está bien, pero si realmente está buscando exprimir cada bit de rendimiento de su sitio, entonces alojar sus imágenes en una red de entrega de contenido (CDN) puede hacer una gran diferencia .
Un CDN consiste en servidores web ubicados estratégicamente ubicados en centros de datos en todo el mundo. Estos servidores alojan copias duplicadas de sus imágenes y cuando el navegador de un visitante solicita una imagen de su sitio web, el CDN dirige automáticamente el navegador a un servidor que está geográficamente más cerca de ellos.
Esto significa que los visitantes de Europa, por ejemplo, recibirán imágenes servidas desde un servidor europeo local, en lugar de uno de los Estados Unidos u otro lugar. Dado que el tiempo de respuesta y la latencia de la red se reducen, las imágenes se descargan mucho más rápido, lo que reduce el tiempo de carga de la página.
Blogging Wizard usa Sucuri (incluye un Firewall para seguridad y un CDN), pero hay otros proveedores de calidad como Amazon Cloudfront o KeyCDN. Incluso el popular CloudFlare, que no es estrictamente un CDN, ofrece un CDN gratis y es fácil de configurar en la mayoría de los paquetes de alojamiento compartido.
Compresión de imagen
Cuando se trata de optimizar sus imágenes, nada reduce el tamaño de su archivo más que la compresión avanzada de imágenes con pérdida.
La mayoría de las herramientas de edición de imágenes como Canva o Photoshop guardarán archivos con compresión JPEG con pérdida, ya que tiene las mejores reducciones de tamaño de archivo. Entonces, si bien la calidad de la imagen se reduce ligeramente, el uso de compresión de imágenes con pérdida reduce las imágenes enormes a tamaños compatibles con la web.
Estoy seguro de que muchos de los que usan Photoshop pueden ver su Ahorre para la web característica como el todo y el final de la optimización de imagen. E incluso las herramientas de edición de imágenes en línea como PicMonkey o Canva también optimizan sus imágenes.
Pero, ¿sabía que hay herramientas que pueden tomar su imagen “optimizada” de Photoshop u otras herramientas de edición, comprimirla y comprimirla en otro 40% (o más), y todavía ¿Parece casi idéntico al ojo humano?
Aquí hay algunas herramientas gratuitas y de pago para ayudarlo a reducir sus imágenes a un estado compatible con la web.
Herramientas de escritorio
ImageAlpha / ImageOptim
Para el usuario de Mac, ImageAlpha e ImageOptim son dos herramientas de escritorio gratuitas que uso todos los días para optimizar imágenes PNG, en su mayoría capturas de pantalla, antes de cargarlas. Estas herramientas son fáciles de usar, simplemente arrastre y suelte sus archivos, pero tiene que hacer una imagen a la vez.
Consejo profesional: Para los expertos en tecnología, existe ImageOptim – CLI, donde puede optimizar una carpeta completa de imágenes a la vez.
ImageAlpha es un compresor PNG con pérdida y puede hacer maravillas al reducir los archivos PNG, mientras que ImageOptim realiza una compresión avanzada sin pérdida (con la opción de pérdida) y elimina los metadatos innecesarios de los archivos PNG, JPEG y GIF.
Para mis imágenes PNG, primero las ejecuto a través de ImageAlpha:
Aquí, redujo mi imagen de captura de pantalla de 103K a 28K.
Luego lo ejecuté a través de ImageOptim y ahorré un 10% adicional.
JPEGmini
Para mis archivos JPEG, los optimizo con la aplicación de escritorio JPEGmini, disponible para Mac y Windows.
La versión Lite le permite optimizar hasta 20 imágenes al día de forma gratuita y cuesta $ 19.99 para eliminar el límite.
Consejo profesional: Los usuarios avanzados que deseen integrar JPEGmini en Photoshop o Lightroom a través de un complemento pueden comprar la versión Pro por $ 99.99.
Herramientas en línea / en la nube / SaaS
TinyPNG
Si está buscando una herramienta de compresión de imágenes en línea de alta calidad, TinyPNG (también optimiza los archivos JPEG a pesar del nombre) es una aplicación web que le permite arrastrar hasta 20 imágenes de 5 MB o más pequeñas en su navegador y optimizarlas. de repente.
También tienen una API de desarrollador y ponen a disposición un complemento de WordPress que puede optimizar automáticamente sus imágenes al cargarlas.
TinyPNG le ofrece 500 optimizaciones de imagen gratuitas por mes, y luego cobra desde $ 0.002-0.009 por imagen, dependiendo del volumen.
Ahora, 500 imágenes por mes pueden parecer mucho, pero si considera el hecho de que WordPress a menudo crea de tres a cinco variaciones de cada imagen en diferentes tamaños, 500 imágenes no parecen tantos para el prolífico blogger. Afortunadamente, el costo por imagen es económico.
Kraken.io
Otra herramienta popular en línea es Kraken. Aunque es principalmente una herramienta de pago, tienen la opción de subir imágenes a su sitio web de forma gratuita, con límites. Solo puede cargar imágenes de hasta 1 MB de tamaño; de lo contrario, debe pagar el servicio.
También hay un complemento de WordPress disponible para suscriptores, y el complemento optimizará automáticamente sus imágenes cuando las cargue en su biblioteca de medios.
Si necesita comprimir imágenes de más de 1 MB, o simplemente quiere automatizar las cosas, puede optar por una suscripción que va desde el plan Micro a $ 5 / mes por 500 MB de imágenes, hasta el plan Enterprise de $ 70 / mes por la friolera de 60 GB de imágenes optimizadas por mes.
EWWW Image Optimizer
Si no está listo para gastar dinero y no desea que le moleste optimizar sus imágenes manualmente, el complemento gratuito EWWW Image Optimizer para WordPress puede optimizar automáticamente sus imágenes cargadas.
Puede optar por una suscripción premium que realice una compresión con pérdida, pero la versión gratuita solo realiza una compresión sin pérdida, por lo que los ahorros no son tan sustanciales. Sin embargo, te ahorrará tiempo y es mejor que nada.
Envolviendolo
Con algunas personas prediciendo que el tamaño promedio de la página web se acercará a los 3 MB en 2017, ahora es el momento de comenzar a optimizar sus imágenes.
Recuerde, no todos sus visitantes estarán en conexiones de alta velocidad, y la hinchazón de la página y los tiempos de carga lentos de la página pueden afectar su clasificación con Google. Para ayudarlo a aligerar la carga, por así decirlo, tenga el hábito de optimizar sus imágenes hoy.
Preste atención a las dimensiones de su imagen y cambie el tamaño de las fotos o imágenes de gran tamaño de una cámara digital a un tamaño apropiado.
A continuación, aproveche la compresión de imágenes moderna con aplicaciones de escritorio como JPEGmini o herramientas en la nube como TinyPNG o Kraken, integrándolas en WordPress con un complemento si es posible.
Por último, si su plataforma de publicación crea automáticamente variaciones redimensionadas de su imagen original, elija una de estas para su publicación de blog, en lugar de la original, de tamaño completo.
Divulgar: Esta publicación contiene enlaces afiliados. Esto significa que podemos hacer una pequeña comisión si realiza una compra.
