Si tienes una página web seguro que ésta tiene un gran contenido gráfico como fotografías, iconos, ilustraciones, etc.. En algún momento te puedes encontrar con la necesidad de subir las nuevas imágenes o renovar las que hay actualmente, ya sean imágenes creadas para impactar, para mostrar tus productos o para mantener la atención del usuario. ¡Estas imágenes tendrán que verse siempre correctamente para sacarle el máximo partido! Por eso resulta tan importante optimizar correctamente nuestras fotografías antes de subirlas a nuestra página web. Básicamente se trata de escoger el formato adecuado, que tengan el tamaño exacto y que no pesen demasiado; por ejemplo, que no sobrepasen los 500Kb en fotos grandes, los 200Kb en fotos de tamaño mediano y los 100Kb en imágenes pequeñas.

Por qué conviene que nuestras imágenes no pesen mucho?

Aunque cada vez navegamos a más velocidad, unas imágenes muy pesadas pueden provocar que nuestra página web tarde demasiado en cargar, sobre todo si nuestra página web contiene un gran contenido gráfico o está formada por imágenes que ocupan gran parte o toda la pantalla. Si nuestra página web es lenta, el usuario se cansará y la abandonará rápidamente, cosa que no podemos aceptar de ninguna manera.

Unas imágenes bien optimizadas nos ayudarán a obtener un mejor posicionamiento, ya que Google, desde hace un tiempo, tiene en cuenta factores como la velocidad al cargar una página.

¿Qué formato escogeremos?

Para empezar, tendremos que elegir cuál es el formato más adecuado para guardar nuestras imágenes y podemos elegir entre:

    • GIF: se trata de un formato cada vez más obsoleto. Prácticamente sólo se utiliza para exportar imágenes animadas y formadas por pocos colores planos.
    • JPG: perfecto para guardar fotografías de todo tipo, sobre todo si estas son de grandes dimensiones y con gran detalle. Su compresión es mucho más elevada que la de un PNG. No es recomendable para exportar imágenes con textos pequeños, ya que éstos pierden nitidez y quedan poco definidos.

Com guardar imatges per web

    • PNG: es el formato ideal para imágenes planas o con pocos colores, tipo ilustraciones, iconos, logotipos, gráficos,etc. Los textos exportados a imágenes PNG serán mucho más nítidos. Otro de los motivos para utilizar PNG es que nos permite utilizar imágenes con transparencia.
    • SVG: es un formato vectorial, cosa que lo convierte en redimensionable. La imagen que sea guardada en SVG se verá siempre nítida, se presente al tamaño que se presente. Este formato es ideal para guardar imágenes que se hayan creado con vectores, como logotipos, ilustraciones, iconos, etc., sobre todo para webs responsivas. Uno de los inconvenientes que existen es que todavía hay versiones antiguas de Internet Explorer que no admiten este formato.

Como optimizar nuestras imágenes?

Es importante que las imágenes que guardamos estén al tamaño exacto en píxeles en que se mostrarán en la web. Si exportamos una imagen a JPG la calidad deberá ser de entre 80 y 90. Si lo que hacemos es exportar un PNG podemos elegir entre un PNG-8 , PNG-24 o PNG-32. Se recomienda utilizar PNG -24 o PNG -32, ya que la calidad de la imagen será superior, sobre todo si está compuesta por muchos colores.

Uno de los inconvenientes que podemos encontrar cuando exportamos una imagen a PNG transparente es que acabe siendo bastante pesada, sobre todo si se trata de una fotografía a todo color. Un recurso muy útil y fácil que hemos descubierto hace poco es https://tinypng.com/, desde donde podremos comprimir hasta un 70 % nuestros PNG’s transparentes de una forma rápida y sencilla.

Si la imagen que estem tratando la hemos capturado nosotros, es importante escoger el espacio de color sRGB y no AdobeRGB o ningún otro, ya que sRGB es un formato más universal. Veremos la imagen con los mismos colores que la original y se verá prácticamente igual en todos los navegadores, lo que lo convierte en el espacio ideal para web.

Una excepción: las pantallas Retina Display

Desde hace un tiempo, los dispositivos creados por la marca Apple como iPad, iPhone, MacBook, etc. tienen en común las pantallas Retina Display, que ofrecen una calidad de imagen muy superior a la que estábamos acostumbrados. Esto se debe a que tienen una densidad de píxeles muy superior a las pantallas convencionales, pudiendo llegar a mostrar hasta cuatro veces más píxeles en un mismo espacio. Por eso, cuando visualizamos una imagen en uno de estos dispositivos, la podemos llegar a ver borrosa y con poca definición. Para conseguir que se vean correctamente las imágenes en este tipo de pantallas se recomienda guardarlas al doble de su tamaño. Si tenemos una imagen de 50 x 50 px , la guardaremos a 100 x 100 px . Se recomienda también utilizar el formato SVG, ya que con éste no tendremos ningún problema en la redimensión porque nunca pierde definición al mantener las propiedades vectoriales. Con las imágenes grandes a toda pantalla no aplicaremos la misma solución, no existe el mismo problema de falta de definición y obtendríamos imágenes demasiado pesadas para nuestra página web.

Una vez visto todo esto, se trata de encontrar el equilibrio entre la calidad y el peso para acabar obteniendo unas imágenes que luzcan todo lo posible en nuestra página web sin que nos hagan perder velocidad al navegar.

Artículos relacionados