03 Sep Como optimizar imágenes en tu web: Herramientas y trucos

Para diseñar cualquier página web o escribir nuestros post para el blog utilizamos infinidad de imágenes ya que son un recurso para que nuestro contenido aporte mayor valor a los usuarios. Pues bien, este post voy a explicarte como optimizar imágenes web, porqué es tan importante y muchas herramientas gratuitas que nos facilitan esta tarea:

Razones por la que es necesario comprimir las fotos

Disminución de la velocidad de carga

La razón principal es la reducción de la velocidad de carga de tu sitio web y esto, en consecuencia afecta a:

Posicionamiento SEO

Uno de los factores que Google tiene en cuenta para posicionarte es si tu página carga rápido o no a través de Page Speed. Es importante tener en cuenta que Google te establece un presupuesto determinado de rastreo, por tanto, cuanto más rápida sea tu página más contenido puede rastrear de tu web.

¿Cómo podemos saber si necesitamos optimizar imágenes? Podemos verlo en GtMetrix, en las recomendaciones que obtenemos al analizar cualquier web, en el Apartado Page Speed – Optimize Images.

Usuarios que acceden a tu web vía móvil

Para mejorar la experiencia del usuario: Se está extendiendo el uso de los dispositivos móviles para informarse, consultar las Redes Sociales y como consecuencia acceder a los post mientras nos  desplazamos de un sitio a otro. Dado que el consumo de datos es limitado (y más lento que la fibra que utilizamos en nuestros domicilios), si página tarda mucho en cargar es muy probable que el usuario abandone la página antes de navegar por tu web.

Reducción de espacio en tu Hosting

El Hosting, donde se aloja nuestra página web, se contrata por un espacio determinado, es decir, alquilamos una parte de un servidor. Si las imágenes ocupan poco menos espacio necesitaremos contratar o podremos utilizar el espacio restante para otro proyecto web.

Cómo medir el tamaño de las imágenes

En primer lugar para tratar las imágenes que vamos a utilizar para la web utilizamos los pixeles.

El formato de las imágenes no es estándar y puede variar de una plantilla a otra o en función de tus necesidades: Imagen de portada de una página, de un post, pequeñas fotos en tu galería etc. La herramienta que yo utilizo es la extensión de Chrome Page Ruler que nos da las proporciones exactas de la imagen.

Formato de imágenes en la página web

Las imágenes pueden tener distintos formatos. Es recomendable tener en cuenta cuál nos interesa más utilizar en función de la imagen que necesitemos utilizar:

JPEG

Se trato de un formato utilizado en la mayoría de las cámaras digitales y es así como obtendremos las fotografías que descarguemos de los bancos de imágenes gratuitos.

Si pensamos optimizar imágenes en JPEG es importante conocer que cada compresión reduce la calidad de la imagen.

Formato recomendado para Fotografías, principalmente.

PNG

Es un formato de compresión sin pérdida de calidad. La principal ventaja es que admite transparencias por lo que está recomendado para logotipos e imágenes vectoriales. Podemos escoger entre:

PNG 8: Menor peso pero con limitación de colores

PNG 24: Mayor peso sin limitación de colores (Recomendado).

SVG

Muchas imágenes vectoriales utilizan el formato SVG, ya que el peso de la imagen es menor.

GIF

Utilizado para los anuncios en Google Adwords, redes Sociales etc. Para una página web, al tratarse de un formato muy pesado, sería mejor evitarlo.

Pasos a seguir para optimizar imágenes

• En primer lugar, reducir el tamaño de la imágenes o adaptarlas a la medida que necesitemos en nuestra web. Al reescalarlas conseguimos que  el peso de la imagen disminuya.
• Finalmente, utilizar alguna herramienta online para comprimir fotos antes de subirlas a nuestra web.

Es posible que con una sola herramienta podamos realizar estos dos pasos.

Herramientas para reducir tamaño de imágenes

Befunky

La ruta sería, conceptos básicos -> Cambiar tamaño

Con ella es posible, además, retocar fotografías, de una manera sencilla.

Pixlr

Su interface es muy parecida a Photoshop y nos permite, además,  retocar la fotografía, aplicar algún tipo de degradado, cambiar el color, clonar etc.

La ventaja principal es que podemos conseguir resultados como Photoshop sin invertir dinero.

La ruta para reducir el tamaño de las imágenes sería: Imagen -> Tamaño de imagen y cambias las proporciones en PIXLR EDITOR.

I Love IMG

La ventaja principal es que permite redimensionar varias imágenes a la vez estableciendo las mismas proporciones y posteriormente descargarlas. Podemos también comprimir fotos sin necesidad de utilizar otra herramienta.

Además, transforma la imagen a varios formatos, como por ejemplo, JPG a PNG o GIF.

Photoshop

Lo empecé a utilizar en el curso de contenidos digitales y me está sirviendo mucho para optimizar mis imágenes.

Si te dedicas o piensas dedicarte profesionalmente a ello es una herramienta muy recomendada.

Herramientas para comprimir Imágenes

TinyPNG

Es la herramienta que utilizo normalmente para comprimir fotos. Hay que, al tratarse de una herramienta gratuita tiene un límite de 20 imágenes y 5MB diarios. Puedes ver este video de Rafa Arjonilla explicando cómo la utiliza:

Optimizilla

La ventaja que tiene Optimizilla  es que puedes previsualizar la imagen antes de descargarla y ajustar la calidad con el indicador situado a la derecha.

Al igual que TinyPNG puedes optimizar imágenes hasta un máximo de 20 diarias.

Image Optimizer

Con Image Optimizer es posible reducir el tamaño de la imágenes y escoger la calidad deseada.

Como optimizo las imágenes en Photoshop: Ejemplo

En este apartado voy a mostrarte como optimizar imágenes en Photoshop:

Una vez retocada la imagen que queramos utilizar para nuestra web procedemos a optmizarla.

La ruta sería –> Archivo: Guardar para web que y obtendríamos una previsualización de nuestra imagen.

En la parte rodeada puedo escoger en que formato quiero exportar mi fotografía. Es posible elegir entre PNG (8 y 24), JPEG o GIF. En el caso de JPEG, podemos seleccionar la calidad que varía desde Muy alta a Baja y pevisualizarla o compararla con la original. Puedes verlo a continuación:

En la parte inferior izquierda tenemos información del peso de la imagen, con calidad muy alta. En primer lugar voy a reducir el tamaño de la imagen a 740×488 que será la del tamaño de una imagen en mi post:

Únicamente reescalando la imagen hemos bajado su peso pasando de 281 KB a 75 KB. A continuación seleccionamos calidad muy alta y guardamos la imagen.

Utilizo posteriormente Tiny PNG para comprimir fotos y la imagen estaría lista para subir a mi web:

Infografía resumen

Conclusión

¿Como optimizas las imágenes? ¿ Me recomiendas alguna herramienta que utilices en tu día a día?. Espero que este post para optimizar imágenes web te haya resultado útil y muchas gracias por pasarte por aquí ?.