I want to present an image to my visitors, and I don't mind if they download it (they can always take a screenshot anyway), but I don't want this image to appear in any search results ever.
While I know that I can politely ask bots not to index my content, I don't trust them. Therefore, I want them to not recognize my image. Two ideas:
Create my image through e.g. PHP's image functions: <img src="image.php">. But I guess Google understands this.
Publish my image as a table, with each cell 1x1 pixels and the background color of that pixel: <td style="width:1px;height:1px;background-color:#36ef2a"></td>.
Better ideas?
Does this include not trusting /robots.txt file in your setup? Not sure if that is what you meant.
What type of images are they? If they are mostly text, and can be represented with drawings, you can try using the HTML5 Canvas Element and/or Inline SVG to present your image.
I'm not sure if you can use background images to help your point inside the CSS.
Related
After reading all day about one method or the other I am still not sure what is the best for me, all sites explain the same thing but when I want to know the things that really worries me, nobody talks about that.
My case: I have almost all my images using width 100% and height to auto, and the image containers had dynamic size, for example 30vw, or 40%, etc. (not sure if in this case I still need to set height and width values in the img tag)
What I need to use if I want to provide different sizes for my images and webp format as well and leave the decision to the browser what to choose?
Can I provide webp image without picture and source tag?
Can I use the picture method and still let the browser choose what image shown?
Not sure either why we need to choose the fallback with simple img src for the smallest image, in that case if someone enter with IE and a big screen then the image will be always pixeled. In those cases I'd prefer make some users wait a little longer than provide them with a low resolution image.
Also.. having a low resolution image with the fallback option, not sure how influences in the individual image seo ranking.
Your description looks like a common use case for responsive images. If you have for example an image that is shown at 50% width on large screens and at 100% width on viewports smaller than 900px, your HTML could look like this:
<picture>
<source
type="image/webp"
sizes="(min-width: 900px) 50vw, 100vw"
srcset="image-500.webp 500w, image-1000.webp 1000w, image-1500.webp 1500w"
>
<img
sizes="(min-width: 900px) 50vw, 100vw"
srcset="image-500.jpg 500w, image-1000.jpg 1000w, image-1500.jpg 1500w"
src="image-1000.jpg"
>
</picture>
This way browsers that support <picture> and webp images select one of the image-*.webp files, browsers that support srcset and sizes select one of the image-*.jpg files and all other browsers show the image-1000.jpg.
The most important part with this technique is to specify the sizes attribute correctly so browsers can make good decisions which image to load. You can find more information about it here: https://ericportis.com/posts/2014/srcset-sizes/
The image you want to display on “old” browsers can be freely selected via the src attribute. Or you “polyfill” the feature via JavaScript with tools like Picturefill or respimage.
You can omit the <picture> and <source> elements and do the type switch on the server side via HTTPs Accept header as an alternative.
Yesterday, I saw a tweet saying about holderJS library. When I read the usage, it says it will generate the image placeholder completely on client side. So I am wondering why in the life would I need a placeholder library?
What is the scenario in which rather than placing div of some size I would use image placeholder?
Image placeholders are generally meant for a page that is either in the process of dynamically loading a real image or the page is only partially designed and the placeholder image shows how the design will be laid out and how big the image should be even though the real image is not yet available. In this way, the HTML design can be nearly completed even though the final images are not yet available or done.
Wikipedia uses image placeholders when they know they want a particular image in a page, but are in search of an image they can use with the appropriate license.
Image placeholders are traditionally served up by a service on the web that automatically creates the placeholder images based on query parameters in a URL, but the holder.js library creates placeholder images entirely on the client (so no outside services are needed).
You can certainly achieve the same look as a placeholder with just a div with a background color and perhaps even some text in the div. But, when someone wanted to plug the final images into place, they would have the change the div tags to img tags. When using a placeholder image, all the HTML tags can be final and left as they are, only the .src values need to be plugged in to finish the design. So, placeholder images allow you to have a closer to complete version of the HTML even though the images are not yet done. It's a minor different, but one that is appreciated by some designers.
I added image to canvas element, but visitor than can save that image to local comp.
Is there any way to disable that option? I don't know, putting some transparent image over?
Thx
So i thought this can help you just disable rightclicks:
$('#canvas').bind("contextmenu",function(e){
return false;
});
None of this (not even image slicing) stops a user from simply copying the screen on to the clipboard and pasting it into MSpaint or any other image utility, and saving the result. Its trivial to do; And a transparency image is no impediment to this.
The only effective options that I know of are (as was said), watermarking or low quality.
*Avoid 1 pixel wide lines or dot watermarks that can be removed easily with a Photoshop filter.
~If its commercial... You could have a pay-wall, and steganographically embed the purchaser's name and or information into the image (or preview), such that if it does get used without permission, at least you know who did it.
Basicly: if your image is loaded by the Browser you can never protect the user to download it, because if the browser knows where to find the image, the user can find this out as well. So all this download protection only works for users not familiar with computers and the internet and nowadays i think most people are able to download such an image if they really want to.
If you want to prevent users to use your images for their work, you can use images with watermarks or in a lower resolution otherwise can you tell what reason do you have to prevent users from downloading?
I found this question in review of an HTML5 captcha alternative I'm developing. My goal is not to "prevent" users from downloading the image as much as blocking OCR on the image capture. To prevent it, I added a onclick event to the canvas object that resets the canvas element on click. The user can "download" it, but it no longer is the original code presented.
I need to develop a desktop application which will
1.) have a list of the Different Application logos (Background Transparent) e.g. IE, FIREFOX, CHROME, PHOTOSHOP ETC.
2.) User will take a screenshot of desktop and save the image.
3.) Now my application need to search all the logos in the screenshot image and tell which all logos are present and where.
4.) I used OPENCV, it's working, but when user changes the desktop background & captures screenshot, it's not working as the transparent area of logo is getting the desktop background content.
Can somebody provide a solution or libraries open source, commercial to do this job.
This is easy to do using cross-correlation.
See my answer to this question.
Basically:
Start with desktop image and one template image for each icon
Apply edge detection (e.g. Sobel) to the desktop image and template images.
Throw away the original desktop image and templates, you won't need them anymore cause we'll be using the edge-detected images
For each template
Do template matching as you normally would
Threshold the maximum of the result. If it's above the threshold, you have a match at that position. Otherwise, no match.
If your icons are aligned in a grid on the desktop, you may be able to speed up your processing by only checking those specific grid positions.
EDIT
You can also save a lot of time by knowing which icons to search for. If you have access to the file system, then just look for *.lnk files (or any other extensions you may be interested in) in the directory that corresponds to the desktop (can't remember exactly what it is, but for Windows7 it's something like c:\users\misha\desktop). That will tell you what icons are there on the desktop. This will allow you to shorten your template candidate list before you go and do the template matching.
I like misha's answer and I think it should work for you. But it that doesn't work you could try replacing the transparant pixels in your reference logo with uniformly distributed random noise before trying the match. This will make the transparant pixels irrelevant for any matching computation because they will match just as bad no matter what there is on the desktop in those pixels.
I'm not familiar with the tools you're using, but I'm guessing you have to either:
a) Tell your program to ignore transparent pixels in the icon images during the comparison operation.
OR
b) Tell your program to treat transparent pixels in the icon images as "wildcards" which can be any color.
how can you specify which image you want to show on when sharing an article? Now it just picks random images from our site which aren't relevant. I tried adding an image_src link to the head of my site but this didn't help. Any idea how you can do this?
The API of LinkedIn doesn't tell us how:
http://developer.linkedin.com/docs/DOC-1075
Kind regards,
Daan
There is currently no way to specify a thumbnail. They don't seem to use oEmbed, OpenGraph or image_src. However, you can trick it into picking a specific image.
Make your image 62x62 pixels (other sizes will likely work, but non-square aspect ratios failed for us in the combinations we tried). Also, make it the first IMG tag in the document.
If you don't want users to see that image on your site, you can hide it with postion:absolute and right:-999px.