• Saltar al contenido principal

Consultora Marketing Digital · Desarrollo Web · Comunicación HomepageConsultora Marketing Digital · Desarrollo Web · Comunicación

Paula Fernández - Consultora de marketing, desarrollo web y comunicación en Santa Perpetua de Mogoda

  • Sobre mí
  • Servicios
    • Marketing Digital
    • Desarrollo Web
    • Comunicación
    • Formación
  • Portfolio
  • Blog
  • Contacto
  • Reserva tu cita
Portada » Blog » Cómo optimizar el tamaño de las imágenes para poder utilizarlas en tu web

Por Paula Fernández

Cómo optimizar el tamaño de las imágenes para poder utilizarlas en tu web

Ya la tienes. Has logrado la gran foto. Y ahora, te dispones a subirla a tu próximo post, pero… ¿está optimizada? Subir fotos directamente desde tu móvil puede hacer que la carga de tu web se ralentice mucho, perjudicando tu SEO y la experiencia del usuario. Con las cámaras que hoy por hoy incorporan los móviles, no es de extrañar que tengamos unas fotos que pesen varios megas. Incluso los de gama media, o móviles con algunos años de antigüedad pueden hacer fotos muy buenas, pero también muy pesadas.

Entrando muy poquito en la teoría, nos encontramos con tres problemas:

  • Las dimensiones (medida en píxeles)
  • La densidad de píxeles (medida en píxeles por pulgada, ppp)
  • El tamaño o «peso» (medido en bytes, Kilobytes, Megabytes)

Las dimensiones de la imagen y la densidad de píxeles, son las causas de que el tamaño crezca desmesuradamente.

Por lo general, para ilustrar una entrada o algún apartado de tu web, la foto no debería pesar más de 100 Kb.

Entonces si he sacado la gran foto y «pesa» 2, 3 o 20Mb ¿cómo hago para optimizar la foto y que no afecte a la velocidad de carga de mi web?

Hay 3 opciones:

  1. Utilizar un optimizador online: tinypng.com o kraken.io son solo dos ejemplos que funcionan muy bien.
  2. Usar dos pasos:
    • Reducir el tamaño de la foto en un editor de imágenes: recomiendo photopea.com. Es online, gratuito, y funciona perfecto para esto.
    • Pasar la imagen obtenida por el optimizador online del punto anterior.
  3. En WordPress, utilizar un plugin como Smush que se encarga del trabajo cuando subes la foto, aunque no es todo lo óptimo que nos gustaría, pero ayuda.

En cuanto a la segunda opción, utilizando un editor de imágenes prácticamente no es necesario usar la tercera. A mí me gusta trabajar de esta manera, así que voy a ir un poco más en detalle aquí.

Supongamos que mi imagen tiene este tamaño:

Ahora voy a photopea.com y empieza la magia:

Abrimos la imagen que queremos modificar y buscamos la opción Image > Image size

Aquí podemos modificar las dimensiones y la densidad (DPI). Con 72 DPI o ppp para una web es correcto. Pero las dimensiones… ¡en este caso son enormes! Una foto de 700 px se verá correcta y pesará bastante menos. Luego de modificarla, podemos ir a File > Export file as JPG y podremos elegir la calidad. Con un 70% de calidad suele funcionar bastante bien. Haz pruebas y busca la calidad que más te guste.

Una vez exportado, puedes pasar la foto por el optimizador.
En este caso he utilizado tinypng.com, y el resultado es:

Y con dos pasos sencillos, hemos reducido una foto casi 35 veces el tamaño!!!

Y la foto tras ser optimizada, se ve así:

Quizás en otras fotos y con otras dimensiones, la variación no sea tan abismal, pero seguro que será determinante.

¿Tienes alguna duda o utilizas otra herramienta o forma para optimizar imágenes? ¡Te leo en los comentarios!

Categorías: Tratamiento de imágenes

  • Sobre mí
  • Servicios
  • Portfolio
  • Blog
  • Contacto
  • Reserva tu cita

© paulafernandez.es - Política de Privacidad - Política de Cookies - Avisos Legales

Utilizamos cookies para ofrecerte la mejor experiencia en nuestra web.

Puedes aprender más sobre qué cookies utilizamos o desactivarlas en los ajustes.

Desarrollado por  GDPR Cookie Compliance
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocer cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página de privacidad y página de cookies

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa permite mejorar la experiencia en la web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!