Tutorial optimizar y reducir imágenes para web

Tutorial optimizar y reducir imágenes para web

26 Abril, 2017 0 Comentarios2


Tutorial optimizar y reducir imágenes para web
4.5 (90%) 2 votes

A todos los desarrolladores siempre nos trae de cabeza los problemas con imágenes pesadas que hacen que nuestras web carguen lentas, en este tutorial voy a explicar los trucos para optimizar las imágenes, tratando de no perder calidad. El tutorial lo vamos a dividir en dos partes:

  • Usando herramientas online externas (Tinypng y Optimizilla)
  • Directamente desde nuestro pc mas en concreto Mac (Automator y SIP)

Dentro de las herramientas online gratuitas para reducir imágenes, la principal es Tinypng :

 

Desde tinypng podemos reducir el tamaño de nuestras imágenes hasta un 70% sin perder calidad apreciable, vale tanto para imágenes .png como .jpg , pero donde notamos la mayor reducción es en .png, las cuales son por defecto más pesadas.

Permite hasta un máximo de 20 imágenes al mismo tiempo, y cuenta con un sistema de arrastrar y listo fantástico, no hay escusa para no usarlo con cada imagen que subamos a nuestra web.

Como extra, tiene una opción de pago, la cual cuesta 50 USD, con está opción obtenemos un plugin para Photoshop, muy útil si necesitamos optimizar gran cantidad de imágenes desde nuestro pc.

La siguiente herramienta es Optimizilla , la características son muy similares Tinypng, también está limitada a 20 imágenes al mismo tiempo. El añadido de Optimizilla es que permite elegir el tanto por ciento de compresión de cada imagen, así como también cuenta con una vista previa ampliada del resultado. Con está herramienta podemos reducir aun más que con Tinypng, pero también acusaremos una perdida de calidad palpable si comprimimos demasiado.

 

Optimizilla

Reducir el tamaño de imágenes en MAC desde Automator

Si tenéis un Mac y no conocéis aun automator, deberías replantearos la compra de ese precioso Mac,  Automator permite realizar procesos repetitivos con un click, como puede ser renombrar mil imágenes con un patrón, ejecutar scripts, macros y un montón de herramientas y procesos con un click.

 

automator

En nuestro caso lo que nos interesa es ajustar el tamaño de imágenes para ello:

  • Abrimos automator y hacemos click en nuevo flujo de trabajo

Automator flujo

  • Vamos a la carpeta donde se encuentran las imágenes que deseamos cambiar el tamaño, seleccionamos todas las imágenes y las arrastramos a automator. En nuestro caso, estábamos optimizando una app, esa app no reducía las imágenes del perfil que los usuarios, os podéis imaginar, imágenes de 2 MB para insertar en un recuadro de 300px…
  • Ahora dentro de la biblioteca de automator, vamos a Fotos y arrastramos al fujo “Ajustar tamaño de las imágenes” , y seleccionamos el tamaño máximo en pixeles que deseamos, nos os preocupéis por las proporciones de las imágenes, ya que automator las mantendrá.

 

  • Le damos al Play y si todo fue bien, ahora las imágenes estarán reducidas a un máximo de 300px.

Automator resultado

Desde Automator también se puede cambiar el tipo de imagen, por ejemplo si teneis mil imágenes en .png y no necesitais caracteristiucas de PNG como lo son la transparencia, entonces conviene pasarlas a .jpg . Esto podemos hacerlo con un solo click :

Atomator guardar en jpg

La pega de Automator es que no te permite seleccionar la calidad de las imágenes JPG, la verdad se hecha mucho en falta está característica y no entiendo como aun no cuenta con ella. Pero no hay problema para los PROS y no tan PROS, tenemos la opción de SIP.

Convertir y reducir calidad de imágenes en Mac desde la consola con sip

Para ello necesitamos abrir una instancia del terminal/consola , y situarnos dentro del directorio de las imágenes que queremos reducir, por ejemplo en nuestro caso tenemos una carpeta en el escritorio con nombre users, entonces escribimos:

cd /Desktop users

Una vez estamos situados en el directorio a reducir, lo ideal es crear un directorio nuevo dentro del que estamos para almacenar allí las imágenes reducidas, hacemos lo siguiente:

mkdir resultado

Bien ya temos todo para ejecutar el comando sip, en nuestro caso vamos a reducir todas las imágenes que se encuentran en la carpeta users y las vamos a almacenar en la carpeta resultado con un 70% de reducción de calidad y también vamos a cambiar el tipo de imagen a JPG:

sips -s format jpeg -s formatOptions 70 *.* --out

Eso es todo por ahora, ya no tenéis escusa para mantener imágenes pesadas en vuestra web, algo que google penaliza bastante.

Soy Ing. de Telecomunicaciones, diseñador/programador desde hace 8 años, los últimos 3 centrado en el desarrollo de Apps .

Además de muchomasquewebs.com mantengo bepremium.es. En lo personal un apasionado del Windsurf y surf , en general todo lo que tenga que ver con el mar, como afición friky que todo ingeniero debe tener, me encanta el aeromodelismo.

Si queréis contactar conmigo directamente podéis hacerlo a jose.revenga@muchomasquewebs.com




Soy Ing. de Telecomunicaciones, diseñador/programador desde hace 8 años, los últimos 3 centrado en el desarrollo de Apps .Además de muchomasquewebs.com mantengo bepremium.es. En lo personal un apasionado del Windsurf y surf , en general todo lo que tenga que ver con el mar, como afición friky que todo ingeniero debe tener, me encanta el aeromodelismo.Si queréis contactar conmigo directamente podéis hacerlo a jose.revenga@muchomasquewebs.com