Optimizar imágenes para web

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.