La guía de Blogger para optimizar imágenes para la Web

¬Ņ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.

Google Pagespeed

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?

Barra lateral de tiro en la cabeza

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.

Cambiar el tama√Īo de Pixlr

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.

Configuraciones de tama√Īo de imagen

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.

Complemento Imsanity

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.

Flama de nube

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.

Canva optimizando

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?

Proceso de optimización

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:

Usando la imagen alfa

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.

Optim de imagen

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.

jpeg Mini

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

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

Kraken

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

Ewww

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.

Guía de bloggers para optimizar imágenes para la web