Proteger imagenes con CSS
La mayoría de veces, nos gustaría evitar que roben ciertas partes de nuestro diseño, especialmente las imagenes (ej. logotipos)
A continuación podrás ver la parte técnica, pero si prefieres ir al grano, al final de este tutorial encontrarás un ejemplo para descargar.
Demostración:
Intenta hacer “guardar imagen como” en el logotipo de viciao2k3
Imagen normal:
Código HTML:
<img src=”directorio/imagen.gif”>
Imagen protegida:
Código HTML:
<img src=”directorio/blank.gif” id=”imagen” height=”100″ width=”100″>
Nota: para que se muestre la imagen completamente es importante definir la altura y la anchura de la imagen
Código CSS:
#imagen{background:url(’directorio/imagen.gif ‘)}
¡ Nada más !
¿Como aplicarlo en wordpress?
La imagen que quieras proteger y la transparente, tienen que estar en el directorio:
/wp-content/themes/tu_theme_activo/images/
Código CSS:
#imagen{background:url(’images/imagen.gif ‘)}
Copia el código anterior en la hoja de estilos:
/wp-content/themes/tu_theme_activo/style.css
Modifica el código HTML de tu theme:
<img src=”/wp-content/themes/tu_theme_activo/images/imagen.gif”>
Por:
<img src=”/wp-content/themes/tu_theme_activo/images/blank.gif” id=”imagen” height=”100″ width=”100″>
Notas:
- Si quieres proteger varias imagenes no repitas el mismo id.
- Especifica la altura (height) y la anchura (width) de la imagen a proteger en la etiqueta <img
- Si tu blog esta alojado en un sub-directorio (ej. www.viciao2k3.net/blog ), tendrás que poner:
<img src=”/blog/wp-content/themes/tu_theme_activo/images/blank.gif” id=”imagen” height=”100″ width=”100″>
Nota: es muy importante enlazar bien la imagen, si introduces una dirección errónea la página tardará más en cargar
Como todo, tiene su parte buena y mala:
- La buena:
Cuando intenten hacer “guardar imagen como…” se descargaran la imagen transparente - La mala:
Es posible que los buscadores indexen la imagen transparente
Descargar ejemplo:
y 
Jojojo, esta de peeelos!
Para salvar imagenes y cuando le pones ver imagen te sale la imagen transparente, esto se me va articulo seguro para mi blog de tutoriales cuando lo re-abra xP
Otra cosita, para el directorio de wp-content es mejor poner echo bloginfo(’template_url’); en vez de la ruta entera el en archivo PHP del theme
Asi no escribes la ruta =D
Saludos y mil gracias!
Hombre, yo creo que no merece la pena.
‘Si se puede ver/leer, se puede copiar’
Esa es una máxima en esto de la informática, y si alguien quiere pillarte la imagen, no tiene más que ver el CSS, por ejemplo. O incluso usar la opción ‘View background image’ del Firefox, y ya no digamos usando alguna extensión tipo Firebug o WebDeveloper…
La única manera de que no te manguen una imagen y la quieras enseñar, es mostrarla con las típicas líneas que cubren la imagen, así la puedes enseñar y nunca te la van a editar y hacer guarreridas con ella. Se usa mucho para mostrar WIPs de iconos, y asi…
Ahora, lo de usar CSS para ‘ocultar’ las imagenes no lo acabo de ver
De todos modos, seguro que esto no lo sabía mucha gente, así que solo por eso ya merece la pena que lo comentes
rick, es para complicarlo un poco y no darlo regalado, intenta hacer “ver imagen”, veras como se cargara la imagen transparente
Si, carga una transparente, pero admitamoslo, si la quieren realmente se la van a robar, css, navegador, guardar pagina, y la mas simple de todas Imp Pan XD
@ImZyos!: ¿has probado de hacer guardar como?
me parece que no, porque yo lo acabo de probar con firefox e Internet explorer y solo se han guardado las imagenes que estan en las etiquetas <img y no las que hay enlazadas en los estilos CSS
si lo del Imp Pant es una realidad, pero ahi no se puede hacer nada.. que yo sepa
Coincido en que, sí que es una pequeña barrera, pero jamás podrás conseguir que no te la roben.
Conozco hasta técnicas para quitar las marcas de agua. Para alguien con mínimos conocimientos de programación web, esta técnica no supone ningún problema.
Ante todo, piensa que si una imágen se está viendo, con hacer una “impresión de pantalla”, ya está a tu alcance.
Como diría cualquier hippy fumándose un canuto: vive y deja vivir… o.. deja que la peña se descargue imágenes. Al fin y al cabo es triste copiar. No verás webs que copien triunfando.
guardar como para sacar el codigo, no me gusta revisarlo sin un editor decente XD
@Rick: hombre, me vas a decir que todos tienen firebug, de hecho, la mayoria de los visitantes de viciao2k3 seguramente usan IE, o no?
saludos…
@tikitakfire: la mayoria usan firefox 62,70% yeaaah!!
ie un 31,61%
Esta bien para la mayoria, pero yo lo primero que hago es:
wp-content/themes/wp_theme/style.cssxD