De todos es bien sabido y más últimamente que las imágenes están tomando un valor muy importante en las páginas webs y tiendas online.

Las imágenes hacen más atractivo el contenido e incluso hace que los lectores premanezcan más tiempo navegando por la web.

Pues bien, para hacer un buen uso de estas imágenes y que nos ayuden a posicionar tienen que estar optimizadas para que a Google “le gusten” y que la página web no tarde en cargar más de lo esperado.

A continuación vamos a enumerar algunas buenas prácticas y recomendaciones para aplicarlas a todas y cada una de las imágenes que vayamos a subir a nuestra página web.

Reducir tamaño fotos e imágenes sin perder calidad en jpg o png con Photoshop

Redimensionar cada imagen al tamaño real que se vaya a usar en la página web. Con ello evitamos cargar imágenes más grandes y por tanto con más peso lo que ayudará notablemente a la velocidad de carga de la web.

Lo primero que debemos saber es cuándo debo utilizar jpg y png. La extensión png se utiliza normalmente cuando queremos hacer algún tipo de transparencia y jpg cuando no necesitamos ese efecto puesto que generalmente pesa menos.

Vamo a ver un ejemplo de cómo se reduciría una imagen para nuestra web. Una fotografía que nos han mandado directamente de una cámara fotográfica con buena calidad. Al ir a propiedades de la imagen y “Detalles” nos indica que su tamaño es de 5184×3456 pixeles con una resolución de 300ppp con el formato jpg y que tiene un tamaño de 7,41 Mb.

Hay que tener en cuenta que las webs actualmente se están diseñando con un tamaño de 1200 pixeles de ancho, por tanto la imagen que tenemos es 5 veces superior al tamaño de lo que necesitamos para una página web, vamos a reducirla con el redimensionador de imágenes de Photoshop, le indicaremos además que la queremos a 72ppp ya que no necesitamos más al visualizarse en pantallas.

Iremos al menú Imagen -> Tamaño de imagen

Redimensionamos al tamaño de 350×233 pixeles y 72 pixeles por pulgada.

Optimizar imágenes para web Photoshop

Además de reducir el tamaño también es importante que nuestra imagen pese lo menos posible para ayudar a que cargue más rápido la página web.
En ese caso vamos a indicar como utilizar Photoshop para guardar de forma optimizada la imagen. Dentro del menú vamos a Archivo -> Guardar para web y dispositivos.

Reducimos la calidad a 30 y veremos en la parte inferior izquierda como va reduciendo de tamaño.

Le damos a guardar y ya tendríamos nuestra imagen optimizada.

Comprimir fotos sin perder calidad

Pero ahí no queda todo, aún así después de pasar nuestras imágenes por la herramienta Guardar para web de Photoshop podemos usar otras herramientas para comprimir más el peso sin perder calidad.

Para ello tenemos dos opciones: comprimir las imágenes con alguna herramienta online de las que indicamos más abajo o bien usar un programa que instalaremos en nuestro ordenador y que usaremos para tal uso.

Comprimir imágenes online

Aquí encontramos multitud de páginas web que comprimen imágenes, tanto gratuitas como de pago sin perder calidad. Enumeraremos las que vemos que más nos pueden ayudar.

Compressjpeg.com – Compresspng.com – Optimizilla.com – gratuita –

Para comprimir sólo jpg podemos utilizar compressjpeg.com, sólo para png compresspng.com y para ambas optimizilla.com. Podemos comprimir en lote hasta un máximo de 20 imágenes en .jpg o jpeg y no podemos elegir el porcentaje de compresión. La herramienta estudia cada imagen por separado y las comprime todo lo que se puede.

Iloveimg.com – gratuita –

Se suele utilizar cuando tenemos muchas imágenes para comprimir iloveimg.com. Podemos comprimir en lote hasta un máximo de 15 imágenes en .jpg, png o gif y no podemos elegir el porcentaje de compresión.

Imagesmaller.com – gratuita –

Con imagesmaller.com solo podemos ir optimizando nuestras imágenes de una en una y que no sean de más de 50Mb. Admite .jpg, jpeg y png.

Webresizer.com – gratuita –

Optimización de una sola imagen de hasta 10 Mb y nos permite cambiar algunos parámetros: dimensiones, rotación, enfoque, calidad de la imagen, bordes, exposición, contraste y saturación para cuando nos la descarguemos tengamos esas correcciones añadidas. Una cosa muy interesante es que vemos en todo momento como quedará nuestra imagen antes de descargarla.

Compressnow.com – gratuita –

Se pueden subir varias imágenes para comprimir en lote. Estas pueden ser formato .jpg, jpeg, png  gif y como máximo de 9Mb. En esta herramienta si nos permite indicar que porcentaje de compresión queremos realizar a todas la imágenes.

Convertimage.es – gratuita –

Nos permite optimizar una imagen solo de los siguientes formatos .bmp, .wbmp, .dib, .cur, .gif, .jpg, .jpeg, .jpe, .pcx, .rle, .pdf, .pict, .pct, .pic, .png, .psb, .psd, .tif, .xcf y de un tamaño máximo de 24 Mb

TinyPNG – gratuita –

Podremos optimizar hasta 20 imágenes de máximo 5Mb en formatos .jpg o png

Tiene versión de pago (25$/año) la cual nos quitará el límite de subida de imágenes y aumentará el tamaño máximo del archivo a subir a 25Mb

Compressor.io – gratuita –

No se pueden hacer lotes, pero si nos permite elegir 2 tipos de optimización y que las imágenes puedan ser de los siguientes formatos .jpg, .png, .gif y .svg y no mayores de 10Mb.

Kraken.io – pago –

Con planes desde 5$/mes hasta 79$/mes nos permite optimizar imágenes bien subiéndolas hasta un límite de Mb según el plan contratado o bien indicándole una url. Se pueden hacer 3 tipos de compresión y como opción nos permite también a la vez redimensionar las imágenes. A la hora de guardarlas una vez realizada la compresión se pueden descargar o enviarlas a algún almacenamiento en la nube directamente como es Box, Google drive o Dropbox

Programas para comprimir imágenes

RIOT (Radical image optimization tool) – freeware –

Disponible para windows y como plugin para añadir a programas como GIMP.

Nos permite optimizar imágenes en .jpg, .png y .gif permitiéndonos elegir la configuración de la compresión y realizar algunos ajustes en nuestra imagen antes de proceder a optimizarla. En todo momento tenemos la imagen original y la que en un principio hemos optimizado para ver como quedaría nuestra imagen final antes de proceder. También tiene posibilidad de hacer procesos por lotes.

FILEminimizer Pictures – freeware –

Reduce el tamaño hasta en un 98% (pudiendo elegir entre 4 diferentes compresiones) y admite imágenes en formatos .jpg, .bmp, .gif, .tiff, .png y .emf.

Una opción interesante de este programa es que tus imágenes y fotos puedes enviarlas directamente por correo electrónico o subirlas a Facebook.

XGuetzli – freeware –

Un programa muy interesante, pues se habla que usa el algoritmo de google para optimizar las imágenes además de que ofrece una interfaz muy sencilla y permite hacer la compresión por lotes y permitiendo elegir en que calidad queremos optener la imagen final

Jpegmini.com – pago –

Hablamos en este caso de un programa que tiene versiones para Mac y Windows y también tenemos versiones para añadir como complementos a programas como Abobe Lightroom y Adobe Photoshop lo que facilita su uso. Destacar de este programa su calidad a la hora de comprimir el archivo sin perder nada de calidad en la imagen.

Estas son las herramientas que entendemos son las más utilizadas hoy en día.
[mashshare]