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.

    licencia-campeche.jpg

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

    licencia-campeche-css.jpg

  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.