Cómo hacer un Sitio Web o Blog en 2024 - Guía fácil y Gratuita para Crear un Sitio Web

Cómo optimizar imágenes para la web

Cómo optimizar imágenes para la web

Imagen oculta de Pinterest

¿No te encantan las fotos?

Pueden convertir un fragmento de texto en una experiencia inmersiva 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 el sitio.

¿Y sabes qué? Estamos programados para responder a imágenes. Es por eso que incorporar imágenes en su contenido es una herramienta poderosa para comercializar su blog.

Pero, si no tienes cuidado, las imágenes pueden representar más de la mitad (o más) del tamaño total de tu página web. Hace apenas unos años, el tamaño medio de una página web era de 600 a 700 KB. Ahora el promedio es de 2 MB y aumenta cada año.

¡Es enorme!

La razón principal por la que esto sucede es que las páginas web utilizan más imágenes con mayor frecuencia y estas imágenes no tienen el tamaño ni la optimización adecuada. Esto significa que no se guardan ni se compilan de forma compatible con la web y, en cambio, inflan sus páginas.

La mayoría de nosotros, sin embargo, dejamos la optimización de imágenes como una ocurrencia de último momento y preferimos divertirnos haciendo cosas divertidas como crear una publicación épica o establecer contactos con otros blogueros de nuestro nicho.

Sin embargo, tener una página inflada significa que la velocidad de carga de la página se ve afectada. Puede que no creas que esto es gran cosa si utilizas una conexión de alta velocidad, pero muchos de tus visitantes no lo son. Además, a Google no le gustan las páginas de carga lenta, lo que puede afectar negativamente a su SEO.

Por qué necesitas optimizar las imágenes

Trabajas duro para crear contenido excelente y pasas innumerables horas promocionando tu blog y estableciendo contactos con otros blogueros, por lo que lo último que quieres es que los visitantes potenciales abandonen tu sitio web 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 no es mucho tiempo, pero cuando estás conectado a una red móvil y esperando a que se cargue un sitio, un segundo puede parecer una eternidad.

Y dado que muchos de sus visitantes pueden tener conexiones móviles más lentas, queda claro: necesita reducir el tamaño de la página. Y ya sabemos cuál es el principal responsable del aumento del tamaño de la página: son tus imágenes.

Las imágenes innecesariamente grandes también ocupan espacio en su cuenta de hosting. Si bien algunos de ustedes pueden tener alojamiento con almacenamiento “ilimitado”, muchos proveedores de alojamiento premium limitan el almacenamiento a alrededor de 10 GB en planes de nivel inferior. Esto puede llenarse rápidamente, especialmente si aloja varios sitios ricos en imágenes en la misma cuenta.

Entonces, ¿cómo puedes saber si tus imágenes están ralentizando tu sitio? Pruebe la velocidad de su sitio con Estadísticas de PageSpeed ​​de Google.

Velocidad de la página de Google

Si Google informa que las imágenes no optimizadas son un problema, esto es lo que necesita saber para solucionarlo.

🔥 Leer:  10 mejores fuentes de alimentación para Arduino UNO

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

Cuando se trata de optimizar imágenes en su blog, hay algunas cosas que debe tener en cuenta: tipo de archivo, tamaño y dimensiones de la imagen, cómo publica 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, JPEG o GIF para animación. ¡A quién no le encantan esos divertidos GIF animados que flotan en la web!

Ahora es técnicamente Está bien Si guarda sus imágenes en cualquiera de los formatos, el navegador de su visitante no tendrá problemas para ver su página web, pero para obtener la mejor calidad y optimización, siga las siguientes reglas:

  • JPEG: Úselo para fotografías y dibujos que muestren personas, lugares o cosas.
  • PNG: ideal para gráficos, logotipos, diseños con mucho texto, capturas de pantalla y cuando necesitas imágenes con fondos transparentes.
  • GIF: si necesita animaciones, de lo contrario utilice PNG

Entonces, ¿por qué existen diferentes formatos?

Bueno, PNG se usa tradicionalmente para guardar logotipos y gráficos porque preserva la calidad de la imagen original; nadie quiere texto borroso ni 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 utiliza tradicionalmente para guardar fotografías. Algunos datos de imágenes se descartan para crear archivos de tamaño mucho más pequeño, pero debido a que las fotografías contienen una amplia 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.

Tamaño de la imagen

¿Alguna vez has cargado una página web y has notado que una imagen pequeña (como una foto de rostro) tardó una eternidad en descargarse? Por ejemplo, ¿tan lento que puedes ver cada línea que llega? Piensas, ¿cómo puede tardar tanto en descargar una imagen tan pequeña?

Barra lateral de tiro en la cabeza

Y cuando le sucede a una imagen de encabezado grande, es aún peor porque puede bloquear la carga de toda la página.

La razón por la que esto sucede es porque el blogger no cambió el tamaño ni optimizó su imagen correctamente y, en el caso de nuestro ejemplo de retrato, es posible que haya subido un JPEG de resolución completa directamente desde su cámara DSLR.

¡Y ese es un archivo enorme!

Verá, un navegador web (normalmente) cambia el tamaño de una imagen desde su tamaño original para que encaje perfectamente en su lugar en una página web. Lo que parece ser una imagen pequeña en la pantalla puede ser en realidad una foto enorme de 10 megapíxeles, cuyo tamaño cambia en tiempo real mediante su 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, primero debe cambiar el tamaño de las imágenes en un editor de imágenes como Photoshop, Lightroom, Pixlr o incluso MS Paint. Puede significar la diferencia entre un archivo de 50K y un archivo de 5MB.

escalado de píxeles

WordPress, por ejemplo, creará automáticamente tres (o más, según el tema) copias de la imagen cargada, todas en diferentes tamaños, para que las use en las publicaciones del blog, en lugar de usar siempre la imagen en tamaño completo.

🔥 Leer:  Protector de pantalla superior y mejor para iPhone XS Max
Configuración de tamaño de imagen

Si tienes la costumbre de subir archivos de gran tamaño archivo de imágenes fotográficasy quieres ahorrar espacio en tu cuenta de hosting, el complemento de WordPress Imsanidad tiene tu espalda.

Cambia el tamaño y reemplaza la imagen original con algo más manejable, por lo que incluso si insertas la imagen de tamaño completo en tu publicación, no será tan malo.

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

Complemento Imsanity

Sirve tus imágenes

La forma en que ofrece sus imágenes a sus visitantes no se trata únicamente de su optimización per se, sino que puede tener un impacto dramático en el tiempo de carga de la página.

La mayoría de los blogueros publican sus imágenes directamente desde su cuenta de alojamiento y eso suele estar bien, pero si realmente busca aprovechar al máximo el rendimiento de su sitio, alojar sus imágenes en una red de entrega de contenido (CDN) puede marcar una gran diferencia.

Una CDN Consiste en servidores web ubicados estratégicamente 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 a un servidor geográficamente más cercano a él.

Esto significa que los visitantes de Europa, por ejemplo, recibirán imágenes enviadas desde un servidor europeo local, en lugar de uno de EE. UU. o de otro lugar. Debido a que se reducen los tiempos 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 (incluye un firewall de seguridad y un CDN), pero existen otros proveedores de calidad como Cloudfront o KeyCDN de Amazon. 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 imágenes

Cuando se trata de optimizar imágenes, nada reduce más el tamaño del archivo 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 guardarán archivos utilizando compresión JPEG con pérdida, ya que ofrece las mejores reducciones de tamaño de archivo. Entonces, si bien la calidad de la imagen se reduce ligeramente, el uso de la compresión de imágenes con pérdida reduce las imágenes enormes a tamaños aptos para la web.

Estoy seguro de que muchos de los que usan Photoshop podrían ver esto. Guardar para la web funcionalidad como piedra angular de la optimización de imágenes. Y las herramientas de edición de imágenes en línea como PicMonkey o Visme también optimizan tus imágenes.

optimización de canva

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

Proceso de optimización

Aquí hay algunas herramientas gratuitas y de pago que le ayudarán a transformar sus imágenes en un estado compatible con la web.

Herramientas de escritorio

ImagenAlfa/ImagenOptim

Para usuarios de Mac, Imagen óptima es una herramienta de escritorio gratuita que uso todos los días para optimizar imágenes PNG, principalmente capturas de pantalla, antes de cargarlas. Estas herramientas son fáciles de usar, simplemente arrastre y suelte archivos, pero debe hacerlo una imagen a la vez.

🔥 Leer:  El algoritmo PageRank de Google, explicado - Search Engine Watch

Consejo profesional: Para los expertos en tecnología, existe ImageOptim-CLIdonde puedes optimizar una carpeta completa de imágenes a la vez.

ImageAlpha es un compresor PNG con pérdida y puede hacer maravillas al reducir archivos PNG, mientras que ImageOptim realiza una compresión avanzada sin pérdidas (con opción con pérdida) y elimina metadatos innecesarios de 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é en ImageOptim y ahorré un 10% adicional.

Optimización de imagen

JPEGmini

Para mis archivos JPEG, los optimizo con el escritorio. Aplicación JPEGminidisponible tanto para Mac como para Windows.

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

jpegmini

Consejo profesional: Los usuarios avanzados que quieran integrar JPEGmini en Photoshop o Lightroom mediante un complemento pueden comprar la versión Pro por $99,99.

Herramientas en línea/nube/SaaS

PequeñoPNG

pequeñopng

Si está buscando 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 le permite arrastrar hasta 20 imágenes de 5 MB o menos a su navegador y optimizarlas todas a la vez. .

También tienen una API de desarrollador y crean una Complementos de WordPress disponible que puede optimizar automáticamente sus imágenes al cargarlas.

TinyPNG le ofrece 500 optimizaciones de imágenes gratuitas por mes, después de lo cual se le cobrará entre 0,002 y 0,009 dólares por imagen, según el volumen.

Ahora bien, 500 imágenes al mes pueden parecer mucho, pero si consideramos el hecho de que WordPress suele crear 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 asequible.

EWWW Optimizador de imagen

Ewww

Si no está dispuesto a gastar dinero y no quiere preocuparse por optimizar manualmente sus imágenes, el servicio gratuito EWWW Optimizador de imagen El complemento de WordPress puede optimizar automáticamente las imágenes cargadas.

Puede optar por una suscripción premium que realiza compresión con pérdidas, pero la versión gratuita solo realiza compresión sin pérdidas, por lo que los ahorros no son tan sustanciales. Sin embargo, le ahorrará tiempo y es mejor que nada.

En conclusión

Algunas personas predicen que el tamaño promedio de una 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 utilizarán conexiones de alta velocidad, y la sobrecarga de páginas y los tiempos de carga lentos pueden afectar potencialmente su clasificación en Google. Para ayudar a aligerar la carga, por así decirlo, adquiera el hábito de optimizar sus imágenes hoy.

Preste atención al tamaño de la imagen y cambie el tamaño de las fotografías demasiado grandes o las imágenes tomadas con una cámara digital hasta un tamaño adecuado.

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.

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

Lectura relacionada: 7 formas de reducir el tamaño del archivo PDF.