Optimizar imágenes al estilo mintha.

“Vaya turras están dando estos de mintha con las fotografías en el último mes…” ¡Pues sí! Estamos de acuerdo. Somos unos cansinos, pero por nosotros que no quede. Como sabéis, somos unos amantes del diseño y queremos que tu proyecto tenga una identidad y una imagen que os hagan sentir como a una dulce abuelita mirando a sus nietos.

Si nos has leído regularmente durante las últimas semanas, podrás ver cómo hemos ido desglosando el proceso para que tengáis unas fotografías de calidad y hacer que vuestra comunicación visual hable muy bien de vosotros. Hoy os hablamos de la parte menos visual del proceso, menos agradecida y menos estimulante. Pero no por ello menos importante, pues puede causarte un verdadero dolor de cabeza: hay que optimizar imágenes, ya sabes, reducir el peso de los archivos de imagen para que los tiempos de carga de tu web no sean eternos.

optimizar imagenes mintha estudio diseño

Porque no me digáis que no es un fastidio que, después de currarte tu guía de estilo (tanto para instragram como para tu web) y profesionalizar la fotografía de tu marca, las imágenes que subas a tu web acaben jugando en tu contra. Y es que la fachada de Internet es muy visual, pero por dentro lo que mandan son los números. De eso queremos hablarte hoy, de un número muy concreto, del que indica el peso de tus imágenes.

Cómo optimizar imágenes (al estilo mintha)

Como puedes imaginar, hay 1.500 millones de post sobre optimización de fotos en Internet. Por eso, hoy no vamos a contarte cómo puedes hacerlo, que hay y habrá muchas formas, sino cómo lo hacemos nosotros. Así que coge papel y lápiz (o marca el post en favoritos) que vamos a explicártelo todo paso a paso.

Por supuesto, el paso 1 es importar nuestras fotografías originales a nuestra carpeta en el ordenador. Eso sí, recomendamos muy mucho que pongas orden desde el principio y organices bien tus fotos, que al caos le cuesta bien poquito adueñarse de la memoria de nuestro equipo. A partir de ahí…

1. Editar y dimensionar la imagen.

Nosotros utilizamos Adobe Photoshop para adaptar nuestras imágenes originales al formato que queramos, además de editar esos matices que nos gustan menos de las fotos originales (ajustes de color, contraste, curvas tonales…).

  • Lo primero que debes conocer es en qué dimensiones (píxeles) necesitas tener tu imagen, ya sea para redes sociales, cabecera o productos para tu web… Para adaptar el tamaño del lienzo o canvas en Photoshop (imagen/tamaño de lienzo). También es importante utilizar una resolución adecuada. Para visualizar por pantalla, una resolución de 72 ppp es perfecta y reducirá el tamaño de tu imagen.
  • Una vez tengas la imagen dimensionada, procedemos a editarla. Nuestra filosofía de trabajo es que Photoshop es el 10% de la foto, el 90% restante es el trabajo hecho con la cámara. En resumen, no te flipes con la edición.
  • Tras comprobar que la imagen está exactamente como queremos, queda guardarla. Para ello, utilizamos el comando guardar para web (archivo/guardar para web…) que permite modificar la calidad de la imagen. Normalmente la guardamos al 80% de su calidad, para visualizar por pantalla será más que suficiente.
  • Recuerda, el formato más adecuado para las imágenes en tu web será el jpeg. Usa el formato png cuando la imagen no tenga un contorno rectangular o quieras que aparezca con fondo transparente (y no blanco). El formato png pesa más, así que no lo uses si no es necesario.
2. Comprimir el resultado.

Muy importante: ¡No subas aún la imagen! Aunque la hayas guardado para web, aun queda “el toque final”. Te sorprenderá comprobar lo que aún puede reducirse el tamaño de la imagen.

Todo el trabajo que llevas hecho para optimizar imágenes puede verse mejorado hasta en un 80%. Así que imagina si te quedas en el paso 1 al trabajar las imágenes para tu web. No te digo ya si ni siquiera abordas ese primer paso…

Pero, a lo que iba, abre tu navegador y busca la página Compressor.io. Tu vida no volverá a ser igual a partir de este momento, ni la de tu sitio web tampoco. Al menos la nuestra cambió radicalmente, y nos sentimos mucho más “ligeros” desde entonces.

optimizar imagenes mintha estudio diseño

Al pinchar en “try it!”, simplemente el programa nos pedirá que subamos la imagen que ya tenemos optimizada desde el paso 1 y la comprimirá en cuestión de segundos. El compresor nos informará de la reducción de tamaño que ha experimentado el archivo y nos permitirá descargarlo. Así de simple.

También puedes probar otros compresores online si así lo prefieres, que para gustos, colores. Para ello, este post de Hipertextual te vendrá muy bien si quieres sondear otras opciones para optimizar imágenes que puedes encontrar en el universo 2.0.

3. Sube tu imagen a la web.

¡¡¡Ahora sí!!! Sube tu imagen optimizada a tu sitio web sin aumentar los tiempos de carga y haciendo que tu web sea mejor considerada por los usuarios y por los buscadores.

¿Y si ya has subido tus fotos sin optimizar?

Pues imagina qué faena, que lleves años con tu web o tu blog y ahora tener que actualizar todas las imágenes, pasarlas por Photoshop, comprimirlas y volver a subirlas… ¿No habrá alguna herramienta que te permita hacer este proceso antes de que salga la última temporada de GOT y te pille editando fotos? Pues sí, existe.

Si tienes fotos subidas a tu sitio web que aún no están optimizadas y son muchas, muchísimas, te recomendamos que recurras a un plugin para comprimir esas imágenes. Nosotros siempre recomendamos el plugin WP Smush. Te permitirá optimizar las imágenes de tu galería de medios de forma automática. Eso sí, no será una compresión tan optimizada.

¿Y cómo puedo conocer las dimensiones exactas de las imágenes para que encajen en mi web?

Esa es otra de las preguntas del millón. Y tiene muy fácil respuesta. Mejor dicho, tiene dos.

  • Acude a las opciones del backoffice de tu wordpress (ajustes/medios). Allí podrás comprobar las dimensiones máximas a las que se reproducirán tus imágenes. Es decir, si el tamaño máximo de imagen es de 900 píxeles, cada imagen que subas con tamaño 1000 píxeles ya tendrán 100 píxeles de sobra. Esos 100 píxeles se traducen en un mayor tamaño de la imagen, que ocupará más de lo necesario.
  • Recurre al as en la manga del diseño web: la herramienta CSS Peeper. Se trata de una extensión de Google Chrome que te permitirá inspeccionar el estilo de una web de un modo rápido e intuitivo. Te chivará estilos de texto, tamaños, colores, y dimensiones de imágenes. ¿Qué más se puede pedir?

optimizar imagenes mintha estudio diseño

Como has podido comprobar, este post es eminentemente práctico. Nuestra intención es que salgáis con una idea bien clara: el tamaño importa, y mucho, en Internet. Así que te dejamos este método para conseguir que tus imágenes de calidad no se conviertan en un lastre.

¿Y tú, utilizas algún método para comprimir tus imágenes? ¿Conoces otros plugins o compresores online? Pregúntanos cualquier duda sobre el proceso y te ayudamos encantadísimos. Os esperamos la próxima semana con una nueva entrega de #designfacts. No olvides suscribirte a la #mintletter, que te tendremos al día de todo lo que se cuece por aquí.

Entradas relacionadas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *