Optimizar imágenes para web

Share on facebook
Share on google
Share on twitter
Share on linkedin
¿Quieres optimizar DE FORMA BRUTAL las imágenes de tu web? Acelera la carga de tu site a tope con imágenes optimizadas. Videotutorial nivel sencillo.

Bienvenido a la sección de Diseño del blog de WebsJC, donde encontrarás pequeñas guías y tips para hacerte la vida más fácil en cuanto al tratamiento de imágenes para subir a web o en el momento de editarlas.

Hoy, veremos, algo muy importante en la creación de sitios web, algo que muchas veces no se tiene en cuenta o no se trata a fondo. El tamaño de las imágenes.

Optimizar, Optimizar o Optimizar

Actualmente, gozamos de grandes velocidades de conexión, y creemos que una imagen de 2m no es algo a corregir cuando la subimos a una web. Es muy importante optimizar la velocidad de carga de nuestro site en todos los aspectos posibles, ya que eso le gusta a los buscadores, y, lo más importante, a nuestros visitantes y usuarios. Además de otros muchos aspectos de optimización, hay uno muy importante, como son los tamaños de las imágenes que subimos a nuestro site.

JPG o PNG

Deberemos primero elegir el formato correcto para una perfecta visualización de la misma, ya sea jpg o png, en base a transparencia o no, y a otros factores, como que sea una fotografía o una ilustración, el nivel de detalle requerido, la cantidad de colores, etc… A grandes rasgos, fotografía ,nivel alto de detalle o muchos colores, necesitaremos jpg, por el contrario, si necesitamos algún tipo de transparencia necesitaremos png. Muchas veces, la mejor formula, es exportar en los 2 tipos de formato, y elegir el que más nos convenza.

Dimensiones

Por otro lado, tenemos que tener claro donde colocaremos esa imagen, y el tamaño que ocupará. Es decir, tenemos una imagen de un paisaje, por ejemplo, tomada con nuestro móvil. Depende del tipo de celular, tenemos una imagen de entre 6m y 3200x1840px a 20m y 5120x 3840px. Una barbaridad para colocar en el site. Se puede dar el caso de que querramos tener una imagen de cierto tamaño, como en otro sitio, donde hemos visto la composición y nos gusta como queda. Podemos usar extensiones, como por ejemplo, Page Ruler, de Chrome extensions, la cual nos ofrece un detalle de tamaño al seleccionar una zona concreta.

Tamaño

Evidentemente una imagen grande tiene que cambiarse de tamaño de kb y píxels, si esa imagen acabará ocupando 600px de ancho, por ejemplo, o incluso 1400px… acabará ocupando muchos menos kb.

Y si eso pasa con muchas imágenes, acabaremos consumiendo muchos recursos de nuestro sistema de archivos de nuestro site, y aumentaremos mucho la carga del site. Es algo que hay que corregir para favorecer a un buen posicionamiento, además de las habituales operaciones recomendadas en cuando a SEO, como un nombre adecuado antes de subir la imagen.

Después de tener esos factores en cuenta, y tener nuestra imagen en jpg o png, aun podemos reducir su tamaño, mediante el uso de programas como RIOT(Radical Image Optimization Tool).

Es un programa muy liviano, donde podemos elegir una imagen, o una serie de imágenes, para proceder a efectuar unos efectos sobre ella, como recorte de tamaño en pixels, o recorte de tamaño en kb, por ejemplo. También ofrece otras características, así como soporte para gif.

Después de pasar nuestras imágenes por este programa, ocuparan hasta 10 veces menos tamaño, aumentando DE FORMA RADICAL LA VELOCIDAD DE CARGA DE NUESTRO SITE.

A continuación, tienes una serie de imágenes a las que se les ha aplicado el proceso, son  las imágenes utilizadas en el vídeo que encontrarás al final del artículo.

Puedes utilizar el siguiente “cubo” con imágenes, para ver las diferencias entre la original y las que ya están pasadas por RIOT. Si deslizas hacia algún lado cambias de imagen, también puedes pulsar encima para verla.

Como puedes observar, las diferencias son mínimas. Pasamos de tener una imagen original de 2MB, a una imagen exportada con PS o AI de 1MB, a una imagen al 100% de calidad con RIOT de 971kb, al 70% 215kb, y al 10% 117kb.

Así mismo, una vez subidas a nuestro site, podemos utilizar plugins para la optimización de imágenes, CDN, caché, compresión gzip…

En el siguiente vídeo podrás observar la ganancia al utilizar este programa, y sobretodo, la facilidad de uso y velocidad para hacer su función.

Video

Reproducir vídeo

Si te ha gustado, podrías darme un like en mi canal de Youtube, suscribirte para notificarte cuando subo vídeos o guías nuevas, y/o compartir este artículo para que otras personas puedan aprovecharlo.

Para descargar RIOT, puedes utilizar el siguiente enlace:

http://luci.criosweb.ro/riot/

Webs JC

Webs JC

Hostings

La elección de un buen hosting es primordial para el buen funcionamiento de nuestro site. Es bueno saber que nos ofrece, las limitaciones que tendremos, y las opiniones de usuarios que ya hayan utilizado esos servicios.

En esta parte de mi blog, iré explicándote lo que yo me he encontrado, y mis expeciencias en los diferentes alojamientos que he utilizado.

Josep Conesa

Otras categorías del Blog

Otros artículos de Hostings

Algunos desarrollos

Sígueme

Tip del mes

¿Hablamos?

Puedes llamarme al : 605 765 148

o enviarme un email a: hola@websjc.com

o rellenar el siguiente formulario:

Importante relativo a la protección de datos.

  • Responsable: Josep Conesa(yo mismo).
  • Finalidad: Dar respuesta a tu consulta a través del formulario.
  • Legitimación: Tu consentimiento expreso de realizarme una consulta.
  • Destinatarios: Los datos se alojarán en Alemania(UE), donde están los servidores de AwardSpace.
  • Derechos: Tienes derecho a acceder, limitar, rectificar y/o suprimir los datos enviandome un email a hola@websjc.com
  • Información Legal: Puedes consultar toda la información al respecto en mi Política de Privacidad