My Site Preloader
Skip to main content

Una alternativa efeicaz para que no se pueda descargar una imagen con click derecho.

Si estas buscando una alternativa para el usuario no pueda descargar o copiar una imagen, te presento una forma que me ha salvado el día y el diseño.

Forma tradicional para incrustar una imagén

Para poder incrustar nuestra imagen usamos la tradicional y siempre conocida linea de código:
<img src="buy.svg" alt="icon buy vector" width="193px" height="192px">
icon buy vector

Para no saltarnos y cumplir con los estandares de accesibilidad de la W3 usaremos un truco algo sencillo, usaremos la clase sr-only que hara que sea leido por los buscadores pero no para el ojo humano en nuestra pantalla.

.sr-only {clip: rect(0, 0, 0, 0);border-width:0;height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;}

Dicho esto, procedemos hacer nuestra clase, para ello usaremos el nombre de la imagen, no más pa´no perdernos pues.

.buy {width:193px; height: 192px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj4NCjwhLS0gQ3JlYXRvcjogQ29yZWxEUkFXIDIwMTcgLS0+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxLjMyOW1tIiBoZWlnaHQ9IjUwLjhtbSIgdmVyc2lvbj0iMS4wIiBzdHlsZT0ic2hhcGUtcmVuZGVyaW5nOmdlb21ldHJpY1ByZWNpc2lvbjsgdGV4dC1yZW5kZXJpbmc6Z2VvbWV0cmljUHJlY2lzaW9uOyBpbWFnZS1yZW5kZXJpbmc6b3B0aW1pemVRdWFsaXR5OyBmaWxsLXJ1bGU6ZXZlbm9kZDsgY2xpcC1ydWxlOmV2ZW5vZGQiDQp2aWV3Qm94PSIwIDAgNTEzMi45IDUwODAiDQogeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KIDxkZWZzPg0KICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KICAgPCFbQ0RBVEFbDQogICAgLmZpbDAge2ZpbGw6IzM1MzUzNn0NCiAgIF1dPg0KICA8L3N0eWxlPg0KIDwvZGVmcz4NCiA8ZyBpZD0iQ2FwYV94MDAyMF8xIj4NCiAgPG1ldGFkYXRhIGlkPSJDb3JlbENvcnBJRF8wQ29yZWwtTGF5ZXIiLz4NCiAgPHBhdGggY2xhc3M9ImZpbDAiIGQ9Ik0yMzIuNTMgMTM1Ni42NmM1NDAuNzcsLTE0MS4wMiA5OTQuNDUsMTYuOTYgOTA0LjMzLDY0NC45IC0yNjguMjcsMjkyLjU1IC00ODcuMTIsMzUyLjg3IC05MDkuMTMsMjQ1LjQ4bDQuOCAtODkwLjM4em04OTYuODkgLTc5OS41M2M0Mi4wMiwxNDEuNzkgNjEuOTUsMjA3LjExIC00MC4yLDI5Ny42NiAtMTczLjI0LDM0MS40OSAtNDg4LjMxLDMzNC4yNiAtODYxLjI5LDI1OC41N2wxLjAxIC04ODMuNmMzOTQuNjksLTg2LjUxIDc2Mi42LC04My40MSA5MDAuNDgsMzI3LjM3em0tMjYzLjA5IDE5MjUuMTZjMC4wNywtMC4wNyAxMDA3LjAyLC02ODAuMzkgMjAxLjA0LC0xMTg1LjgyIDE3Mi42MiwtMzQzLjcxIDUwNi44NSwtNjQ1LjQ2IDExMi40OSwtMTA2OS41IC0yNjcuMDUsLTI4Ny4yMSAtODA0LjE2LC0yMzcuNiAtMTE2OC40NywtMTkxLjc3bDI1Ljc3IDI0MjIuODcgODI5LjE3IDI0LjIyem0yMjkxLjQgMTkwLjE1bC0wLjEgLTQuMzYgMTkzLjE4IC0yNS4zNWMtMC43NCwtMjY4LjM2IC04NC40NSwtNjk0LjAzIDExMi43NSwtODY5LjUgMTkzLjA5LDEyNS40MiAxNDEuOTUsOTguNDMgMTQzLjA3LDM4Ny4xNCAwLjYsMTQ5LjQzIC0wLjg0LDI4OC42OCA0LjQ1LDQzOC43MyAyMTIuODUsNDIuMjggMzc4Ljk0LDczLjY5IDU2OC4yOCwtMi41M2wtMzY5LjQgLTc1LjA3IC0yMy40NCAtOTU0LjA0YzQyLjcyLC0yOTEuNTIgOC43MiwtODYuODUgMTI0LjE5LC0yMDQuNzMgNTE5LjQ5LC0xNjUuNzYgNDAyLjY5LC04MTguNjYgNDA3LjY5LC0xMzA0LjA1bC0xODQuMjQgLTUzLjg3Yy04LjY1LDM4NC43OSAxNDIuNjMsMTI3Ni45MSAtNDg3LjE2LDEyMTMuODggLTY2MS43OSwtNjYuMjYgLTE0OC41NiwtOTg5LjU5IC00ODAuNDUsLTEyMDIuOTYgLTEzMy4wNSwxNTcgLTk0LjE3LDIyMi4yNCAtOTEuNDgsNDgxIDExLjAxLDEwNTMuODkgMzMwLjUzLDYyOS4xNCA1MjguMTUsMTAxMS4zM2wtNDA4LjE4IDE2NC4yNiAtMzcuMzEgMTAwMC4xMnptLTE0NjYuMTggLTM3My43MmM2MjIuMTQsMjEzLjU5IDMwMS4yMSwyMjAuMzggOTY3LjM5LDE5LjAyIDI1OC45NywtNzA4LjUyIDE1Ny4wOCwtOTgwLjQzIDE3MC4wOCwtMTgyMi41OSA0LjQ0LC0yODguNCA2Ny41OCwtMzg4LjggLTEzNy4yNiwtNDcxLjM4IC0yMzYuMTYsNDg3LjY5IDMyMi4xNSwyMTcxLjE4IC00ODMuNzEsMjI0MS4yOCAtNzY3LjU1LDY2Ljc4IC00OTAuNzUsLTE2MTguMzcgLTUxMy42MSwtMjE4NC4wNSAtNjUuOTUsLTQ0LjA1IDY5LjI2LC01Ni42OSAtMjEzLjEzLC03Mi40NCAxNjYuMDIsODE1LjU2IC0xNjIuNDQsMTQ1OS40NiAyMTAuMjQsMjI5MC4xNnptMTQ2Ni4wOCAzNjkuMzZsMS4wNyA3ODkuODNjLTM1OC44MiwtMjE2LjE4IC0yNjkuNzIsLTQyNy43NyAtNzcxLjEsLTM0MC4zNiAtMzY2LjU1LDQwNS4xNiAzOC42NSw2MjkuNTMgMzMxLjExLDkxOC4yOSA3NjkuNDIsNzU5LjU5IDQzNi44LDM0Ny42MiA1NDAuMTYsODU0Ljc3bDU2Ljg0IDE0Ni42OWM1LjM3LDExLjY5IDE3LjQsMzAuMDIgMjkuMDMsNDIuNzEgMTQ0LjcsLTk2LjQ4IDg5LjU3LDI4Ljk1IDExMS4xOCwtMjQzLjQ2IDYxLjI2LC03NzIuMTkgLTEwOTEuNTgsLTkzMy4xNCAtOTgyLjEsLTE1MjMuNTcgMzkyLjk0LC04MC41MiA1MzIuODMsNDAwLjE2IDg4MC42MSw1OTMuMzZsLTMuNjIgLTEyNjMuNjEgLTE5My4xOCAyNS4zNXptMTAyMS43MyAtNzEuNTFjLTE4OS4zNCw3Ni4yMiAtMzU1LjQzLDQ0LjgxIC01NjguMjgsMi41MyAtMTIuMTQsMjA1Ljc0IC00Mi45MSw0NTUuMDEgMzIuMzQsNjMwLjkyIDI2NS4xNCwtNzkuMjIgODUuOTcsNzUuNCAxNDguNjcsLTIzMC4zOCA0OC4yNiwtMjM1LjQ3IC05NS4zNiwtMTU4LjcxIDE0Ny4yNCwtMjU5Ljk0IDI2Ny4zNywyNTEuOTYgLTExMi41NiwzNTkuNzkgMjM2LjkzLDQ5Mi41MyAxMzAuODcsLTI4Ny43NyAtODUuMDQsLTMxOC4zMSAxNzguMzYsLTUwMS45OCAyNjYuNjEsMjI3LjIgLTEuOTUsMzI2LjA1IDE3OC4yMSw1OTkuMDIgMzUwLjc1LC0xMTAuNzQgLTg1LjEsLTMwNC44MyAyODUuMTMsLTQyNi45MiAxODcuMTMsMjMzLjkzIDg1Ljc1LDEyODEuNDUgODQuNTYsMTYzNS44NiAtNzcuNDEsMzAxLjYgLTI4NC4wMSwxMTIuNzQgLTEzMi4wOCw1MTYuOTUgMTMyLjMyLC0yNC44NSAyNDUuODUsLTU2LjUxIDMxMC45LC0zOTcuMDEgMjkuOTQsLTE1Ni43OCA5LjgyLC01MzQuMzMgOS44MiwtNzE0LjEyIDAsLTM3NC4wNiAxNTQuOTYsLTEwMzkuMzggLTIzNS40MywtMTIxNy4zMSAtMjUzLjk3LC0yNy45MiAtMTQ3LjE0LDQwLjUyIC0zMjYuNCwtMTMxLjc1IC0xNzUuNCwtNTguOTUgLTE2OS4yLC03NC44NyAtMzQ5Ljk3LDEuNnoiLz4NCiA8L2c+DQo8L3N2Zz4NCg==);
background-position: center center;}

Finalmente insertamos nuestra imagen dentro de un div y ¡guala! La imagen esta libre de que no pueda ser descargada.

Demo #

icon buy vector

¿Cuántas formas conoces para poder descargar una imagen? #

Me he pasado horas frente a la computadora diseñando y termino muy contento y feliz (más si existe un pago de por medio) y se siente bien feo cualquier amante de lo ajeno llegue y pum, baje el arte y ni le de credito y además obtenga un beneficio. Afortunadamente existe la opción de creditos, pero no todos lo ocupamos correctamente.

Opción 1. Click derecho #

Empecemos con la opción numero 1 más conocida, el famoso "click derecho" y luego "Save image as"

Opción 2. Touch large #

Si nos encontramos en un celular o tablet, podemos alargar el touch un par de segundos y se podra descargar imagén.

Opción 3. Imprimir pantalla #

El sreenshot es una opción presente en este conteo. Es un método sencillo a la hora de solo presionar la tecla Impr Pant o presionar los botones correctos en el celular para que se cree una imagen. Posteriormente para usar la imagen puede que sea un proceso algo laborioso y limite las opciones de edición y manipulación de la imagen. Tienes que trazar y vectorizar, recortar, poner los tamaños indicados según su el requerimiento necesario. Puff, que trabajo, aun así despues de todo el rediseño es un trabajo de uno mismo inspirado en otro. Un tema que en otro momento escribire.

Opción 4. view-source: #

Si tu tienes la necesad e instinto de busqueda al puritito estilo de Sherlock Homes, haces lo que sea posible hasta obtener lo que quieres. Esta la opción de View-source, buscamos el link donde poder descargar la imagen y listo. Objetivo logrado. Siempre y cuando no este en una base64 o quizas encriptado con algun js que no puedas leer tan facilmente, si no es así, que facil, rapido sencillo y bien logrado. Recuerda hacer la mención correspondiente, por algo es que no puedes descargarla con tanta facilidad.

Opción 5. Usa la fuente original y da el agradecimiento. #

Mejor usa la fuente original y ya. Solo que si se mueve o borra de su sitio original, el tuyo tambien se atendrá a las consecuencias. Así nos evitamos todas esas cosas de rediseñar, imprimir pantalla, js, clases y demás brujeria de código y diseño.

Opción 6. style="background-image" #

Usar SVG total

Aunque den descargar se guardara el html en su respectiva carpeta, pero n sigue siendo en lectura el svg

alt+google


View on Instagram View on Flickr View on Twitter

Like Repost Reply