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:
Índice de Contenidos
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í ?.
Sin comentarios