Lo hice y lo entendí

El blog de Vicente Navarro
18 dic

Servir con Apache imágenes con marca de agua (watermark)

A menudo veo páginas (sobre todo blogs y tiendas online) que “firman” las imágenes que muestran con algún logo o con la dirección web de la página para que si les “roban” las imágenes, al menos sea fácilmente visible el origen de la misma. A ese logo/texto/imagen que superponemos sobre otra para identificar su origen se le suele llamar marca de agua o watermark.

Yo no tengo especial interés en hacer lo mismo con las imágenes de este blog. Al principio de tener la página, sí que detecté muchas páginas que “robaban” imágenes sin citar el origen, pero lo grave no era eso, porque que te copien una imagen en un sitio como este no tiene mayor importancia. Lo realmente grave era que yo detectaba el “robo” porque encima hacían hotlinking a las imágenes de mi sitio, sisándome parte del escaso ancho de banda que yo tenía dado que era un hosting casero. De cómo evitar esto en la medida de lo posible ya hablé en: Hosting casero HOWTO.

El “robo” de imágenes normalmente ocurre porque alguien copia un artículo entero (lo cual es totalmente legítimo si se respeta la Creative Commons), incluidas imágenes (si es con hotlinking ya no me parece tan legítimo) o porque alguien la ha encontrado en los buscadores de imágenes. El tráfico que traen los buscadores de imágenes, según la temática de la página, normalmente es muy poco agradecido: Necesito una imagen para un proyecto, la busco, la copio y se acabó… ¿De qué iba la página de donde he cogido la imagen? ¿Y a quién le importa? Por eso yo, en mi robots.txt, prohíbo que se indexen las imágenes (Remove an image from Google Image Search). No es el tipo de visitante que espero para mis entradas.

Sin embargo, en ciertos casos, como el de una tienda online, tiene mucho sentido que sus imágenes se puedan encontrar fácilmente. En varias ocasiones he tenido que buscar un adaptador de algún tipo y lo he localizado mucho más fácilmente en la búsqueda de imágenes que en la textual y casualmente, los sitios suelen ser tiendas que los venden. Todo perfecto.

Ésos son los casos en los que puede resultar más interesante aplicar una marca de agua a las imágenes del sitio. Como decía, no tengo ningún especial interés en hacerlo, pero sí que en su momento me intrigó el cómo hacerlo, y el resultado es el que podéis leer aquí.

Si nos centráramos en WordPress, existe un plugin, el Marekki’s Watermark, que yo he probado, y que me ha dado muy buena sensación. Sin embargo, no me han gustado dos cosas: que sea necesario modificar los ficheros estándar de WordPress para instalar el plugin y que te suba las nuevas imágenes ya con marca de agua sin mantener ninguna copia del archivo original. A mí me gusta mucho más conservar la imagen original fácilmente disponible para así poder variar o eliminar la marca de agua cuando queramos.

Vamos a ver cómo podríamos hacerlo en nuestra página actual que funcione con Apache y con las excelentes herramientas de ImageMagick. Por si alguien no lo conoce, ImageMagick es una colección de utilidades para editar imágenes en la línea de comandos. Sus posibilidades son infinitas y se trata de un software que nunca deja de sorprendernos. Si no existiera, habría que inventarlo. Tenemos un montón de tutoriales en Examples of ImageMagick Usage.

Para empezar, tenemos que preparar la marca de agua. En mi caso, voy a usar una imagen con el texto “www.vicente-navarro.com” y un poco de sombra:

www.vicente-navarro.com

y mi foto:

Super Coco

Para obtener la imagen del texto, he usado los comando convert y composite de ImageMagick de la siguiente forma:

$ convert -size 210x25 -gravity Center -background none -fill "#046380" -font "DejaVu-Sans-Bold" -pointsize 16 label:"www.vicente-navarro.com" vn1.png
$ convert -size 210x25 -gravity Center -background none -fill "#EFECCA" -font "DejaVu-Sans-Bold" -pointsize 16 label:"www.vicente-navarro.com" vn2.png
$ composite -geometry -2-2 vn1.png vn2.png vn.png
$ rm vn1.png vn2.png

Por cierto, para ver la lista de fuentes disponibles en el sistema para usar en la opción -font, podemos hacer un “convert -list font“.

Ahora, para convertir esto (de ¿Cómo hacer cables de red?):

Nos tomamos un descanso...

en esto:

Nos tomamos un descanso (con watermark)

sólo tenemos que ejecutar estos comandos:

$ composite -gravity SouthEast -geometry +10+10 -dissolve 70 sc.png cable_descanso.jpg wmtemp.png
$ composite -gravity South -geometry +0+10 -dissolve 60 -quality 90 vn.png wmtemp.png cable_descanso_wm.jpg
$ rm wmtemp.png

Vale, ya sabemos ponerle la marca de agua a una imagen. Pues ahora vamos a tener dos directorios de imágenes, el que tiene las imágenes sin modificar, como hasta ahora, y otro sólo con las imágenes a las que queremos aplicar la marca de agua. Posteriormente, crearemos una Rewrite Rule de Apache para que éste sirva la imagen con watermark si existe o la estándar si no existe. Así podremos modificar la marca de agua muy fácilmente cuando queramos o, directamente, eliminarla.

Por ejemplo, en mi caso, con WordPress, yo tengo las imágenes en los directorios img/año/mes/ (p.e. img/2008/08/). Voy a crear una estructura de directorios paralela para imágenes con marca de agua bajo imgwm/:

mkdir -p imgwp/2008/08

Y ahora, usando un pequeño script como éste:

#!/bin/bash
composite -gravity SouthEast -geometry +10+10 -dissolve 70 sc.png $2/$1 temp.png
composite -gravity South -geometry +0+10 -dissolve 70 vn.png temp.png $3/$1
rm temp.png

le añadimos la marca de agua a las imágenes a las que nos interese, guardándolas en el nuevo directorio y, sobre todo, sin modificar las originales:

./ponwatermark.sh partimage1.png img/2008/08 imgwm/2008/08
./ponwatermark.sh partimage2.png img/2008/08 imgwm/2008/08
./ponwatermark.sh partimage3.png img/2008/08 imgwm/2008/08
./ponwatermark.sh partimage4.png img/2008/08 imgwm/2008/08
./ponwatermark.sh partimage5.png img/2008/08 imgwm/2008/08
./ponwatermark.sh partimage6.png img/2008/08 imgwm/2008/08
./ponwatermark.sh partimage7.png img/2008/08 imgwm/2008/08
./ponwatermark.sh partimage_dmraid.png img/2008/08 imgwm/2008/08
./ponwatermark.sh partimage_rec_1.png img/2008/08 imgwm/2008/08
./ponwatermark.sh partimage_rec_2.png img/2008/08 imgwm/2008/08
./ponwatermark.sh partimage_rec_3.png img/2008/08 imgwm/2008/08

Y, finalmente, ahora queremos decirle a Apache: Mira, si el navegador te pide img/2008/08/partimage1.png, antes de servir la imagen, mira a ver si existe el fichero imgwm/2008/08/partimage1.png y si es así, sirve esta última y no la original.

Para ello, pondremos la siguiente RewriteRule en el fichero .htaccess de alguno de los directorios superiores al de imágenes:

<IfModule mod_rewrite.c>
RewriteCond %{DOCUMENT_ROOT}/imgwm/$1 -f
RewriteRule ^img/(.*) /imgwm/$1 [L]
</IfModule>

En mi hosting actual, curiosamente, la variable %{DOCUMENT_ROOT} no funciona, por lo que me toca poner el path completo en la RewriteCond:

<IfModule mod_rewrite.c>
RewriteCond /path/completo/al/directorio/imgwm/$1 -f
RewriteRule ^img/(.*) /imgwm/$1 [L]
</IfModule>

La variable $1 de la RewriteCond se obtiene de la expresión regular de la RewriteRule: ^img/(.*), que indica que se guarde todo el texto que sigue a img/ en la variable $1. La opción -f comprueba si el fichero %{DOCUMENT_ROOT}/imgwm/$1 existe y, en tal caso, se reescribe la URL para que se sirva la imagen %{DOCUMENT_ROOT}/imgwm/$1 en vez de %{DOCUMENT_ROOT}/img/$1.

Por ejemplo, el navegador pide:

http://www.vicente-navarro.com/blog/wp/img/2008/08/partimage1.png

Apache mira si en el sistema de ficheros existe el fichero:

/path/completo/a/blog/wp/imgwm/2008/08/partimage1.png

y si es así, se sirve en su lugar:

http://www.vicente-navarro.com/blog/wp/img/2008/08/partimage1.png

en caso contrario, se sirve la imagen original.

Temporalmente (antes o después lo quitaré), podéis ver el resultado en las imágenes de la entrada: Alternativas al Ghost para crear imágenes de NTFS en Linux: Partimage y ntfsclone.

:wq

Entradas relacionadas

4 Comentarios a “Servir con Apache imágenes con marca de agua (watermark)”

  • Anubys dice:

    Como siempre me dejas flipado con tus articulos se nota que te los curras si señor , muy bueno

    nunca me acuesto sin conocer algo nuevo gracias a ti ;)

    Un saludo

  • Liamngls dice:

    ¿Y no te mola más el sistema ‘de toda la vida’ de poner una imagen exclusiva para el hotlinking?

    Total, el que hace hotlinking rara vez respeta la licencia, del modo tradicional le jodes la entrada al dejársela sin imágenes :-)

  • @Anubys ¡Gracias!

    @Liamngls Bueno, para evitar el hotlinking, yo simplemente no sirvo la imagen en cuestión. Podría poner la típica imagen de “no hagas hotlinking”, pero de momento me vale así. Sin embargo, en esta entrada, yo quería centrarme más bien en los casos en los que puede interesar el hotlinking pero en los que quede claro de dónde es la imagen original (p.e. una tienda online).

Trackbacks y pingbacks:

Tema LHYLE09, creado por Vicente Navarro