¿No te encantan las imágenes?

Las imágenes mejoran una entrada de blog, la hacen más compartible y marcan el tono y la marca de todo el sitio.

Por eso, incorporar imágenes a su contenido es una poderosa herramienta para promocionar su blog.

Pero, si no tiene cuidado, las imágenes pueden suponer más de la mitad (o más) del tamaño total de su página web. Hace sólo unos años, el tamaño medio de una página web era de 600-700K. Ahora, la media es de 2MB y aumenta cada año.

¡Eso es enorme!

La razón principal de que esto ocurra es que cada vez se utilizan más imágenes en las páginas web, y estas imágenes no tienen el tamaño ni la optimización adecuados, lo que significa que no se guardan ni se compilan de forma adecuada para la web y, en su lugar, hinchan las páginas.

La mayoría de nosotros, sin embargo, dejamos la optimización de imágenes para después y preferimos disfrutar haciendo cosas divertidas, como crear un post épico o establecer contactos con otros blogueros de tu nicho.

Sin embargo, tener una página hinchada significa que la velocidad de carga de la página se ve afectada. Puede que pienses que esto no es un gran problema si tienes una conexión de alta velocidad, pero muchos de tus visitantes no lo tienen. Además, a Google no le gustan las páginas que se cargan lentamente, y puede afectar negativamente a tu SEO.

Por qué hay que optimizar las imágenes

Trabajas duro para crear contenidos estelares y pasas incontables horas promocionando tu blog y estableciendo contactos con otros blogueros, así que lo último que quieres es que los visitantes potenciales abandonen tu sitio web antes incluso de que se cargue.

Los estudios demuestran que hasta un 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 en realidad no es tanto tiempo, pero cuando estás en una conexión móvil y estás esperando a que se cargue un sitio, un segundo puede parecer una eternidad.

Y puesto que muchos de sus visitantes pueden estar en conexiones móviles más lentas, se hace claro - usted necesita conseguir su tamaño de la página abajo. Y sabemos ya cuál es el delincuente más grande de la hinchazón del tamaño de la página - es sus imágenes.

Las imágenes innecesariamente grandes también ocupan espacio en su cuenta de alojamiento. Mientras que algunos de ustedes pueden tener alojamiento con espacio de almacenamiento "ilimitado", muchos proveedores de alojamiento premium le limitan a alrededor de 10 GB de almacenamiento en los planes de nivel inferior. Esto puede llenar rápidamente, especialmente si aloja varios sitios con muchas imágenes en la misma cuenta.

¿Cómo puede saber si las imágenes están ralentizando su sitio? Compruebe la velocidad de su sitio con Google PageSpeed Insights.

Si Google informa de que las imágenes no están optimizadas como un problema, esto es lo que debes saber para solucionarlo.

Conceptos básicos de optimización de imágenes

A la hora de optimizar las imágenes de tu blog, debes tener en cuenta varios aspectos: el tipo de archivo, el tamaño y las dimensiones de la imagen, la forma de servir las imágenes y su compresión.

Analicemos más detenidamente cada una de estas áreas.

Tipo de fichero

En Internet, las imágenes suelen guardarse en formato PNG o JPEG, o GIF si son animadas. ¿A quién no le gustan esos divertidísimos GIF animados que circulan por la red?

Ahora es técnicamente ok si guardas tus imágenes en cualquiera de los dos formatos, el navegador de tu visitante no tendrá problemas para mostrar tu página web, pero para obtener la mejor calidad y optimización, cíñete a las siguientes reglas:

• JPEG: se utiliza para fotografías y diseños en los que aparecen personas, lugares o cosas.
• PNG: ideal para gráficos, logotipos, diseños con mucho texto, capturas de pantalla y para imágenes con fondo transparente.
• GIF - si necesita animación, de lo contrario utilice PNG

Entonces, ¿por qué hay diferentes formatos?

Tradicionalmente, el formato PNG se utiliza para guardar logotipos y gráficos, ya que conserva la calidad de la imagen original: nadie quiere texto borroso ni formas pixeladas. Pero, si intentas guardar una foto como PNG, tendrá un aspecto asombroso, pero el tamaño del archivo resultante no lo será tanto.

El formato JPEG se utiliza tradicionalmente para guardar fotos. Parte de los datos de la imagen se desechan para reducir drásticamente el tamaño del archivo, pero como las fotos contienen una gran variedad de colores y variaciones naturales, la pérdida de calidad suele ser imperceptible para el ojo humano.

Más adelante entraremos en más detalles sobre la compresión, pero por ahora si sólo recuerdas dos cosas, recuerda: JPEG para fotos y PNG para texto/gráficos.

Dimensiones de la imagen

¿Alguna vez has cargado una página web y te has dado cuenta de que una imagen diminuta (por ejemplo, un retrato) tarda una barbaridad en descargarse? ¿Tan despacio que puedes ver cómo va entrando cada línea? Piensas, ¿cómo es posible que una imagen tan pequeña tarde tanto en descargarse?

Y cuando ocurre con una imagen de cabecera grande, es aún peor porque puede paralizar toda la carga de la página.

Esto se debe a que el blogger no ha redimensionado y optimizado correctamente su imagen y, en el caso de nuestro ejemplo del retrato, es posible que haya subido un archivo JPEG de máxima resolución directamente desde su cámara DSLR.

¡Y es un archivo enorme!

Lo que parece una imagen pequeña en la pantalla puede ser en realidad una enorme foto de 10 megapíxeles, reducida en tiempo real por el navegador.

Ahora bien, algunas plataformas de publicación web crearán automáticamente múltiples variaciones de tu imagen a resolución completa en diferentes tamaños, pero si no es así, deberías redimensionar tus 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 tu tema) copias de la imagen que subas -todas con dimensiones diferentes- que podrás utilizar en las entradas del blog, en lugar de usar siempre la imagen a tamaño completo.

Si tienes la costumbre de subir enormes imágenes de stock y quieres ahorrar espacio en tu cuenta de hosting, el plugin de WordPress Imsanity te cubre las espaldas.

Cambia el tamaño y sustituye la imagen original por algo más manejable, de modo que aunque insertes la imagen a tamaño completo en tu entrada, no quedará tan mal.

Una vez activado, Imsanity también puede buscar sus imágenes existentes y cambiar el tamaño en consecuencia.

Servir sus imágenes

La forma de mostrar las imágenes a los visitantes no tiene que ver estrictamente con su optimización en sí, pero puede tener un impacto drástico en el tiempo de carga de la página.

La mayoría de los blogueros sirven sus imágenes directamente desde su cuenta de alojamiento y eso suele estar bien, pero si realmente quieres exprimir al máximo el rendimiento de tu sitio, alojar tus imágenes en una red de distribución de contenidos (CDN) puede suponer una gran diferencia.

Una CDN consiste en servidores web estratégicamente situados en centros de datos de 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, la CDN dirige automáticamente el navegador al servidor geográficamente más cercano.

Esto significa que los visitantes de Europa, por ejemplo, recibirán imágenes servidas desde un servidor local europeo, en lugar de uno de Estados Unidos u otro lugar. Al reducirse el tiempo de respuesta y la latencia de la red, las imágenes se descargan mucho más rápido, lo que reduce el tiempo de carga de la página.

Blogging Wizard utiliza Sucuri (que incluye un cortafuegos para la seguridad, así como un CDN), pero hay otros proveedores de calidad como Cloudfront de Amazon o KeyCDN. Incluso el popular CloudFlare, que no es estrictamente un CDN, ofrece un CDN de forma gratuita y es fácil de configurar en la mayoría de los paquetes de alojamiento compartido.

Compresión de imágenes

Cuando se trata de optimizar tus imágenes, nada reduce más el tamaño de tus archivos que la compresión avanzada de imágenes con pérdida.

La mayoría de las herramientas de edición de imágenes, como Visme o Photoshop, guardan los archivos con compresión JPEG con pérdidas, ya que es la que mejor reduce el tamaño de los archivos. Así, aunque la calidad de la imagen se reduce ligeramente, la compresión con pérdidas reduce las imágenes enormes a tamaños aptos para la web.

Estoy seguro de que muchos de los que utilizan Photoshop podrían ver su Guardar para Web Incluso las herramientas de edición de imágenes en línea, como PicMonkey o Visme, también optimizan las imágenes.

Pero, ¿sabías que existen herramientas que pueden tomar tu imagen "optimizada" de Photoshop u otras herramientas de edición, comprimirla en otro 40% (o más), y todavía que parezca casi idéntico al ojo humano?

Aquí tienes algunas herramientas gratuitas y de pago que te ayudarán a reducir tus imágenes a un formato apto para la web.

Herramientas de escritorio

ImageAlpha / ImageOptim

Para los usuarios de Mac, ImageOptim es una herramienta de escritorio gratuita que utilizo a diario para optimizar imágenes PNG -sobre todo capturas de pantalla- antes de subirlas. Estas herramientas son fáciles de usar, basta con arrastrar y soltar los archivos, pero hay que hacerlo imagen a imagen.

Consejo profesional Para los más técnicos, existe ImageOptim-CLI, que permite optimizar toda una carpeta de imágenes a la vez.

ImageAlpha es un compresor PNG con pérdida y puede hacer maravillas en la reducción de archivos PNG, mientras que ImageOptim realiza una compresión avanzada sin pérdida (con opción de pérdida) y elimina los metadatos innecesarios de los archivos PNG, JPEG y GIF.

Para mis imágenes PNG, primero las paso por ImageAlpha:

Aquí, redujo mi imagen de la captura de pantalla de 103K a 28K.

Después lo pasé por ImageOptim y me ahorré un 10% extra.

JPEGmini

Para mis archivos JPEG, los optimizo con la aplicación de escritorio JPEGmini, disponible tanto para Mac como para Windows.

La versión Lite permite optimizar hasta 20 imágenes al día de forma gratuita, y cuesta 19,99 dólares eliminar el límite.

Consejo profesional JPEGmini: Los usuarios avanzados que deseen integrar JPEGmini en Photoshop o Lightroom mediante un plugin pueden adquirir la versión Pro por 99,99 dólares.

Herramientas en línea / en la nube / SaaS

TinyPNG

Si buscas una herramienta de compresión de imágenes en línea de alta calidad, TinyPNG (también optimiza archivos JPEG a pesar del nombre) es una aplicación web que te permite arrastrar hasta 20 imágenes de 5 MB o menos a tu navegador y optimizarlas todas a la vez.

También tienen una API para desarrolladores y un plugin para WordPress que puede optimizar automáticamente las imágenes al cargarlas.

TinyPNG te ofrece 500 optimizaciones de imagen gratuitas al mes y, a partir de ahí, cobra entre 0,002 y 0,009 dólares por imagen, en función del volumen.

500 imágenes al mes pueden parecer muchas, pero si tenemos en cuenta que WordPress suele crear de tres a cinco variaciones de cada imagen en diferentes tamaños, 500 imágenes no parecen tantas. que muchos Por suerte, el coste por imagen es asequible.

Optimizador de imágenes EWWW

Si no estás dispuesto a gastar dinero y no quieres molestarte en optimizar tus imágenes manualmente, el plugin gratuito EWWW Image Optimizer para WordPress puede optimizar automáticamente las imágenes que subas.

Puedes optar por una suscripción premium que realice compresión con pérdidas, pero la versión gratuita sólo realiza compresión sin pérdidas, por lo que el ahorro no es tan sustancial. No obstante, te ahorrará tiempo y es mejor que nada.

Nota: Para obtener un resumen completo, consulte nuestro artículo sobre herramientas de compresión de imágenes.

Para terminar

Algunos predicen que el tamaño medio de las páginas web se acercará a los 3 MB en 2017, por lo que ahora es el momento de empezar a optimizar las imágenes.

Recuerde que no todos sus visitantes dispondrán de una conexión de alta velocidad, por lo que el exceso de páginas y los tiempos de carga lentos pueden afectar a su clasificación en Google.

Preste atención a las dimensiones de las imágenes y redimensione las fotos de archivo demasiado grandes o las imágenes de una cámara digital a un tamaño adecuado.

A continuación, aprovecha las ventajas de 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 plugin si es posible.

Por último, si su plataforma de publicación crea automáticamente variaciones redimensionadas de su imagen original, elija una de ellas para su entrada de blog, en lugar de la original a tamaño completo.

Lecturas relacionadas: 7 maneras de reducir el tamaño de los archivos PDF.