Optimizar Imágenes Para Web Online, Offline y en WordPress

▷Cómo Optimizar Imágenes Para Web Online y en tu escritorio sin perder calidad ✔️ Optimizar las imágenes de WordPress ✔️ Super Guía.

Hace tiempo que Google considera la velocidad de carga un factor de posicionamiento web. En esta guía encontrarás los tutoriales, herramientas, plugins y programas online para optimizar imágenes para web sin perder calidad.

Veremos como recortar, reducir el tamaño de fotos y comprimir imágenes para web para reducir su peso y así optimizar la velocidad de carga de tu web, mejor la experiencia de usuario y con ello conseguir un mejor posicionamiento en Google.

Si quieres pasar directamente a la acción los contenidos más prácticos están marcados con un ?.

Las cuestiones relacionadas con las imagenes suelen dar bastantes quebraderos de cabeza a quienes están montado su web o blog. Escribir ya es complicado pero el trabajo con imágenes lo es más para quien no esta habituado.

Como ya sabes las imágenes son una parte muy importante del diseño y potencian el atractivo de los textos facilitando su lectura.

En este otro artículo: Los mejores Bancos de imágenes gratis sin registro, te cuento la importancia de las imágenes en el diseño web y donde puedes conseguir imágenes gratis para tu blog o página web.

Optimizar las imágenes de tu web es muy importante

El tamaño de los archivos de imagen que introducimos en nuestras páginas es crucial a la hora de hacer una optimización de nuestra web y acelerar la velocidad de carga.

En este artículo vamos a ver una serie de técnicas y programas con los que reducir el tamaño de la imagen al máximo, para conseguir que tenga el menor impacto posible.

La imagen de abajo refleja la influencia de las imágenes en la carga de la página de inicio de VivirTuweb. Todas las imágenes están optimizadas y aún así son las culpables de la mitad del peso y peticiones al servidor de la página.

Dicho de otra manera, el tiempo de carga de los archivos de imagen es la mitad del tiempo total de carga de la web.

En la página de Google pagespeed insights puedes analizar tu web y ver que medidas puedes adoptar para reducir el tiempo de carga de tu web.

4 Razones para optimizar las imágenes de tu web

Estas son algunas de las razones por las que te conviene optimizar tus imágenes.

▶ Conseguir que tu hosting funcione adecuadamente. Cuando contratas un hosting contratas una determinada cantidad de espacio digital.  Si no te molestas en cambiar el tamaño de las imágenes puede que tu servidor tenga problemas de espacio. 

▶ Mejorar la velocidad de carga. Si tus imágenenes están optimizadas cargan rápido. Las imágenes son los elementos que más ralentizan la velocidad de carga de una web.

  ▶ No perder visitas ni tráfico en tu web y cuidar la experiencia del usuario. Si tu web tarda más de 2 segundos en cargar es muy probable que tus visitas vuelvan a la página de resultados de Google y no vuelvan nunca más.

▶ Mejorar el SEO: Google posiciona en los primeros resultados las páginas que considera más relevantes para las búsquedas de los usuarios. Pero también tiene en cuenta la experiencia de usuario y no se puede tener una buena experiencia de usuario si no tenemos una buena velocidad de carga.

Factores a mejorar al Optimizar Imágenes para Web

A la hora de optimizar imágenes para la web intentaremos reducir al máximo el tamaño de archivo.

▷ Tamaño de archivo de una imagen: Es el tamaño digital del archivo de imagen calculado en kilobytes (K), megabytes (MB) o gigabytes (GB). También se le llama peso.

El tamaño de un archivo depende principalmente de los siguientes elementos:

▷ Dimensiones de la imagen largo X ancho. Cuanto mayores sean las dimensiones mayor será el tamaño del archivo.

▷ Formatos de archivo: Los tipos de archivo que utilizaremos para imágenes web serán:

• Jpg: Para fotos e imágenes con mucha variedad tonal. Permite comprensión. Se degrada cada vez que lo comprimimos.

• Png: Para imágenes con transparencias, ilustraciones y capturas de patalla. Permite compresión.

• Gif: Para imágenes en movimiento, imágenes pequeñas con texto y logos.

▷ Compresión: Es una técnica que permite reducir el tamaño de los archivos.

▷ Lazy load: Carga diferida, las imágenes se cargan según las vaya necesitando el usuario.

Supongamos que el espacio que tu  plantilla reserva para la imagen superior de tus post es de 800 px. Descargas de Pixabay una imagende 1200 píxeles de ancho que es el tamaño más aproximado y la subes para ocupar ese lugar.

WordPress mostrará la imagen con esos 800px, nos sobrarán un 30% con la sobrecarga que eso supone.

Lo ideal es darle a esa imagen las dimensiones que necesitamos 800 píxeles de ancho y ya de paso comprimirla y darle un formato de archivo adecuado para reducir el tamaño de archivo todo lo que podamos.

? Cómo optimizar imágenes para web paso a paso

⚠️ Cada vez que guardamos un archivo JPG lo estamos comprimiendo de nuevo, y cada vez que se comprime pierde calidad. 

Cada vez que guardamos un JPG reducimos su calidad. Si recortamos un archivo en un programa, lo comprimimos en otro programa, y después en nuestro WordPress tenemos un plugin de optimización de imágenes perderemos mucha calidad.

Como norma general intentaremos usar un programa que nos solucione todo el proceso, y lo haremos antes de subir las fotos a nuestra web.

De esta manera además de optimizar imágenes en nuestra web también optimizamos ahorrándonos el uso de un plugin. De cualquier manera en este post verás como puedes reducir tamaño de fotos y comprimir imágenes para web de todas las formas posibles.

Cómo optimizar imágenes para web paso a paso:

▶ 1.- Descubrir las dimensiones correctas para la imagen, en función del sitio que vaya a ocupar en la web.

▶ 2 .- Recortar. Si sólo nos interesa un trozo de la imagen tendremos que hacer un recorte, si no nos saltamos este paso.

▶ 3.- Redimensionar imágenes. Cambiamos las dimensiones originales por las necesarias para el espacio que va a ocupar en la web.

▶ 4.- Comprimir las imágenes para que sean lo mas livianas posible.

Con esto tendremos nuestras imágenes totalmente optimizadas, en WordPress para mejorar aún más la velocidad de carga podemos usar algún plugin de Lazy Load (carga diferida)

? Cómo saber las dimensiones correctas para optimizar tus imágenes

Para saber las dimensiones que tienen que tener las imágenes en función del lugar que ocupen en nuestra web utilizaremos el inspector de elementos. Lo podremos encontrar:

▷  Google Chrome: Metodo 1: atajo de teclado: (Ctrl + Mayúsculas + I) Metodo 2: Botón derecho > Inspeccionar.

▷  Firefox: Metodo 1: (Ctrl + Mayúsculas + C) Metodo 2: Botón derecho > Inspeccionar elemento

▷  Internet Explorer: Metodo 1: (F12) Metodo 2: Botón derecho > Propiedades

▷  Safari: Desarrollo > Mostrar inspector web

? Programas para Optimizar Imágenes para Web en tu Ordenador

Este tipo de herramientas puede tener una curva de aprendizaje un poco más larga, pero a cambio hacemos todo el proceso en el mismo programa, sólo tendremos que aprender a manejar uno y con programas como GIMP o Photoshop la imaginación es el límite.

? GIMP Portable: Recomendado Gratuito

Optimización de imágenes para web sin perdida de calidad com Gimp

GIMP es una herramienta de manipulación de imágenes, libre y gratuita y multiplataforma funciona con windows, Mac y GNU/Linux. Está a la altura de Photoshop y tiene una interfaz similar. Puestos a aprender a manejar un programa de manipulación de imágenes es sin duda la mejor opción. Es el que suelo utilizar para optimizar mis imágenes.

Con GIMP puedes hacer todo el proceso de optimización dentro de la misma herramienta, Recortar, reducir tamaño imágenes y comprimir fotos, evitando deteriorar la calidad de las imágenes.

El enlace te ofrece descargar una versión portable, no lo tienes que instalar en tu ordenador, puedes tenerlo en una carpeta o llevártelo contigo en un USB.

Photoshop: Herramienta de pago

Es el estándar de la industria, tiene herramientas para recortar y bajar el tamaño de imágenes cambiándoles las dimensiones, es un buen compresor de imágenes, permite comprimir archivos JPG,PNG y Gif , si te lo puedes permitir es una buena herramienta, de lo contrario con Gimp podrás hacer las optimizaciones necesarias y lo que aprendas te servirá si en un futuro decides dar el salto a Photoshop.

Paint: Recomendado Gratuito

Este programa que ya viene instalado en nuestro Windows es suficiente para cambiar el tamaño de las fotos, nos permite recortar y cambiar el tamaño de la imagen, suficiente si tenemos instalado un plugin compresor de imagenes en nuestro wordpress . De lo contrario para acabar de optimizar las imágenes debemos subirlas a una aplicación de compresión de imagenes online como TinyJPG.

• 

• 

Recortar imagen con Paint: izda.

1.- En el menú superior click en 1 Recortar >> 2 selección rectangular, click izquierdo en el ratón y abarcamos la zona que deseamos conservar. Alrededor de la selección quedan una serie de «tiradores» con los que podemos modificar su tamaño. 3 En todo momento veremos las dimensiones del recorte y el tamaño de archivo en la barra inferior.

Cambiar el tamaño de una imagen con Paint: dcha.

En el menú superior click en Cambiar de tamaño, en el cuadro de dialogo seleccionamos Píxeles y ponemos la medida que queremos que tenga el lado mayor de nuestra foto en nuestro caso 800 Px. La foto tenía un ancho de 5589 px, tras colocar el nuestro de 800 el tamaño del archivo a bajado de 5 MB a 87,5 KB.

RIOT: Gratuito

Una completa herramienta de escritorio para optimizar imágenes, recortar, achicar imágenes y comprimir archivos, escoger el formato de imagen JPG y PNG y GIF, y eligir el nivel de compresión para no degradar la calidad de la imagen.

Puedes hacer el proceso de optimización de imágenes completo, además tiene otras herramientas básicas de mejora de imagen como Brillo,Contraste y Gamma. Tiene una versión portable no tienes que instalarlo en tu pc y puedes llevartelo en un usb.

FastStone: Gratuito

Visor con el que catalogar etiquetar y comparar fotos y editor para reducir tamaño imágenes y comprimir fotos. Soporta todo tipo de formatos de imagen incluido RAW de cámara.

ImageOptim: Gratuito

Compresor de imágenes para MAC. Optimiza las imágenes, removiendo los metadatos y podrás comprimir imágenes PNG, JPG, y GIF.

? Herramientas Para Optimizar Imágenes Para Web Online

Estas aplicaciones de optimizar imagenes para web online son un poco latosas, según el navegador que utilices funcionarán o no. Unas necesitan WebGL, otras Flash…

No suelen admitir compresión de imágenes, con lo cual tendrás que usar dos herramientas, con la consiguiente perdida de calidad. La excepción es PIXLR.

? PIXLR : Recomendado Gratis

La mejor aplicación para optimizar imágenes para web online. Puedes cambiar tamaño de fotos online, recortar, reducir el tamaño de tus fotos y comprimir imágenes eligiendo el nivel de compresión para no degradar la calidad de imagen.

Permite guardar las imágenes en formato Jpg o Png y ponerles un nombre adecuado para SEO. También tienes cantidad de herramientas de retoque con las que hacer casi cualquier cosa.

Canva Photo Editor: Gratuito

Aplicación online gratuita para disminuir el tamaño de las fotos, múltiples utilidades recortar, bajar tamaño fotos, girar y añadir formas y textos, no admite compresión. Necesitarás otra herramienta para comprimir fotos.

Fotor: Gratuita

Herramienta para optimizar imágenes online, múltiples utilidades recortar, cambiar tamaño, redimensionar, girar, tono, color, viñeta, curva. No admite compresión de imagenes. Necesitarás otra herramienta para comprimir imagenes.

Fotojet: Gratuita.

Para cambiar el tamaño de las fotos y optimizar imagenes para web online . Similar a los dos anteriores, la publicidad y un tamaño de archivo de salida demasiado grande lo hacen menos útil para la optimización de imágenes para web.

? Compressor.io: Gratuita

Herramienta online para comprimir fotos. 2 tipos de compresión, con pérdida y compresión sin pérdida. Puedes guardar para web en los formatos PNG -JPG – GIF – SVG. Buenos algoritmos de compresion.

Optimizilla: Plugin gratuito

Programa para comprimir imágenes online. Eliges la calidad de la compresión mediante una barra de deslizamiento.

El programa calcula el nivel de compresión de imágenes adecuado y después se puede desplazar la barra aumentando o disminuyendo los niveles de calidad.

TinyPNG: Plugin Gratuito

Herramienta online para optimizar imágenes. Comprime imágenes para web, puedes elegir entre los formatos JPEG y PNG. Buenos algoritmos de compresion.

? Recortar y redimensionar imágenes en WordPress

? Plugins para Optimizar Imagenes en WordPress

⚠️ Antes de utilizar este tipo de plugins tienes que hacer siempre una copia de seguridad, siempre puede haber un error de funcionamiento o de compatibilidad

Plugins wordpress para compresión de imagenes

Estos plugins de imagenes para wordpress se encargan de comprimir imágenes que ya están en tu biblioteca de medios y las que vayas subiendo. Utilizarlos siempre previa copia de seguridad.

Lo mejor es utilizarlos para ajustar las imágenes que ya tenemos dentro de nuestro WordPress y después desinstalar el plugin y optimizar imágenes antes de subirlas.

WP Smush: Gratuito y de pago.

WP Smush. Este plugin para WordPress es un optimizador automático, para comprimir fotos que ya están subidas a tu web. Es de los más conocidos, puedes comprimir JPG, PNG y GIF.

La versión gratuita es suficiente para reducir el tamaño de las fotos y optimizar el peso, la versión de pago que ofrece mayor compresión de imágenes y algunas opciones más. El plugin se encarga de optimizar las imágenes que vayas subiendo a tu WordPress sin perder mucha calidad.

WP Smush incorpora también lazy load. Este recurso puede disminuir mucho la velocidad de carga de tu web. Lo que hace el plugin es que no se carguen las imágenes hasta que vayan apareciendo en pantalla.

EWWW Image Optimizer: Gratuito

Es uno de los plugins para optimizar imagenes en wordpress más utilizados. Se encarga de comprimir fotos ya subidas a tu web. Ayuda a reducir el peso de las imágenes tu biblioteca de medios y de otros rincones de tu web conservando la calidad.

El plugin se encarga de comprimir imágenes sin perder calidad, puedes comprimir PNG , JPG y GIF .

Otra alternativa podría ser Shortpixel image optimizer.

Imsanity: Gratuito

Está pensado para ajustar el tamaño de las fotos , se encarga de redimensionar imágenes dándoles unas dimensiones razonables, que debes establecer previamente. Indicado si subes imágenes muy grandes.

 Imagify: Gratis y de pago (gratis hasta 25MB/mes).

Imagify image optimizer: Herramienta para comprimir imágenes sin perdida de calidad y optimizar imagenes en wordpress sin estresar tu servidor, también pude hacer una copia en formato WebP. Este formato es el futuro, ofrece una compresión de calidad con un tamaño de archivo mucho menor.

Por ahora WebP (como JPEG 2000 y JPEG XR) no es un formato de archivo nativo de WordPress y no todos los navegadores lo admiten, por lo que su implantación es un poco compleja.

Compress JPEG & PNG images: Gratuito

Plugin compresor de imágenes, es un optimizador automático que utiliza los algoritmos de compresión de TinyPNG. puedes utilizarlo para optimizar imagenes en wordpress gratis, con un límite de 100 imágenes al mes.

Plugins para lazy Load en wordpress

Antes de instalar un plugin de Lazy Load en WordPress comprueba que tu tema no tenga la opción, WP Smush incorpora Lazy Load, también algunos plugins de caché gratuitos como Swift Performance Lite, Autoptimize o Litespeed la tienen incorporada.

Lazy load definición: Se llama así a la carga diferida de las imágenes de una web, sólo se cargan a medida que el usuario se va desplazando por la pantalla y necesita verlas. Esto trae consigo una mejora evidente en la velocidad de carga.

Lazy Loader: Gratuito

Complemento de carga diferida que admite imágenes, iFrames, elementos de video y audio y utiliza el script ligero lazysizes.

a3 Lazy Load: Gratuito

a3 Lazy Load es un plugin orientado a móviles y muy sencillo de usar que acelerará la velocidad de carga de las páginas web.

Como ya hemos visto antes es mejor hacer el trabajo de optimizar imágenes antes de subirlas. Esto ayudará a optimizar también nuestro WordPress ahorrando plugins.

Por otro lado conviene utilizar una sola herramienta para todo el proceso, con el fin de no degradar la calidad de nuestras imágenes más de lo necesario.

Con todas las herramientas que hemos visto, ya no tienes disculpas para no optimizar imágenes para web online, en tu escritorio o en WordPress y así, mejorar tu posicionamiento SEO.

? Créditos de la imagen principal del articulo: Vector de PNG creado por freepik ?

¿Conoces alguna herramienta que merezca estar en esta lista?

Te leo en los comentarios.