BLOG

We write about great things, you know.

Reinventing brands with high value ideas

Optimizar imágenes para un sitio web – y disminuir el tiempo de carga de una página –

Por: Victoria Marafetti

jun 6, 2014 • codingNo hay comentarios

Tal vez al leer el título de este post piensen que es uno más de los tantos que hay allá fuera. Tal vez mis queridos amigos estén en lo cierto, pero si han llegado hasta aquí, pues en algún punto he captado su atención.

Uno de los últimos proyectos en los cuales tuve el gusto de trabajar pertenece a una empresa – muy querida por nosotros, por cierto – que realiza bolsas ecológicas. Éste tenía como objetivo el rediseño de su sitio web, teniendo como meta más importante, mejorar su posicionamiento en los principales buscadores y estar optimizado para dispositivos móviles.

Para lograr un buen resultado pusimos los siguientes objetivos:

  • – Generar contenido rico e interesante para el usuario
  • – Lograr un sitio liviano que pueda verse desde cualquier dispositivo
  • – Mostrar buenas imágenes de sus productos para atraer a nuevos clientes y demostrar su experiencia en el mercado

Teniendo en cuenta los 3 puntos anteriores, y al ampliar considerablemente la cantidad de imágenes respecto a su página anterior, sucedió que el tamaño final del sitio (medido en megabytes) comenzó a subir. Como era previsible, lógicamente repercutió en la carga de todo el contenido y por sobre todo, su visualización en dispositivos mobile, utilizando la red 3G.

Para no extenderme en el caso, les comparto la solución que aplicamos para lograr una óptima visualización del mismo:

FIREWORKS / SELECTIVE JPG MASK

Lo que permite este maravilloso software (lamentablemente discontinuado por Adobe), a diferencia de Adobe Photoshop®, es optimizar la calidad de las imágenes, pero por secciones.

En nuestro ejemplo de las bolsas, no es importante tener un fondo con la misma calidad que el objeto central. Lo que necesitamos es darle mayor nitidez y contraste de colores a nuestra protagonista, ya que nuestros ojos irán a ella para evaluar sus detalles y formas.

Para optimizar una imagen:

1. En fireworks, abrir la imagen que se desea optimizar.
Para este ejemplo vamos a utilizar una imagen real de las que finalmente se utilizaron en el sitio.

Optimize images for a website

2. En Vista Original, seleccionar – utilizando un Marquee tool- el área de la imagen que se desea que conserve la mayor calidad.

Optimize images for a website

3. Seleccionar Modify > Selective JPEG > Save Selection as JPEG Mask

Optimize images for a website

4. Window > Optimize

Una vez guardada la sección, abrir el panel de Optimize. Este panel permitirá setear los parámetros que queremos darle a la imagen y su nivel de compresión.

Nota. Aquí he cambiado la vista a modo 2-Up sólo por preferencia personal. Se puede siempre trabajar dentro de Original o Preview. Esta última indicará cómo va quedando realmente la imagen que se está modificando.

Optimize images for a website

5. El panel de Optimize nos dejará jugar con los valores de compresión de nuestra imagen.

En Quality conviene establecer valores bajos ya que en nuestro ejemplo, éste se refiere al fondo (es decir, el área por fuera de la máscara aplicada) y no queremos tanta calidad en él – el resaltado azul significa que estamos modificando ese valor.-

En Selective Quality necesitaremos establecer un nivel alto, ya que ese corresponde a la máscara que hemos aplicado y no buscamos optimizarlo demasiado.

Nota. Estando en la vista preview es posible ver en tiempo real cómo el modificar estos parámetros impactan en la imagen y – al pie de la ventana – el peso que tendrá. Esto es muy importante para nuestro resultado final. Recomiendo no siempre poner 100% en Selective Quality ya que nuestro objetivo es lograr la mejor imagen con el menor peso posible. Al 80%el objeto sale bien y no es tan notable la diferencia como al 100%. Sí hay gran diferencia en el peso final. Jueguen y cuando hayan logrado el mejor resultado, exporten su fotografía.

Optimize images for a website

6. Una vez que se haya llegado a los parámetros deseados, ir a File > Export para guardar la imagen.

Optimize images for a website

7. Nuestro resultado final. Nada mal, ¿no?

Optimize images for a website

Comparamos ahora nuestra imagen original y la que hemos optimizado. ¿Se observan importantes diferencias?

Optimize images for a website

No a simple vista…. ¿verdad? pero que tal si ahora chequeamos el peso de ambas…

Optimize images for a website

Voilà! Aquí se observa lo que sucede con una y otra. Ahora, imaginemos este caso multiplicado por todas las imágenes que contiene un sitio y su impacto en la descarga de cada una de ellas desde el servidor.

Tal vez éste sea un paso más a la hora de exportar imágenes, lo admito. A veces quisiéramos exportar desde Photoshop nuestro trabajo terminado y subirlo directamente a la web, pero aquí es posible ver que hay una gran diferencia entre ambos y la forma en la cual se comprimen las imágenes.

Los tiempos de carga de un sitio son muy importantes y hasta a veces determinantes en la permanencia de un usuario en la misma, por lo que a realizar estos procesos no es una pérdida de tiempo, es algo que yo llamo ¨inversión¨.

Éste es mi pequeño secreto. Ustedes, ¿qué procesos siguen para disminuir el peso en sus archivos?

NOTA – Esto aplica a imágenes de mapa de bits. Para trabajar con gráficos vectoriales en 2D, recomendamos utilizar el formato SVG, el cual tiene generalmente menor peso que un PNG por ejemplo, no pierde calidad al hacer zoom, se puede escalar, pueden aplicarse estilos CSS y animaciones mediante JS y al ser XML, es indexable por buscadores.

Por otro lado, en la carga de un sitio web, no sólo las imágenes son las causantes de una carga lenta. Cabe mencionar esto, ya que también muchas veces una gran cantidad de archivos javascript, css y html generan muchos pedidos al servidor y eso hace que tarde más. Todo incide pero desde luego que este post creemos será de gran ayuda.

Tags: , , , , , ,

Deja un comentario

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


siete + = 12

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>