Consejos para optimizar fotografías para el web. Optimización de fotos sin perder calidad de la imagen.
En este artículo vamos a ofrecer una serie de consejos para optimizar fotografías para una página web, para que sean más fáciles de descargar por los visitantes y no ralenticen la carga de la página. Pero siempre tratando de conservar la calidad de la foto en la medida de lo posible.
Actualmente las conexiones a Internet son cada vez más potentes y con mayor capacidad para descargar imágenes, sea cual sea su tamaño. No obstante, siempre viene bien trabajar las imágenes para que ocupen poco espacio y por tanto se transfieran con mayor velocidad. Sobre todo tenemos que pensar que el entre abanico de usuarios que van a visitar nuestra página web siempre habrá personas que tengan una conexión más lenta, y por tanto nos agradecerán que la página cargue rápido. Además tenemos que tener en cuenta el perfil de usuario de Internet, que acostumbra a tener bastante impaciencia y puede que no espere a que las imágenes terminen de cargar.
Pero a todas estas razones por las que conviene optimizar las fotografías que colocamos en las páginas web tenemos que añadir la propia carga de nuestro servidor. Imágenes que ocupan mucho espacio son pesadas para el servidor donde está alojada la página. Al final, eres tú el que paga el alojamiento y transferir imágenes que sean más grandes que lo recomendado redundará en una pérdida de ancho de banda y una transferencia innecesaria de tu servidor lo que se traduce en pérdida de dinero.
Todos estos consejos para la optimización de fotos serán doblemente interesantes si utilizamos muchas fotografías en una misma página web.
En este artículo vamos a ver la optimización de fotografías en formato jpg, dejando a un lado la optimización de imágenes con dibujos, cuyo formato más adecuando sería el gif. Para más información leer el artículo de formatos gráficos para páginas web.
1) Ajustar la calidad del formato jpg
La mejor manera de disminuir el tamaño de una fotografía en formato jpg es ajustar la calidad de la imagen. A menor calidad, mayor compresión de la foto, con lo cual ocupará menos tamaño. Cualquier programa de edición gráfica permitirá definir la calidad de la imagen al momento de guardarla. Muchas veces, bajar la calidad del archivo no implica una pérdida apreciable de la imagen.
2) Trabajar siempre la fotografía partiendo del archivo original
El formato jpg es un formato de archivo gráfico con pérdida. Esto quiere decir que cada vez que la guardamos estamos perdiendo un poco de calidad con respecto al archivo gráfico original. Claro que, a menor calidad del jpg, más pierde la imagen. Si guardamos la foto (con la consiguiente pérdida de calidad) y luego la abrimos y la volvemos a editar y guardar, estaremos perdiendo todavía más calidad. Así que lo mejor es que, si tenemos que volver a editar el archivo, lo hagamos sobre la foto original, así la pérdida ocurrirá sólo una vez.
3) Ajustar el tamaño de la imagen
Las dimensiones de la imagen (anchura y altura) son otro de los factores que más afectan al tamaño del archivo en Kb. A mayor tamaño del archivo, mayor el espacio que ocupa en disco. Es obvio que si ponemos imágenes pequeñas ocuparán menos que otras más grandes. A veces es preferible presentar la imagen con tamaño menor que bajar mucho la calidad y tener una pérdida excesiva, que estéticamente es poco agradable.
4) Enfocar la imagen si la hemos reducido
Muchos programas de edición gráfica, como Photoshop, tienen un filtro o una opción para enfocar la fotografía. El enfoque de la foto hace que los elementos queden más resaltados y por tanto más vistosos. Lo malo del enfoque de la fotografía casi siempre implica que el archivo gráfico resultante tenga mayor tamaño, por eso tenemos que tratar con cuidado esta opción.
5) Crear thumbnails o miniaturas de las imágenes
A veces es poco aconsejable colocar las imágenes en gran tamaño. Sobre todo si tenemos muchas imágenes en una misma página, puede ser aconsejable mostrar sólo unas miniaturas y que sea el usuario el que decida cuáles de esas imágenes desea verlas a mayor formato. Quizás el usuario está buscando una información y las fotos no le interesen mucho ¿por qué entonces cargar todas las imágenes en dimensiones grandes? Además, si tu sitio es muy visitado y con mucha transferencia, colocar de entrada las fotos grandes puede ser perjudicial para la marcha del servidor. Entonces podría ser recomendable mostrar unas miniaturas y que sea el usuario el que, haciendo clic en la foto, decida cuál o cuáles desea ver ampliadas.
6) Recortar el área que nos interesa de la imagen
Al editar la imagen con nuestro programa de diseño gráfico podemos recortar la foto para quedarnos sólo con la parte que nos interesa. Muchas veces cuando hacemos una fotografía sólo nos interesa una parte. Entonces lo interesante es recortar la imagen, desechando toda la información que no nos interesa. Toda esa parte de la imagen que no nos interesaba, no tenemos por qué guardarla en el archivo y permitirá ahorrar espacio y aprovechar bien el tamaño de la imagen para las áreas que realmente consideramos importantes. En la siguiente imagen se ve visualmente lo que quiero decir. En la zona que he recuadrado está la parte de la imagen que nos interesa. El resto de la foto se puede desechar, con ello conservamos e incluso potenciamos el significado y la razón de ser de la imagen.
7) Utilizar algún programa de optimización de imágenes adicional
Existen programas específicos para realizar las tareas de optimización de una imagen que se pueden utilizar de manera adicional a nuestro programa de edición gráfica preferido. Estos programas están focalizados y especializados en optimizar fotografías, por lo que los resultados que obtienen a menudo son mejores que los que ofrecen programas de edición gráfica de propósito general. Es decir, con estos programas conseguimos una optimización de fotos donde los archivos resultantes son de menor tamaño y con mayor calidad. Ejemplos de programas de optimización de fotografías hay a montones, por ejemplo GifBot, Rea Compresor, Advanced JPG compressor, Image Compressor, etc.
Referencias en DesarrolloWeb.com sobre optimización de fotografías
Dejamos aquí algunos enlaces a artículos de DesarrolloWeb.com donde hemos hablado sobre los formatos gráficos para la web o sobre optimizar fotos.
Actualmente las conexiones a Internet son cada vez más potentes y con mayor capacidad para descargar imágenes, sea cual sea su tamaño. No obstante, siempre viene bien trabajar las imágenes para que ocupen poco espacio y por tanto se transfieran con mayor velocidad. Sobre todo tenemos que pensar que el entre abanico de usuarios que van a visitar nuestra página web siempre habrá personas que tengan una conexión más lenta, y por tanto nos agradecerán que la página cargue rápido. Además tenemos que tener en cuenta el perfil de usuario de Internet, que acostumbra a tener bastante impaciencia y puede que no espere a que las imágenes terminen de cargar.
Pero a todas estas razones por las que conviene optimizar las fotografías que colocamos en las páginas web tenemos que añadir la propia carga de nuestro servidor. Imágenes que ocupan mucho espacio son pesadas para el servidor donde está alojada la página. Al final, eres tú el que paga el alojamiento y transferir imágenes que sean más grandes que lo recomendado redundará en una pérdida de ancho de banda y una transferencia innecesaria de tu servidor lo que se traduce en pérdida de dinero.
Todos estos consejos para la optimización de fotos serán doblemente interesantes si utilizamos muchas fotografías en una misma página web.
En este artículo vamos a ver la optimización de fotografías en formato jpg, dejando a un lado la optimización de imágenes con dibujos, cuyo formato más adecuando sería el gif. Para más información leer el artículo de formatos gráficos para páginas web.
1) Ajustar la calidad del formato jpg
La mejor manera de disminuir el tamaño de una fotografía en formato jpg es ajustar la calidad de la imagen. A menor calidad, mayor compresión de la foto, con lo cual ocupará menos tamaño. Cualquier programa de edición gráfica permitirá definir la calidad de la imagen al momento de guardarla. Muchas veces, bajar la calidad del archivo no implica una pérdida apreciable de la imagen.
2) Trabajar siempre la fotografía partiendo del archivo original
El formato jpg es un formato de archivo gráfico con pérdida. Esto quiere decir que cada vez que la guardamos estamos perdiendo un poco de calidad con respecto al archivo gráfico original. Claro que, a menor calidad del jpg, más pierde la imagen. Si guardamos la foto (con la consiguiente pérdida de calidad) y luego la abrimos y la volvemos a editar y guardar, estaremos perdiendo todavía más calidad. Así que lo mejor es que, si tenemos que volver a editar el archivo, lo hagamos sobre la foto original, así la pérdida ocurrirá sólo una vez.
3) Ajustar el tamaño de la imagen
Las dimensiones de la imagen (anchura y altura) son otro de los factores que más afectan al tamaño del archivo en Kb. A mayor tamaño del archivo, mayor el espacio que ocupa en disco. Es obvio que si ponemos imágenes pequeñas ocuparán menos que otras más grandes. A veces es preferible presentar la imagen con tamaño menor que bajar mucho la calidad y tener una pérdida excesiva, que estéticamente es poco agradable.
4) Enfocar la imagen si la hemos reducido
Muchos programas de edición gráfica, como Photoshop, tienen un filtro o una opción para enfocar la fotografía. El enfoque de la foto hace que los elementos queden más resaltados y por tanto más vistosos. Lo malo del enfoque de la fotografía casi siempre implica que el archivo gráfico resultante tenga mayor tamaño, por eso tenemos que tratar con cuidado esta opción.
5) Crear thumbnails o miniaturas de las imágenes
A veces es poco aconsejable colocar las imágenes en gran tamaño. Sobre todo si tenemos muchas imágenes en una misma página, puede ser aconsejable mostrar sólo unas miniaturas y que sea el usuario el que decida cuáles de esas imágenes desea verlas a mayor formato. Quizás el usuario está buscando una información y las fotos no le interesen mucho ¿por qué entonces cargar todas las imágenes en dimensiones grandes? Además, si tu sitio es muy visitado y con mucha transferencia, colocar de entrada las fotos grandes puede ser perjudicial para la marcha del servidor. Entonces podría ser recomendable mostrar unas miniaturas y que sea el usuario el que, haciendo clic en la foto, decida cuál o cuáles desea ver ampliadas.
6) Recortar el área que nos interesa de la imagen
Al editar la imagen con nuestro programa de diseño gráfico podemos recortar la foto para quedarnos sólo con la parte que nos interesa. Muchas veces cuando hacemos una fotografía sólo nos interesa una parte. Entonces lo interesante es recortar la imagen, desechando toda la información que no nos interesa. Toda esa parte de la imagen que no nos interesaba, no tenemos por qué guardarla en el archivo y permitirá ahorrar espacio y aprovechar bien el tamaño de la imagen para las áreas que realmente consideramos importantes. En la siguiente imagen se ve visualmente lo que quiero decir. En la zona que he recuadrado está la parte de la imagen que nos interesa. El resto de la foto se puede desechar, con ello conservamos e incluso potenciamos el significado y la razón de ser de la imagen.
7) Utilizar algún programa de optimización de imágenes adicional
Existen programas específicos para realizar las tareas de optimización de una imagen que se pueden utilizar de manera adicional a nuestro programa de edición gráfica preferido. Estos programas están focalizados y especializados en optimizar fotografías, por lo que los resultados que obtienen a menudo son mejores que los que ofrecen programas de edición gráfica de propósito general. Es decir, con estos programas conseguimos una optimización de fotos donde los archivos resultantes son de menor tamaño y con mayor calidad. Ejemplos de programas de optimización de fotografías hay a montones, por ejemplo GifBot, Rea Compresor, Advanced JPG compressor, Image Compressor, etc.
Referencias en DesarrolloWeb.com sobre optimización de fotografías
Dejamos aquí algunos enlaces a artículos de DesarrolloWeb.com donde hemos hablado sobre los formatos gráficos para la web o sobre optimizar fotos.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...