AdrianGuerrero
Épsilon
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
A raíz de la publicación de mi artículo “Fotografía de producto para webs una parte importante del ecommerce” varios usuarios me pidieron que si podía hacer un nuevo post, sobre como hacía yo la optimización de imágenes para sitios web. El gran inconveniente de todo esto es que no existe una ciencia exacta para optimizar imágenes, por lo que la apreciación que tenemos de las imágenes por lo general pasa a estar en manos de la persona que se ocupa del sitio web. En este artículo voy a hablar de algunos puntos que considero importantes a la hora de realizar la optimización de imágenes para una página web.
CÓMO OPTIMIZAR IMÁGENES PARA WEBS
Plugins/Addons/Módulo para la optimización de imágenes
En este punto siempre me viene a la cabeza Chema Alonso cuando dice “verdaderamente a nosotros no nos importa la seguridad”. Sinceramente estoy muy de acuerdo con él, porque no utilizamos siempre contraseñas todo lo seguras que podrían llegar a ser.
Pues este punto lo extrapolo a la optimización de sitios web (WPO, muy de moda ahora) y la optimización de imágenes. Muchos artículos de blogs muy conocidos hablan de usar un plugin, módulo o addon para optimizar las imágenes del mismo sitio web. Es respetable esta técnica, pero yo prefiero hacer un trabajo previo, no instalar un plugin y destinar los recursos de mi instalación a otros fines más importantes. Como digo esto es totalmente respetable, incluso si subes mucho contenido al día, puede ahorrarte mucho tiempo pero también es posible subir las imágenes ya optimizadas al sitio web.
Máquina donde se alojan las imágenes y servidor web
No quiero ser muy pesado con este tema el cual he tocado ya en otros artículos, pero es que es una de las partes que no se ve tanto y tiene más importancia de la que así a priori parece. Por un lado el servidor (hosting) donde vayan a estar alojadas las imágenes, debe tener una configuración óptima (es la base de todo).
También he hablado ya de Apache, Nginx, Varnish y LiteSpeed en otros artículos pero es que también es importante conocer que LiteSpeed sirve de una forma más rápida todo tipo de contenido, tanto estático como dinámico. Varnish bajo mi experiencia puede llegar a ofrecer métricas similares a las de LiteSpeed o inlcuso en ciertos casos ligeramente mejores, no obstante trabajar con Varnish a veces es tedioso para un usuario sin conocimientos avanzados en estos temas.
Tamaño de las imágenes y resolución
El porcentaje de navegación desde dispositivos móviles cada día es mayor, así que una imagen en un sitio web que pesa 9,33 megas, es un problema y gordo. Por lo que a continuación voy a ir nombrando cuales son aquellos puntos donde yo me fijo a la hora de optimizar imágenes con Adobe Photoshop.
1. Ajustar la fotografía al sitio web acorde al tamaño requerido
Sé que muchas veces los esquemas que se hace uno sobre papel o en la cabeza de la distribución de los elementos en el sitio web, no siempre acoplan de la misma forma cuando toca llevarlos a la pantalla. Si el espacio que me queda para colocar una imagen es de 800×600, ajustaré la imagen para que se sirva a dicha medida (teniendo en cuenta que es posible que se sirva en pantallas 2k o 4k).
Voy a poner el ejemplo de trabajar con una imagen de 1280x720px, así que lo primero que hago es irme a Photoshop y establecer las medidas que voy a usar, por otro lado trabajaré con 72ppp ya que los monitores no leen 300ppp a pesar de que la cámara me exporte así la fotografía.
Acoplo la imagen que quiero mostrar en el sitio web, aquí te puedes recrear tanto como quieras, desde jugar con balances de blanco, hasta añadir nuevas campas con nuevos elementos (texto, formas, etc). Yo no voy a añadir ningún elemento más a la fotografía original, considero que la fotografía transmite todo aquello que busqué en su día, por cierto está hecha con trípode.
2. Acceder a Guardar para Web…
Una vez consideres que has terminado con tu trabajo de producción, lo suyo es guardar la fotografía. Una recomendación propia mía, es que primero guardes el archivo en el formato nativo de Photoshop (.psd/.psb) y después ya pases a realizar tantas pruebas de guardado optimizado como quieras. Recuerda que tener una copia del archivo original, te ahorrará dolores de cabeza en alguna que otra ocasión.
Como puedes ver en la imagen anterior, haciendo clic sobre Archivo, te permitirá ir hasta el ítem en el menú que dice Guardar para Web…
Una vez que hayas hecho clic sobre Guardar para Web… te aparecerá una pantalla similar a la que muestro en la imagen siguiente ¡Sí! lo sé hay muchas variables que controlar y al principio puede ser que asuste un poco, sin embargo te voy a ir explicando cuales son las variables con las que juego yo para optimizar una imagen y que controlo sobre la imagen para no ofrecer una imagen muy optimizada para de mala calidad.
3. Trabajando en la ventana de Guardar para Web…
En la captura de pantalla anterior, he decidido numerar algunas partes que voy a explicar a continuación;
1. JPEG/PNG/GIF
Aquí puedes elegir en que formato se exportará la imagen una vez guardada. En mi caso, como no estoy trabajando con transparencias y estoy ante una imagen con bastante calidad, he seleccionado JPEG.
2. Calidad – Baja/Mediana/Ata/Muy alta/Máxima
A mano derecha encontrarás el campo que hace referencia a la calidad, permite jugar con un valor entre 0 y 100, siendo 0 la calidad mínima de imagen y 100 la máxima ¿Parece lógico no? El campo que se encuentra a mano izquierda trabaja en función del valor establecido en el campo de la calidad. Quiero decir que si colocas un valor entre 30 y 60, te marcará que la calidad es mediana. Si te decantas por un valor entre 60 y 99 te encontrarás con que la calidad de la imagen es muy alta. Si te quedan dudas en relación a este punto, siempre podrás dejarme un comentario o encontrarme en redes sociales, estaré encantado de ayudarte.
3. Tamaño de imagen
Desde aquí también puedes controlar el tamaño de la imagen, pero recuerda que en la fase inicial ya he hecho mención a este punto.
4. Compresión y peso de la imagen
Más que una variable es un campo puramente indicativo en el que en tiempo real te va a informar de cuál es la compresión de tu imagen, así como también el peso del archivo. Este valor se verá afectado por cada cambio que realices en la parte derecha de esta ventana.
Todo esto está muy bien ¿pero en qué me fijo para realizar la optimización de una imagen? Antes de entrar en materia quiero decir con toda sinceridad que entro en un terreno muy subjetivo donde es posible que cada persona tenga una apreciación diferente al respecto, pero voy a intentar hacerlo lo mejor posible.
CLAVES PARA OPTIMIZAR IMÁGENES EN PHOTOSHOP
Aquí entran en juego 3 variables, peso del archivo, calidad de la imagen y la percepción del ojo humano. Cada imagen es un mundo, yo como ya he explicado no he elegido esta imagen al azar sino porque considero que tiene todo aquello que me hace falta para explicar correctamente este punto.
Yo empezaría con una configuración similar a la pantalla que muestro en la imagen anterior. Recuerda que la imagen original tenía un peso de 9,33 megas, la he bajado hasta 175 KB sin mucho esfuerzo, pero quiero ir un paso más allá y voy a ir optimizándola más todavía a la vez que voy marcando en que puntos me fijo.
Como puedes ver en la imagen anterior, he bajado la calidad de la imagen hasta 45 y he marcado sobre la previsualización de la imagen en naranja algunos puntos que me dan referencias para saber hasta donde puedo optimizar la imagen sin perder calidad al ojo humano.
Me fijo en que los bordes no pasen a ser elementos poco nítidos, de forma similar hago lo mismo con los impactos de luz (brillos), así como también controlo en algunas superficies que el color siga siendo homogéneo. Obtengo un peso para el archivo de 156,6 KB, bastante bueno si tienes en cuenta que las medidas de la imagen son de 1280x720px y que he intentado en todo momento, controlando algunos factores que la calidad de la imagen no se vea degrada por esta optimización.
CLAVES PARA OPTIMIZAR IMÁGENES ONLINE
En un artículo anterior ya hice mención a algunas herramientas online para optimizar imágenes. Estas son algunas herramientas accesibles vía web para este cometido:– compresspng.com
– compressjpeg.com
– optimizilla.com
– compressor.io
Yo me voy a decantar por optimizilla.com porque es la que más me gusta y dejando los gustos atrás, porque ofrece poder realizar varios ajustes para jugar con la optimización de las imágenes. Cierto es que no ofrece tantas opciones como lo hace Adobe Photoshop, pero para ser totalmente gratis está bastante bien.
Bueno pues como puedes ver en la imagen siguiente, juego con casi los mismos valores con los que he jugado anteriormente en Adobe Photoshop. Es cierto que no me ofrece tanta información como lo hace Photoshop, sin embargo paso a fijarme en los mismos puntos que he comentado anteriormente (los marco en naranja sobre la imagen siguiente).
MIX PARA OPTIMIZAR IMÁGENES PARA PÁGINAS WEB
Empezaré diciendo en este punto que no siempre recomiendo aplicar este método sin embargo algunas veces a modo experimento lo he aplicado y me ha salido bien, pero ¡Cuidado! no siempre he obtenido el resultado que esperaba conseguir. Este método trata en utilizar varios softwares de compresión a la vez, pero lo hago de una forma “lógica para mí” pasó a explicarla a continuación:
Lo primero que hago, es irme a Photoshop y realizar la optimización de la imagen como he explicado anteriormente ya, pero en este caso siempre tiro un poquito más por lo alto en la calidad de la imagen, fíjate en la captura de pantalla que muestro a continuación, el valor que he colocado es 75.
La imagen optimizada que me ha generado Photoshop, la subo a optimizilla.com y aquí paso a optimizar la imagen de la misma forma que he explicado anteriormente, siempre controlando que la imagen no pierda calidad.
¿Qué busco con esta técnica?
Bueno, como ya he comentado al principio a veces me ha salido bien y otras no tan bien. Lo que trato es sacarle el máximo partido al motor de optimizado de Photoshop y al de optimizilla.com. Posteriormente comparo la calidad de las imágenes obtenidas, las veo en distintos tipos de pantallas y valoro si de verdad vale la pena usar la optimizada por una sola herramienta y esta final.
Lazy load
Esta característica también es conocida como carga diferida, a mí personalmente no me gusta mucho porque si hago scroll muy rápido hasta la parte inferior de la página web, a veces tengo que esperar a que las imágenes se carguen. Pero reconozco que es un buen método para optimizar la carga de las imágenes de un sitio web.
Quiero dar las gracias a Manu R. por permitirme usar una fotografía que realicé en local en pleno centro de la ciudad de Valencia. Tras revisar todo el artículo me he dado cuenta de que posiblemente esté muy enfocado a un perfil algo más técnico, no obstante si puedo profundizar más en algún punto en concreto porque no queda del todo claro, por favor házmelo saber dejándome un comentario o localizándome en redes sociales ¡Gracias y nos vemos pronto!
