Optimizar imágenes para tu web

Desde que empecé mi andadura por Internet con los modems de 56kb (¡Uff! que mayor me siento :p), siempre me había estado quejando de la lentitud con la que se cargaban ciertas webs. Afortunadamente hoy en día, con las «maravillosas» conexiones de banda ancha que tenemos, ya no suelo encontrar webs que me desesperen.

Pero claro, el problema viene cuando estoy en una cafetería con una amiga y me da por enseñarle la web de alguna blogger desde el móvil. ¡Zass! De repente parece que retrocedamos en el tiempo. De todas las fotos que quería enseñarle, acabamos viendo dos o tres por culpa del tiempo que está tardando en cargar la página. Al final desisto, le paso el enlace por Whatsapp para que lo vea en su casa y cierro el navegador.

Eso es lo que le puede pasar a algún usuario de tu web si no optimizas bien las imágenes. No sólo le «pierdes» por ese día, sino que se lleva una mala impresión y seguramente no vuelva a recomendar tu sitio web a nadie más. Vale sí, estoy siendo un poco drástica, pero sólo es para marcar un poco más la importancia del post de hoy. ;)

Pero el tema no queda ahí. ¿Sabías que Google tiene muy en cuenta la velocidad de carga de una web? Entre otros factores, la velocidad de carga y el porcentaje de rebote (usuarios que visitan sólo una página y se van a los pocos segundos, como los que se desesperan por lo lento que carga el sitio web) son muy importantes para los buscadores.

¿Cómo se traduce eso? Pues que si tu web ofrece unos contenidos maravillosos, pero la web de tu competencia también lo hace y además tarda menos en cargar, Google los acabará posicionando a ellos delante de ti.

Y como no quiero que te pase eso, hoy te traigo un post con cuatro consejos básicos para que optimices mejor las imágenes que vas a subir a tu web.

Formatos de imágenes

Lo primero que necesitas saber son los formatos más utilizados para optimizar las imágenes y cuál escoger en cada caso. Es muy sencillo:

  • JPG: Este formato lo vamos a utilizar para fotografías. Una vez optimizada la imagen, te va a permitir reducir muchísimo el tamaño que ocupa.
  • PNG 8: Para imágenes con colores planos, que no sean fotografías y que no necesiten transparencias.
  • PNG 24: Para imágenes o fotografías que necesiten un fondo transparente.

Guardar para Web

Aquí es donde está la clave del éxito. En el post te voy a explicar los pasos con Photoshop, pero existen multitud de herramientas gratuitas que también te van a permitir aplicar las nociones que te voy a dar en este post.

Lo primero a tener en cuenta es qué opción del menú debes utilizar para guardar tus imágenes o fotografías. Si vas al menú Archivo, busca «Guardar para web«.

Sólo con utilizar esta opción, en vez de «Guardar como…», ya vas a conseguir optimizar mucho tus imágenes. Si Photoshop se ha «molestado» en incluir esa opción, es porque realmente va a ser muy útil a la hora de guardar las imágenes para la web.

Por no hacer muy extenso el post, voy a obviar los temas de cambiar resolución, tamaño de imagen, etc. Son puntos interesantes, pero no del todo necesarios para poder aplicar lo que te voy a explicar.

Guardar fotografías (JPG)

Aquí voy a enseñarte cómo guardar tus fotografías con la mejor calidad posible, pero que a la vez ocupen lo mínimo indispensable sin perder calidad. Porque sí, ¡eso es posible! ;)

Una vez accedas al menú «Guardar para web» te aparecerá una ventana como esta.

En la captura aparentemente se ve la misma imagen dos veces. Pero no son iguales, la de la izquierda es la original y la de la derecha es a la que le vamos a aplicar los cambios. De esta manera puedes comparar en todo momento el resultado.

Para que te muestre dos imágenes sólo tienes que hacer clic en la pestaña superior, donde dice «2 copias». Luego haz clic sobre la de la derecha, que es a la que le vamos a aplicar los cambios. Cuando lo hagas verás que el menú de la derecha cambiará.

Ahora viene la parte interesante. Debes dejar las opciones del menú tal y como te muestro en la siguiente imagen.

Recuerda que aquí estamos tratando con fotografías, por lo que en el menú desplegable debes seleccionar JPG.

Acuérdate de marcar la casilla Progresivo. Con esto vas a conseguir que la imagen, en caso de conexiones lentas, se vaya cargando de menor a mayor calidad. Por fin vas a poder decir adiós a las típicas imágenes que se van cargando a trozos cuando la conexión es lenta. ;)

Por último, te aconsejo que pongas la calidad en muy alta (80). No vas a ver la diferencia con respecto a la calidad «máxima» (100), pero donde sí se va a notar es en el peso de la imagen, porque en general va a pesar alrededor de un 30% menos.

El espacio que ocupa la imagen lo puedes ver en el pie de la foto, en la misma ventana de «Guardar para web».

Lo mejor de guardar las imágenes con esta opción es que, desde esta misma ventana, puedes hacer zoom para ver con más detalles los cambios que se van a producir en la fotografía.

Te animo a que juegues con las diferentes calidades de imagen y me cuentes si realmente notas diferencia entre una calidad muy alta y la máxima. :)

Cuando guardes el archivo no utilices caracteres raros en el nombre. Con ello evitarás muchos problemas a la hora de utilizar las imágenes en tu web.

El resto de opciones no es necesario que las toquemos.

Guardar imágenes (PNG 8)

Accedemos al menú «Guardar para Web» y esta vez seleccionamos la opción PNG 8 del menú desplegable.

En la parte superior de la ventana, selecciona la pestaña «2 copias» para poder ir visualizando los cambios que hagas.

Desmarca la casilla Transparencia y antes de realizar ningún cambio más, si ves que la imagen no tiene el mismo color que la original, prueba a modificar el perfil de color marcando la casilla «Convertir en sRGB».

Recuerda que las transparencias en PNG 8 no son de calidad, para hacerlas bien es mejor que utilices la opción PNG 24.

Ahora se trata de ir cambiando el número de colores con el menú desplegable que tienes a la derecha. Verás que te da la opción desde dejar la imagen con sólo 2 colores hasta con 256.

Aquí no te puedo decir el número de colores óptimo, porque depende mucho de la imagen. Sólo necesitas encontrar el punto en el que no notes la diferencia.

Es interesante que te fijes en el tamaño que va a ocupar la imagen final. Con PNG 8 conseguirás comprimir muchísimo la imagen sin apenas perder calidad. Como ejemplo, te diré que un simple banner puede pasar de ocupar 1.000kb a ¡sólo 7kb! Creo que merece la pena guardar en este formato, ¿no? Haz la prueba y coméntanos qué tal. ;)

El resto de opciones no es necesario que las toquemos.

Guardar imágenes con transparencia (PNG 24)

De nuevo nos vamos a «Guardar para Web» y esta vez seleccionamos la opción «PNG 24» del desplegable de la derecha.

Aquí sólo vas a tener que asegurarte que esté marcada la casilla «Transparencia» y darle a guardar. Listo, ya tienes tu imagen con fondo transparente.

Por último, quiero que veas la diferencia que existe entre guardar con transparencia en PNG 8 y PNG 24. Para ello la siguiente imagen creo que va a ser un buen ejemplo.

La imágen verde de la izquierda está guardada en PNG 24 y la de la derecha en PNG 8 (ambas con transparencia).

En la imagen de la derecha se puede ver un borde blanco, cuando en realidad lo que tendría que tener es una sombra.

Es por detalles como ese por lo que te recomiendo que las imágenes o fotografías con transparencias siempre las guardes en PNG 24.

Bueno, espero que si no sabías estos truquitos los empieces a aplicar ya mismo :). ¡No dejes escapar ninguna visita más por culpa de que tu web tarde mucho en cargar!

Y si este post te ha sido de utilidad, no olvides compartirlo. ;)