Cómo optimizar una imagen
JPEG para la web
Hoy en
día, tener un sitio web, que sea lento en cargar la información, no es la mejor
opción. En la mayoría de los casos, se puede señalar con el dedo acusador a tus
imágenes. Las imágenes pueden ser responsables de los tiempos de carga lentos y
por lo tanto afectará el rendimiento general de su sitio web. Esto no es una
buena noticia en absoluto. Afortunadamente, tenemos diferentes maneras en
las que puedes optimizar tus imágenes JPEG destinadas a tu sitio web.
Pero la última cosa que debemos hacer es sacrificar la calidad de la imagen.
Lo mas
importante es que tus imágenes se vean impresionantes, nítidas y claras. Por
suerte, disponemos de muchos métodos y herramientas avanzadas, que son capaces
de mantener una buena calidad de imagen, mientras que perdemos algunos de esos
bytes no deseados.
En el
artículo How to optimise a JPEG image for the web,
editado por webdesignshock.com, nos dejan algunos consejos para
optimizar una imagen JPEG para la web, y nos proporcionan varios métodos.
Con Adobe
Photoshop:
La opción
Guardar para Web y dispositivos, en Photoshop significa que puedes
optimizar tus imágenes destinadas a la Web con facilidad. Este método es muy
popular entre los usuarios y es un medio muy eficaz de preparar imágenes para
la Web, y el más recomendado. Estos son los pasos:
- Abre tu imagen en Photoshop, y luego tienes que ir a Archivo, y por último Guardar para Web y dispositivos.
- Un cuadro aparecerá entonces le presenta con una variedad de opciones. Para que sea más fácil comparar la imagen original y su optimización, es una buena idea seleccionar la pestaña 2 copias (o 4 copias) para que sean capaces de ver las dos imágenes en una pantalla dividida.
- En la opción Ajustes preestablecidos, seleccione la opción JPEG, con la calidad de compresión (alta, media y baja). Bajo la opción Calidad hay un deslizador que puede ser usado para ajustar la calidad. En el visor, se puede controlar la calidad de la imagen editada optimizada, mientras que controlamos el seguimiento de su tamaño final.
- Una vez que estés satisfecho con el nivel de calidad y está en un tamaño reducido deseado, puedes pulsar el botón Guardar.
En el
ejemplo que he emplado para comprobar el proceso, partí de una imagen de
1536x1024 px de 4.5 MB, y el resultado final después de la compresión y
reducción de tamaño, quedó a 600x400 px que ocupan 200 KB, eso es más manejable
que la imágen original y las pérdidas de calidad no son muy apreciables a
simple vista.
Difuminado
con Photoshop CS5:
El
desenfoque se utiliza para reducir la frecuencia de datos más altas con el fin
de reducir el peso de la imagen. La opción para difuminar fondos es muy
interesante, ya que significa que la parte principal de una imagen no se ve
afectada. Pasos para realizar este procedimiento:
- En primer lugar, abrimos la imagen con Photoshop. Luego, hacemos una copia duplicada, para ello vamos al menú Capa y luego en Duplicar capa.
- En la nueva capa, vamos al menú Filtro, y seleccionamos Desenfocar, con las opciones de desenfoque disponibles. Un cuadro de diálogo aparecerá, donde usted puede elegir la medida de su efecto de desenfoque. Esto puede desdibujar la imagen completa.
- A continuación, tendrá que traer de vuelta los principales elementos de tu imagen de nuevo en el foco. Para ello, seleccione la opción de borrado. Elija un cepillo suave y decidir sobre el tamaño apropiado. Comience a cepillar las áreas que desea poner en foco. Su fondo borroso se mantendrá.
- A continuación, tendrás que seleccionar dos de las capas y haga clic derecho para seleccionar Combinar capas. Este se comprime en un solo archivo.
Con la
técnica de desenfoque a pesar de ser bastante rápida en ejecutar, se consigue
reducir el peso de una imagen, aunque no de manera tan espectacular como el
método anterior.
Con Adobe
Fireworks CS5:
Optimizar
las imágenes con Adobe Fireworks CS5 también es una gran manera de controlar la
calidad y el tamaño. Los pasos son los siguientes:
- Abre tu imagen para empezar. Luego ves al panel Optimizar en el lado derecho de la pantalla. Selecciona la opción JPEG y su calidad en el menú desplegable. Al igual que Adobe Photoshop, puedes seleccionar una opción de 2 o 4 vistas en la parte de arriba para ver la imagen.
- A partir de aquí, puedes probar las diferentes opciones en los ajustes de calidad. El tamaño del archivo y tiempo de descarga que se se mostrará debajo de tu imagen para que pueda jugar un poco hasta que te salga como deseas. Puedes aumentar el suavizado para que el archivo aún sea más pequeño.
Para exportar la imagen, sólo tiene que seleccionar
la imagen editada y seleccione Archivo, y luego Exportar, para darle un nombre
de archivo en consecuencia a tu imagen.
Uso de
una máscara JPEG con Fireworks CS5:
Esto es
muy parecido a desdibujar fondos en Adobe Photoshop. El procedimiento es el
siguiente:
- Comienza abriendo la imagen con Adobe Fireworks CS5. Luego utiliza la herramienta Recuadro para seleccionar el área que deseas mantener en foco.
- Una vez que se selecciona esta opción ves a Seleccionar, y luego a Seleccionar inverso, y seleccionarás el fondo.
- Para difuminar el fondo, selecciona Modificar, y luego en JPEG selectivo, y Guardar selección como máscara JPEG. El fondo será entonces resaltado y listo para ser borroso. En el panel Optimizar ahora se puede desenfocar el fondo utilizando una cantidad en Calidad selectiva. Puede hacer pulsar en Vista previa para ver cómo se ve.
Herramientas
en línea para redimensionar las imágenes:
- Yahoo Smush.It se puede utilizar, además, después de poner tu imagen a través de Photoshop. Esto también está disponible como una extensión de Firefox. La herramienta es realmente rápida y fácil de usar, por lo que comprime tus imágenes aún más, sin ninguna pérdida de calidad. Simplemente tienes que subir una imagen o introducir su URL, a continuación, puede pulsar el botón Smush y tu imagen se comprime aún más. Luego selecciona la descarga de la imagen para guardarla en tu ordenador.
- Riot es una herramienta de optimización de imágenes para usuarios de Windows. Al igual que Photoshop es capaz de ver la imagen original y la imagen editada en una pantalla dividida para facilitar la comparación. No se eliminarán todos los meta datos innecesarios de la imagen, e incluye algunas características de edición básicas.
- Shrink O’Matic permite comprimir imágenes JPG en lotes si es necesario. Puede elegir el tamaño de salida, su nombre y el formato de salida de las imágenes. Una vez que estos factores se determina solo tienes que arrastrar las imágenes a lo largo de la aplicación. En ese momento puedes empezar a redimensionar con facilidad la salida.
- JPEG mini es otra herramienta que podría ser considerado como una solución rápida eficaz. Basta con subir tu imagen y esperar unos segundos, mientras que la comprime. Luego te dice lo mucho que se ha reducido en tamaño. También dispone de un deslizador para utilizar sobre la imagen, para probar la diferencia en cuanto a la calidad.
Y esto es
todo, espero que te sea de utilidad.
No hay comentarios:
Publicar un comentario
Su comentario pasara por moderacion antes de ser publicado, Gracias.