¿Cómo optimizar imágenes de tu web?

¿Cómo optimizar imágenes de tu web?
Anterior

Creo que todos somos culpables de habernos ido alguna vez de una página web porque el contenido no cargaba todo lo rápido que esperábamos. Es así, no nos engañemos, cada vez tenemos menos paciencia.

Esto puede suceder por diversas razones, pero la principal, y a la que haremos referencia en este post, es que las imágenes utilizadas no se han comprimido adecuadamente. Culpa de nosotros, los pobres diseñadores que solo queremos que nuestros apreciados diseños se vean una calidad equivalente a la dedicación que ponemos en hacerlos.

Lo cierto es que no necesitamos que guardemos todas las imágenes como si se fueran a imprimir en una valla, únicamente necesitamos que midan los píxeles de la pantalla que van a ocupar. Esto debe ser nuestro mantra a la hora de diseñar para web y, sobre todo, para páginas destinadas al ecommerce, ya que es imprescindible realizar buenas compresiones para que carguen tan rápido como esperamos.

Lo ideal es que las imágenes más grandes, como los banner de portada, no pesen más de 120 kb y el resto de imágenes no superen los 80/100kb.

A continuación te contamos los aspectos a tener en cuenta y cuatro maneras diferentes de guardar imágenes

Tamaño real de las imágenes en pantalla

Lo primero que tenemos que tener claro es cuánto espacio ocuparán nuestros diseños en pantalla. Es importante saber que el tamaño máximo de un monitor de ordenador es de 1920 x 1080 ppp, por lo cual, nuestros diseños no deberán superar los 1920 ppp de ancho (el alto sí puede ser superior gracias al scroll), ya que entonces serían más grandes que la pantalla y estaríamos cargando nuestra web con información y peso innecesario.

Por consiguiente, tanto si diseñas en Photoshop como en Illustrator (mejor aquí), debes colocar la mesa de trabajo a dicha medida (1920ppp de ancho) o a la medida que necesites según el dispositivo (si vas a crear contenido para tablets, móviles, etc., tendrás que buscar la medida específica y comenzar a crear a partir de ahí) y comenzar la composición de los elementos sin superar los límites de la mesa de trabajo.

De esta manera, cuando acabemos, sabremos qué medida posee cada elemento por separado y será la medida a la que guardaremos los archivos.

Calidad y tamaño de las fotografías originales

La teoría afirma que deberíamos editar las imágenes previamente para que se ajusten exactamente a los píxeles que necesitamos, es decir, que debemos recortar los que nos sobra de la imagen, pero la realidad es que en el día a día, con las prisas y cantidad de trabajo, esto es casi imposible.

Lo cierto es que colocamos las imágenes a la misma medida a la que la descargamos y luego escalamos para que encaje según nuestras preferencias. Aunque no sea lo más idóneo, es lo que la mayoría hacemos y sí, podemos seguir consiguiendo imágenes optimizadas con buena relación calidad peso.

Simplemente tenemos que tener en cuenta que si la imagen que utilizamos es muy pequeña, perderemos mucha calidad al escalarla, y si es grande en tamaño pero se encuentra ya pixelada desde el inicio, a la hora de optimizar conseguiremos un resultado poco apropiado.

Lo ideal es que descarguemos o utilicemos imágenes que cumplan las siguientes características:

  • Tenga un tamaño similar al que tendrá el diseño final
  • Se vea nítida y con buena calidad
  • Tenga la misma orientación que nuestro diseño que busquemos imágenes apaisadas o verticales según la necesidad para evitar escalar las imágenes más de lo permitido

Guardado de las imágenes

Esta es la parte más importante y en ella, lo primero que tenemos que tener en cuenta es el modo de color en el que estamos diseñando, debemos hacerlo siempre en RGB.

Esto no solo influye en que los colores sean más vibrantes y llamativos, sino que también influye en la reducción del peso de los archivos.

Guardado en Illustrator

Si trabajas la mayoría de tus diseños en Illustrator, tienes que tener mucho cuidado a la hora de guardar para web ya que la compresión es, según mi experiencia, peor que la que obtenemos en Photoshop y, también, porque si no lo hacemos correctamente, aunque las imágenes las hayamos hecho en una mesa de trabajo con las medidas correctas, la imagen exportada puede no poseerlas. A continuación te explico dos formas de exportar y los parámetros que debes utilizar:

Exportar como:

Si vamos a archivo / exportar como, primero tendremos que elegir el tipo de archivo, en este caso, como hablamos de conseguir una mayor comprensión, utilizaremos el formato JPG

Exportar imágenes para web

Una vez seleccionado, tendremos que elegir las especificaciones. Para que la exportación respete las medidas que utilizamos en la mesa de trabajo (1920x1080, por ejemplo) debemos selección 72 ppp de resolución.

Lo malo de esta opción es que no podemos previsualizar cuánto pesan los archivos, por lo que perderemos mucho tiempo haciendo pruebas hasta conseguir la compresión deseada y que como resultado obtendremos una imagen mal comprimida y pixelada.

Opciones JPEG

Exportar para web (heredado):

En este caso, como es para web, no tenemos que fijarnos en la resolución porque se hace automáticamente, pero sí nos tendremos que fijar en que el tamaño de la imagen sea el correcto y en el peso del archivo (abajo a la izquierda) no supere los 120 kb. Para que el peso aumente o disminuya, cambiaremos el parámetro de calidad.

Exportar para web

Guardado en Photoshop

Aunque realmente no diseño casi nada en Photoshop, sí es mi herramienta favorita para guardar y comprimir imágenes porque es, de las que yo conozco, la que ofrece mejores resultados.

Photoshop nos ofrece algunas posibilidades de guardado que no vamos a especificar como lo son: Guardar como y Exportar como, ya que nos centraremos en otras dos que ofrecen mejores resultados.

Guardar para web (heredado)

Si seleccionamos Archivo/Exportar/Guardar para web (heredado) nos aparece una ventana muy parecida a la que ofrece Illustrator. Tendremos que revisar el tamaño de la imagen, el cual podremos redimensionar (recuerda siempre mantener las proporciones para no deformar la imagen) y aumentaremos o disminuiremos la calidad, según el peso que necesitemos.

Guardar para web

Esta es la opción que más utilizo cuando tengo que exportar pocas imágenes. Lo que hago es diseñar en Illustrator, luego utilizo la opción “Exportar como” a máxima calidad (300ppp y calidad 10) y, finalmente, voy a Photoshop y utilizo el procedimiento anterior ya comentado, “guardar para web”.

De esta manera tardo un poco más pero obtengo un resultado mucho mejor a que si lo hiciera directamente en Illustrator

Procesador de imágenes

Si nos dirigimos a Archivo/ secuencia de comandos/ Procesador de imágenes, encontraremos la que ahora mismo es mi herramienta favorita. Esta funcionalidad que descubrí hace muy poco me ha ahorrado horas de trabajo y monotonía, ya que permite guardar varias imágenes de manera automática, respetando los parámetros, y con unos muy buenos resultados.

Procesador de imágenes

Lo primero que tenemos que tener en cuenta es el tamaño. Todas las imágenes que queramos guardar tienen que tener el mismo tamaño tanto de ancho como de alto, o bien sólo en uno de sus lados, ya que no vamos a poder especificar las dimensiones de cada una de las imágenes sino de todo el conjunto.

Si todas las imágenes tienen el mismo ancho y alto (muy común cuando necesitamos exportar fotos de productos destinadas a un ecommerce) solo tendremos que especificar el tamaño que queremos que tenga la imagen final y se redimensionará perfectamente.

Si todas las imágenes coinciden en ancho, pero no en alto (si necesitamos guardar banners de diferentes alturas, pero mismo ancho de 1920), colocaremos en las dimensiones An: 1920 y Al: 2000, por ejemplo, colocaremos un número más grande en el alto, ya que tomará como referencia la menor medida para guardar.

Como resultado, obtendremos todas las imágenes con un ancho de 1920 y un alto diferente en proporción a la imagen original, es decir, esta herramienta no cambia proporciones.

Lo segundo que tenemos que tener en cuenta es guardar las imágenes que queramos exportar en lote, en una misma carpeta.

Y por último, podemos aumentar o disminuir el peso según la calidad (de 1 a 12).

Los aspectos negativos de esta herramienta es que no permite guardar imágenes en png, ni previsualizar el peso, con lo cual hay que hacer pruebas, pero el tiempo que nos ahorra cuando tenemos que exportar gran cantidad de imágenes merece la pena.

En definitiva, a la hora de trabajar con imágenes, es importante conocer las herramientas a las que tenemos alcance, para así poder elegir la que mejor se adapte a nuestras necesidades en cada ocasión. En mi caso, acabo mezclando herramientas para que la calidad y la eficiencia vayan siempre de la mano.

¿Sufriremos un poco al ver los píxeles? Sí, pero todo esto se verá recompensado cuando nuestras ventas aumenten y las navegaciones en nuestra página sean cada vez más duraderas y aumentemos las conversiones.

También puede interesarte:

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments