Diseño

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. ;)

Comentarios

  1. Hola Saioa! Soy nueva en el mundo de internet y wordpress. Por eso no sé si mi pregunta será “muy ignorante” :) Pero es que me han comentado que si se usa una versión pirata de Photoshop, los buscadores lo reconocen y te penalizan, es así?

    Si esto es correcto, quiere decir que tu consejo sólo se podría aplicar en versiones legales de Photoshop, verdad?

    Un abrazo,
    María

    1. Hola María,

      Es la primera vez que lo escucho, pero la verdad lo veo muy difícil (aunque todo puede ser!).

      Piensa que para que Google pudiese detectar que una foto está retocada con una versión pirata de Photoshop, el propio Photoshop le tendría que haber introducido algún código a la foto diciendo que es una versión pirata.

      Si Photoshop tuviese esa capacidad (la de detectar que es pirata), lo que haría sería bloquear el programa para que no lo utilizases más.

      De todas maneras, tienes muchas herramientas gratuitas, que si bien no tienen la potencia de photoshop, a la mayoría de nosotros nos sobra. Evita en lo posible versiones pirata (sobretodo para Windows, que nunca vienen “solas”).

      Precisamente ayer Xenia Alonso, de http://www.barcelonette.net, nos pasó el link de http://www.webresizer.com/resizer/, donde puedes recortar fotos online y alguna cosilla más. Es muy básica, pero la idea en sí está muy bien.

  2. Hola Xavi, sólo ahora veo tu comentario, pues no llega notificación por mail de vuestras respuestas… Pues lo que me dijeron es que Photoshop genera una información, como la que sabemos que cada imagen almacena, pero que sirve para indicar con qué versión del programa se ha realizado. Lo preguntaré mejor esta semana y les cuento. Mientras tanto, buscaré el software que comentas. Yo trabajo con varias aplicaciones en el iPad, y como esas son de descarga gratuita o las compro en la AppleStore, incluida la de Photoshop express, trato de hacer las ediciones alli (o con Pixlromatic, que me encanta). Pero me surge otro problema cuando quiero hacer algunos montajes en InDesign (que lo tengo pirata:( y luego guardarlos como imagen. Es ahí donde más se me complica sortear la cuestión…

    Yo trabajo con Mac, pero es verdad que Windows consigue reconocer todo lo pirata que tengas en un equipo!

    Te agradezco esta rwspuesta, y todas las que me van dando por facebook, sois un gran equipo! Espero la internacionalización de la Hodei School y un foro de debates, para no molestarlos siempre, también estaría muy bien!!!

    Un abrazo, Maria

  3. No creo que usar photoshop pirata influya mucho. Yo lo llevo haciendo años y no he notado nada. Solo nos faltaba eso, el panda, el pinguino y el photoshop pirata! :)

    Saludos.

Los comentarios están cerrados.