Proteger imagens de serem salvas com CSS
Postado por: Pedro Rogério emVocê pode estar se perguntando o por que de utilizar técnicas desse tipo para proteger imagens de serem salvas no browser, digo-lhe que os motivos são vários e um deles é o copyright(imagens com direitos reservados), que muitas vezes os usuários não respeitam.
Essa técnica é utilizada pelo Flickr, não é 100% segura mas pode lhe evitar um pouco de dor de cabeça. Vamos a explicação da técnica: Iremos utilizar uma imagem transparente de 1px de largura e altura que ficará por cima da imagem real, com isso, quando o usuário tentar salvar a imagem, provavelmente irá clicar com o botão direito do mouse encima dela e escolherá a opção “Salvar imagem como”, e é aí que ele irá somente conseguir salvar a imagem transparente. A Marcação HTML utilizada no exemplo é a seguinte:
<div id="box"> <img src="imagem_real_aqui" alt="" title="" /> <img src="spaceball.gif" class="img_oculta" alt="" title="" /> </div>
Utilizamos a classe img_oculta que é a imagem transparente que ficará por cima da imagem real, utilizando técnica de position:relative e position:absolute:
#box {height:343px; margin:0 auto; position:relative; width:500px}
.img_oculta {height:343px; left:0; position:absolute; top:0; width:500px}
Simples, agora a imagem transparente sobrepõe a imagem real, “impedindo de ser salva”, vejam aqui nesse exemplo criado .
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
A dica é muito bacana, já utilizei essa tramóia entre várias outras.
O problema é que não tem como proteger 100%, isso vai contra o paradigma de (Client/Server)-side. Se a máquina cliente carregou, perdemos todo controle sobre o conteúdo.
Meu problema foi num sistema que gerava relatórios. O funcionários mal intencionados simplesmente alteravam dados (de forma a beneficia-los) . Foi uma dor de cabeça danada, pois pro cara realmente mal intencionado não tem barreiras.
O cumulo foi depois de várias tramóias pra assegurar os dados, o cidadão começou a dar Print-Screen na tela e alterar no photoshop.
Dureza.
Bom saber, eu tinha percebido que o flickr tinha uma forma de proteger as imagens mas não sabia como.
De qualquer jeito sou contra usar essa técnica, provavelmente isso atrapalha a acessibilidade do site além de gastar códigos em uma técnica que não é 100% efetiva.
Cara eu curto o site de montão por causa destas dicas simples e muito uteis, + que seria realmente fodão era um plugin para wordpress que adiciona-se o código automaticamente em todas as imagens deforma a não ter que editar as imagens antigas… ai fica a dica de um plugin que viraria febre isso pra quem for desenvolvedor eu não sei nem onde começar.
Acho legal as dicas postadas aqui, mas como disse o Guido até onde isso é benéfico por conta da acessibilidade e além do mais, hoje em dia devemos compartilhar informação e não atrelá-la ao um individuo só.
Mto bacana pedro. Eu usei em um cliente uma solução diferente para isso (por se tratar de uma construtora que disponibilizava plantas de casas no site), com javascript (para bloquear teclas e botão direito do mouse) e css (para que caso a pessoa resolvesse imprimir, não saía nada no papel). O único problema era bloquear a tecla
desculpa mas aki salvei a img!!
Simples e não tão eficiente, mas ajuda bastante.
2 palavras, Simples e Funcional!
Não achei tão interessante, isso vai contra a acessibilidade e a semântica.
Além do mais quem usa firefox pode ir na propriedade da página > mídia, e ter qualquer arquivo carregado.
Abraço
Achei muito interessante a forma de fazer, já tinha feito isso de outra forma mais grotesca hehehe, e discordando um pouco de quem não gostou, isso não é pra ser usado em todas as imagens, no meu ponto de vista isso deve ser usado naquelas imagens que são realmente valiosas.
t+ valeu Pedro
Outra opção é colocar a imagem que se deseja proteger como background de uma div, ou talvez como background do img transparente (não sei se funciona).
Mas, é claro, nada disso é suficientemente eficaz. Se a imagem foi carregada no browser, você já não tem nenhum controle.
Me desculpem por eu ser meio Nube no assunto mais não estou conseguindo aplica esse código no meu site poderiam me ajuda me explicando onde colocar o código no meu site?
E se a imagem contiver um link e mesmo assim você quiser protege-la ?
[...] ficará por cima da imagem real, utilizando técnica de position:relative e position:absolute: 1.#box {height:343px; margin:0 auto; position:relative; width:500px} 2..img_oculta {height:343px; [...]