Voy a enseñaros 4 trucos para proteger las imágenes de tu web, y evitar que puedan descargarlas y utilizarlas en otros sitios.
Proteger las imágenes de tu web es una de las tareas que todo desarrollador web o blogger debería de utilizar para conservar el copyright de sus fotografías.
Aunque estas técnicas no son infalibles, ya que existen opciones para saltarse estas protecciones, si que al menos ahuyentarán a un gran numero de usuarios de conseguirlo.
Vamos a dejarnos de historias y empecemos....
Unas de mis opciones preferidas y útiles de todas es la de deshabilitar el botón derecho del ratón. Para ello añadimos una etiqueta de bloqueo, con o sin un aviso, para que no puedan desplegar el menú para copiar la imagen.
Está técnica no afecta al tiempo de carga de la página y es muy fácil de implementar, tal y como os muestro a continuación:
<img="imagen.png" oncontextmenu="return false"/>Un sencillo y gracioso truco consiste en colocar un gif transparente sobre tu imagen o fotografía. De esta manera, cuando alguien haga intente guardarla, se llevará una sorpresa al ver que lo que se ha descargado es un gif transparente que le servirá únicamente para enfadarse 🙂
El código que debes de utilizar es el siguiente:
<img style="background-image:url(no-copiar.png);" src="data:image/gif;base64,
R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="500" height="300">A destacar que no-copiar.png es el gif transparente, y el width y height deben de ser los tamaños que tengas tus imágenes o fotografías.
Desventajas:
Al utilizar esta técnica, debéis de añadir unos valores fijos a la imagen, por lo que si tienes una web responsive te la cargas. Por tanto no es muy recomendable.
Ralentiza nuestra web, no es que sea algo excesivo, pero si a tener en cuenta.
Si vas a crear un portfolio con muchas imágenes puede ser una opción de gran utilidad para proteger las imágenes de tu web.
Además te ahorras código al no tener que incluir código en cada imagen.
El código Javascript para impedir la copia de imágenes en toda tu página sería el siguiente:
<script type="text/javascript" language="Javascript">
document.oncontextmenu = function(){return false}
</script>Entre las desventajas que te puedes encontrar con esta técnica están las siguiente:
Un ligero aumento en los tiempos de carga de la página.
Evitas la opción del botón derecho de otras funciones, como las de abrir enlaces en otras pestañas.
El texto si que puede copiarse y pegarse en otro lugar, por lo tanto no sirve si lo que deseáis es proteger todo el contenido de vuestra página.
Si lo que quieres es evitar la copia de todo el contenido de tu web, tanto imágenes como texto, lo que tienes que hacer es añadir el siguiente código dentro de la capa <div> donde se encuentre el contenido que deseamos proteger.
<div class="contenido" oncontextmenu='return false' ondragstart='return false'
onmousedown='return false' onselectstart='return false'>En WordPress podemos proteger las imágenes desahibitando el botón derecho del ratón mediante el plugin No Right Click Images. Este plugin elimina el menú contextual mediante JavaScript.
- Protege tus imágenes de "ladrones" mediante metadatos que te identifiquen con el autor de la fotografía.
- Crea marcas de agua. Si las aplicas bien evitarás, en gran parte, que te copien tus fotografías.
Como veis existen muchos métodos para proteger tus fotografías, imágenes, diseños, logotipos e ilustraciones en Internet. Ninguno es 100% efectivo, te digan lo que te digan, pero probablemente consiga disuadir a más de algún listillo que quiere apropiarse de tu trabajo.
Y tú ¿Conoces algún otro método para proteger imágenes en internet? ¿Aplicas algunos de estos métodos anteriormente comentados? Cuéntamelo, y déjame tu opinión en los comentarios del artículos. ¡Gracias!
Todos hemos estado allí: tienes 20 pestañas abiertas, cinco PDFs y tres hojas de cálculo,…
Si ya estás usando Google Nano Banana, sabes que es la herramienta que está redefiniendo…
¿Te ha pasado? Estás en plena conversación con Gemini, fluyendo con ideas, y de repente……
¿Alguna vez soñaste con ser una de esas figuras coleccionables que tanto te fascinaban de…
Imagina caminar por las calles iluminadas de París al atardecer, con la Torre Eiffel brillando…
¿Imaginas crear aplicaciones inteligentes que resuelvan tus problemas cotidianos sin escribir una sola línea de…
Esta página utiliza cookies para mejorar su rendimiento
Ver comentarios
hola, donde tengo que pegar el link de la opción 1?
Buenos días Blas, debes de insertar el código en la imagen, tal y como aparece en el artículo, cambiándo únicamente el nombre de la imagen que en el ejemplo pone "imagen.png" por el tuyo.
Un saludo.