Ayuda al rendimiento de tu página Web.
Mejora la visualización para el usuario.
Obtienes mejor velocidad de carga.
Le gustas más a Google.
Como ves, todo son ventajas si optimizas las imágenes para tu página web. No pierdes nada, solo dedicarle algo de tiempo. Tienes que hacer lo mismo, el mismo proceso, algo sistemático con todas tus imágenes.
En mi caso, una vez que tengo recopiladas todas las fotos que voy a utilizar en una carpeta, las abro con la herramienta photoshop y es ahí cuando empiezo mi primer paso para ir optimizando.
Para la gente que no utiliza photoshop o no tiene esta herramienta, hablaré de otras alternativas.
Pues vamos a ello. ¡¡¡Comenzamos!!!🚀
Formato de imágenes para web
Seguro que ya conoces, algunas extensiones como jpeg, png, gif…igual no tanto si hablamos de svg o Wbmp.
Para explicarte de una forma sencilla, las tres primeras son formatos de imagen que usan pixel, (esos cuadraditos de colores) cada formato usa mas o menos pixel.
En el caso de SVG, es un formato vectorial, que usa lineas. Me encanta este formato para iconos, separadores e imágenes lineales.
Es un formato muy limpio y claro a la hora de visualizarlo, se pueden agrandar lo que quieras y no pierde calidad como en el caso de las imágenes con los pixeles.
Y últimamente muy de moda el formato Wbmp, que en photoshop ya te deja utilizar, pero que a mi juicio y propia experiencia , aun hay dispositivos y navegadores que no leen este formato y no muestra la imagen.
La cuestión de optimizar las imágenes, es trabajar de una forma «limpia», por ganar en velocidad y en definitiva, si optimizamos será bueno para nuestro usuario, para SEO y para nosotros mismos. Pero eso si, todo el proceso que te voy a enseñar dentro de una justa medida.
Hay que reducir tamaño y espacio de imágenes sin perder calidad, ni ponérselo difícil a los navegadores.
Para que lo entiendas mejor, nosotros vamos aprender hacer algo necesario, soy apasionada de la fotografía y a la hora de Diseñar sobretodo Web, veía que mis trabajos no se podían enseñar así con la calidad que yo las hacia, ¿por qué?
Pues porque mi cámara hace fotos en un tamaño de 5200px, es decir para ver esa fotografía 5 pantallas de ordenador juntas, para que me entiendas.
Por lo tanto si la subo a la web, la estoy presionando y metiendo en una caja que tiene límite, ya que tenemos un contrato de servidor limitado en la mayoría de los casos, y que una página web, que tenga una capacidad de 1MB, tarda unos 3 segundos en ser mostrada.
Vas entendiéndolo mejor así?
Para qué subir una fotografía de gran tamaño, si se va a ver en una web con una máxima de resolución de 1200px si fuera una imagen para portada, si es para otro apartado seguro que con 500 px es suficiente.
Y no tenéis porque hacerlas con una cámara profesional como la mía, hoy en día los móviles ya pueden llegar hacer fotografías hasta de 3000px, por lo que antes de subirlas vamos adaptarlas al tamaño y peso que vamos a necesitar.
¿Y cómo sé el tamaño que necesita? Aquí te dejo un video explicativo, mostrándote como saber el tamaño.
Una vez que pongamos el tamaño justo, ya reduciremos el peso de las imágenes.
Optimizar imágenes
-
Tamaño
Infografia de medidas en px para web
Como veis aquí, las imágenes tienen un ancho y alto en las imágenes. Si sabemos el tamaño que va a ocupar en la web, como os he explicado en el video anterior, podéis haceros una idea, viendo otras web.
O si sois como yo que diseñas el boceto de la web en photoshop antes de pasarla a WordPress, ya tienes las medidas que vamos a necesitar.
Una vez que sabemos el tamaño, y tenemos una imagen el doble o triple. Utilizaremos o photoshop o Gimp un programa gratis que puedes descargar desde su propia pagina web. Aquí
Optimizar las imágenes con Photoshop
Optimizar las imágenes con Gimp
Si usas Windows también tienes una herramienta de paint, que es gratuita, que te deja redimensionar las imágenes en windows, seleccionando el tamaño que quieres que se aplique en tus imágenes.
-
Peso de las imágenes
Por otra parte las imágenes tienen un peso , y es muy importante para la optimización y velocidad de tu página, que controles este peso, que es lo que ocupa en un espacio. Y en este caso afecta y mucho en la velocidad de la carga, en que la imagen se quede sin terminar de cargar.
Y todo esto hará que google no valore tu web y que el usuario, no tarde ni 30 segundo en esperar a que se cargue y perderás clientes.
En este apartado no hay una regla exacta del tamaño ideal de la imagen, todo va en relación al lugar que va a ocupar en la página. Pero si decirte que un mega es una salvajada por imagen. Yo en mi caso no suelo dejar que pesen mas de 150 kb. Pero como te he dicho hay excepciones.
Para comprimir las imágenes, tenemos un montón de herramientas. Yo como siempre os muestro con la que trabajo yo personalmente, la que conozco de antemano.
TinyPNG o tinyJPEG. Ambas son online y gratuitas. Yo antes, les pongo el tamaño ideal en photoshop como hemos visto en los videos anteriores, ya que esta herramienta no te deja subir imágenes muy pesadas. Lo peor de esta herramienta online, es que te limita la carga de 20 imágenes.
Tamaño para diferentes dispositivos
Aquí os dejo esta imagen, donde veis el tamaño de ancho que usan los dispositivos para abrir la página web.
Tamaños de imágenes que podemos usar en la página web
En este caso, os dejo la plantilla que yo uso con una tema de GeneratePress, que tengo configurada a 1140 px de ancho completo de pantalla.
Este matiz es muy importante, ya que depende del tamaño inicial que usemos. Si no usas esta misma, os podéis hacer una idea.
Plugin para optimizar
Al igual que con todo, hay muchos plugin que ayudan a reducir el peso de las imágenes, incluso el propio hosting dispone del uno, pero yo os voy hablar con él que trabajo yo que es WP Smush, es gratuito, está en el repositorio de WordPress.
Este plugin es instalarlo y olvidarte de la optimización, ya que el solo, detecta las imágenes y las comprime. Es conveniente que luego observes la web, pero en mi caso, sobretodo en webs de Restaurante donde un plato de comida entra mejor por los ojos y tiene que ser de buena calidad.
En este caso, no optimizo con tynipng, solo adapto su tamaño en photoshop y con este plugin me olvido y quedan de calidad y no empeora la velocidad de carga.
Espero que hayáis entendido la importancia de tener una página web que esté bien optimizada sus imágenes, que le dediques un poco de tiempo en ponerles el tamaño que van a usar. No es algo que tienes que estar haciendo todos los días, con una vez te bastará. Haz las cosas bien, que luego temen su recompensa.
Pon a régimen tu web, optimiza sus imágenes y vuela en primera clase. 😂😂😂
También te puede interesar:
¡Gracias María! La verdad es que tengo problemas con las imágenes de cabecera de mis post, porque les quito peso y en la páginal de entrada a veces se ven con mala calidad, y cuando entras en el post en si, se ve bien.
Probaré tus truquis.
Un abrazo
Es un problema muy común, por eso el utilizar el photoshop que en estos casos ya te viene la pestaña de exportar para web y te optimiza sin perder calidad y ves el resultado en 4 ventanas para elegir la que mejor veas. ¡¡¡Una pasada!!! y muy importante hoy en día para el wpo de nuestra web, y ofrecer calidad a nuestros usuarios. Cuesta poco hacerlo, y a la larga se agradece.
Cualquier duda, por aquí me tienes.
Un abrazo, Isabel.
Excelente post Maria, sin duda me sumo a volar en primera clase. Y para ello gracias a este post me va a resultar mucho más sencillo.
Gracias
Genial Jorge, es así. Poco nos cuesta seguir estos pasos, y poder hacer de nuestra web rápida. Nuestros usuarios, google y nosotros mismos lo agradeceremos.