Tu sitio web está formado por muchos archivos como HTML, Javascript, hojas de estilo CSS, archivos de imagen y más. Cada vez que alguien visita tu sitio, su navegador envía una solicitud a tu servidor web para enviar todos los archivos de tu sitio. Una vez que tu servidor envía los archivos, tu sitio web aparecerá en el navegador de tu visitante. En este artículo te mostraremos como optimizar imágenes para web.
Algunos sitios tardan mucho en cargarse, mientras que otros se cargan rápidamente.
Si tuvieras que elegir entre un sitio web rápido y uno lento, estoy seguro de que elegirías el rápido. Nadie quiere ir a un sitio web lento y esperar más de 5 segundos.
De hecho, 5 segundos ya se considera mucho tiempo.
La mayoría de los usuarios de Internet esperan que los sitios se carguen en 1-2 segundos. Una diferencia de unos pocos segundos puede parecer mínima en el mundo real, pero para los usuarios de Internet esa demora se siente como una eternidad.
Cómo optimizar imágenes para web
Antes de pasar a ver cómo optimizar imágenes para web y otros archivos que también veremos la importancia de optimizarlos, lo primero que debes conocer es que son los archivos no optimizados.
¿Qué son los archivos no optimizados?
Uno de los culpables de los sitios web lentos son los archivos de imágenes no optimizados.
Estas son imágenes de alta definición que las personas cargan directamente desde sus cámaras de alta resolución u otras fuentes.
Ven una imagen que se ve bien y la suben a su sitio web sin pensar en el tamaño del archivo de imagen. Luego se quedan atónitos cuando sus sitios tardan una eternidad en cargar.
Existe una diferencia entre cargar imágenes en tu sitio web auto alojado y cargar las mismas imágenes en redes sociales, por ejemplo, Facebook.
Cuando las subes a Facebook, tus imágenes se redimensionan y optimizan automáticamente. Es por eso que no importa cuán grandes sean tus imágenes, siempre se cargan rápido en Facebook.
Desafortunadamente, no se puede decir lo mismo de tu sitio web.
Cuando subes una foto de 2 MB, se mantendrá en 2 MB.
Cuando las personas visiten tu sitio, tu hosting entregará ese archivo de imagen de 2 MB (y todos los demás archivos de tu sitio web) a tus visitantes.
Ahora, imagínate si tuvieras 10 de esas imágenes en tu blog, ¡tu servidor enviaría más de 20 MB de archivos a los navegadores de las personas!
Incluso las personas con conexiones a Internet ultrarrápidas experimentarán una desaceleración.
Ahora piensa en aquellos que tienen un Internet lento: ¡descargar más de 20 MB de archivos de sitios web llevará mucho tiempo!
Imágenes para imprimir vs imágenes para web
Lo que la mayoría de la gente no se da cuenta es que las imágenes normales no están optimizadas para la Web.
Si deseas optimizar imágenes, tendrás que tomar cartas en el asunto.
Comencemos por examinar las diferencias entre las imágenes para imprimir y las imágenes para sitios web:
Imágenes para imprimir
Las resoluciones de las imágenes de impresión se miden en DPI o puntos por pulgada.
Si deseas imprimir algo y quieres que se vea bien, entonces deberías optar por una resolución de 300 DPI. Esto significa que por cada pulgada cuadrada, hay 300 puntos. Esto conduce a imágenes de aspecto nítido con buenos detalles.
Las imágenes que están destinadas a imprimirse suelen ser archivos de gran tamaño. Esto se debe a que las fotos de mayor resolución tienen más megapíxeles. Si imprimes una foto de baja resolución, saldrá granulada y borrosa.
Imágenes web
Las imágenes web, por otro lado, se miden en PPI o píxeles por pulgada.
Los píxeles son pequeños cuadrados que se ven en los monitores de las computadoras y otros dispositivos digitales.
Si usas una imagen de baja resolución en tu sitio web, entonces verás pequeños cuadrados en tu imagen. Estos son los píxeles, la unidad más pequeña en imágenes digitales.
Si haz tomado una foto con una DSLR o incluso con la cámara de tu smartphone, y deseas subirla a tu sitio, deberás optimizarla para su uso en la web. Esto se debe a que la mayoría de las cámaras modernas (incluidos los teléfonos inteligentes) toman fotografías con muchos megapíxeles.
Por ejemplo, estás escribiendo un post sobre loros y tomaste una foto de tu loro con tu teléfono inteligente. Pensaste que la foto se verá genial en tu publicación, así que la subes inmediatamente a tu sitio web.
Lo que no te das cuenta es que la resolución de la imagen probablemente se vería así: 4032 x 1960 píxeles con un tamaño de archivo de 3 MB.
Nuevamente, tal como mencioné anteriormente, si subes imágenes de alta resolución como esta a tu sitio, entonces tendrás un sitio web lento. Esto es fatal para la velocidad de carga de tu sitio.
Cómo optimizar imágenes para la web
Hay una serie de técnicas que puedes seguir para optimizar imágenes para la web. Éstos son algunas de ellas:
1. Reduce las dimensiones de la imagen
En este blog ya había explicado cómo reducir el tamaño de una imagen.
Para verificar las dimensiones de tu imagen actual, puedes buscar la sección de propiedades de la imagen. Debes verificar cuántos píxeles tiene en términos de largo y ancho. En nuestro ejemplo anterior, la foto del loro tenía 4032 x 1960 píxeles.
Para imágenes web, el tamaño óptimo es 1200 x 800 píxeles y el máximo recomendado es 2000 píxeles.
Entonces, si tienes una imagen que va más allá de estas dimensiones, entonces deberías cambiar su tamaño. Tu imagen de 4032 x 1960 píxeles se comprimirá de todos modos en los navegadores web, pero seguirá teniendo el mismo tamaño de archivo.
El hecho de que tu imagen de 4032 x 1960 parezca más pequeña en las pantallas de las computadoras no significa que el tamaño de su archivo disminuirá mágicamente a 100 KB. No funciona de esa manera, tendrás que optimizarla por tu parte.
Esto significa cambiar el tamaño de las dimensiones de tu archivo de imagen. En este caso, deberás cambiar el tamaño de la imagen de 4032 x 1960 a 1200 x 800 píxeles. El tamaño del archivo se reducirá considerablemente.
Si estás en Windows, puedes utilizar una herramienta gratuita llamada «Image Resizer For Windows«. Si instalas el software en tu computadora, puedes cambiar rápidamente el tamaño de las imágenes haciendo click derecho.
Por supuesto, hay otras herramientas gratuitas disponibles. También puedes usar «FastStone Photo Resizer«. No dudes en explorar y utilizar la herramienta adecuada para ti y con la que más cómodo te sientas.
2. Guarda las imágenes en el tipo de archivo apropiado
Hay muchos tipos de archivos de imagen.
Sin embargo, no todos son aptos para la web. Para optimizar imágenes para web debemos primero conocer los formatos. Los 3 archivos de imagen más comunes que se cargan para uso web son JPG (o JPEG), PNG y GIF.
Las imágenes JPG son un formato de archivo comprimido con pérdida y generalmente se usan para fotografías que a menudo tienen muchos colores sutilmente diferentes. Si revisas las fotos de tu cámara, notarás que el tipo de archivo será JPG.
Las imágenes PNG tienen un formato de archivo de compresión sin pérdidas y es ideal para usar en gráficos e imágenes con mucho texto. Si deseas utilizar transparencia en tus imágenes, debes guardar tu archivo en formato PNG.
Las imágenes GIF, por otro lado, también son un formato de archivo de compresión sin pérdidas, pero están limitadas a 256 colores. Los GIF pueden presentar animaciones, y a menudo verás este formato utilizados en los memes.
3. Comprime tus imágenes para la Web
Comprimir imágenes para la web es tan simple como arrastrar tus imágenes a herramientas en línea.
Estas herramientas eliminan datos innecesarios de la imagen, como metadatos y perfiles de color adicionales, que aumentan considerablemente el tamaño de la imagen.
Prueba una de estas herramientas a continuación y tendrás tus imágenes optimizadas para la web, con un tamaño de archivo mucho más pequeño, en segundos.
- TinyPNG (esta la uso a diario)
- TinyJPG
- Compressor.io (esta la uso a menudo)
Estas herramientas funcionan prácticamente de la misma manera, por lo que puedes elegir la aplicación con la que te sientas más cómodo.
Te aconsejo marcar como favoritos en tu navegador para acceder rápidamente, pues usarás estas herramientas a diario cada vez que trabajes en tu sitio web.
4. Utiliza un plugin de compresión de imágenes para WordPress
En WordPress, puede seguir los tres pasos anteriores y aún reducir algunos kilobytes en tus archivos de imagen.
¿Cómo? Instalando un plugin como WP Smush.
Lo realmente asombroso de este plugin es para configurar y olvidar. Simplemente activa el plugin y cada vez que cargues nuevas imágenes a WordPress, funcionará silenciosamente en segundo plano y optimizará automáticamente tus imágenes.
Otros archivos que puedes reducir o comprimir para una mayor optimización
También puedes optimizar otros archivos para tu web.
Si cargas documentos, archivos de presentación, etc., también puedes optimizarlos para su uso en la web.
Estos son algunos:
1. Hojas de estilo CSS
Hay varias formas de reducir el tamaño de los archivos CSS.
El más popular es minificar tu CSS. Básicamente, esto significa reducir los espacios en blanco en tu código CSS.
Puedes usar CSS Minifier, una herramienta web gratuita, para minimizar tu CSS.
Otras técnicas de reducción de CSS incluyen el uso de sprites de imagen, la reducción de código innecesario o duplicado, la colocación de CSS en la parte superior (en el encabezado) y los códigos JavaScript en la parte inferior.
2. JavaScript
Al igual que CSS, también es posible comprimir tus archivos JavaScript.
Puedes utilizar una herramienta en línea como JS Compress para reducir tus archivos JS hasta en un 80%.
3. HTML
El código HTML también se puede reducir al igual que CSS y JavaScript.
Puedes utilizar una herramienta como HTML Compressor para comprimir el código y acelerar tus páginas web.
4. Archivos PDF
Si estás construyendo una lista de suscriptores para hacer email marketing (deberías), es probable que estés regalando un lead magnet, un curso gratis, una lista de verificación gratuita, etc.
A menudo, estos obsequios vienen en forma de archivos PDF. Para reducir el tamaño de tu archivo PDF, puedes utilizar un compresor en línea como PDF Compressor.
5. Documentos de Microsoft Office (Word, Excel, PowerPoint)
Los documentos regulares de Microsoft Office basados en texto no son archivos pesados.
Sin embargo, cuando insertas gráficos como fotografías, contribuyes a tamaños de archivo más grandes. Lo que puedes hacer es hacer clic en las imágenes que deseas comprimir. Esto abrirá el menú Herramientas de imagen. Haz clic en «Comprimir imagen«. A continuación, verás las opciones de compresión.
6. Videos
No solo se trata de optimizar imágenes para web. Si subes videos a tu servidor web, es importante que reduzcas el tamaño de tus archivos de video.
Esto se debe a que los videos pueden consumir fácilmente cientos de megabytes incluso para videos que solo duran unos minutos.
Puedes usar una herramienta de código abierto como HandBrake para reducir el tamaño del archivo de tu video.
Alternativamente, puedes simplemente cargar tu video en YouTube o cualquiera de sus alternativas e incrustar el enlace en tu sitio web. De esta manera, no utilizarás ningún espacio en tu servidor.
Concluyendo:
Si deseas que tu sitio web cargue más rápido, debes trabajar para reducir el tamaño de los archivos.
Necesita saber qué archivos acaparan el espacio de tu servidor y ralentizan tu sitio.
Utiliza las técnicas para optimizar imágenes para web y otros archivos que hemos compartido en esta guía para finalmente obtener el sitio rápido que deseas.
Y no olvides considerar usar un plugin de caché.
