Agregar la licencia a una imagen con CSS de forma poco intrusiva

Cuando generamos contenido gráfico, sean fotografías o banners para ilustrar nuestros contenido, muchas veces es necesario dejar en claro la licencia en que puede ser distribuida en otros sitios web u otros medios. La forma tradicional de mostrar una licencia, es por medio de una marca de agua, pero resulta intrusiva para quien la observa y le resta estética. Gracias a un sencilla técnica CSS propuesta por Derek Powazek es posible mostrar una imagen o fotografía sin agregar molestas marcas de agua o mensajes sobre la imagen y dificultarles el trabajo a quienes no acostumbran respectar las licencias.

De forma general esta técnica consiste en crear una imagen con un claro mensaje de licencia al pie de la imagen y ocultarlo cuando se muestre en nuestro con CSS. En forma metodológica:

1. Por medio de un programa de edición de imagen como Photoshop, agrega un mensaje al pie de la imagen con los datos que creas convenientes.
   
   


2. Observa las dimensiones que usa únicamente la imagen (sin el mensaje), alto y ancho en pixeles.
   
   


3. Inserta la imagen con el mensaje de licencia en tu web siguiendo el siguiente esquema:
   

   <div style='width:450px; height:280px; overflow:hidden; background: url(http://tu-sitio.com/fotografia.jpeg) no-repeat;' >
   </div>

   
   

   Donde el ancho (width) y el alto (height) son las dimensiones de la imagen sin mensaje.



4. El resultado es simplemente la imagen sin mensaje alguno… a simple vista.
   
   

Con esto, mostramos una imagen libre de texto y cualquier persona que la guarde lo hará con la respectiva licencia de uso. La técnica para nada es infalible, pero si evita el plagio de los usuarios más inexpertos y le da más trabajo a los usuarios que saben de esto.