I saw few sites that use this thing but I didn't know what is it.
I was browsing a site ansehen I tried to download the images in the page no matter what method I used to download different images came out instead of the images I saw.
So I wanted to do that on my WordPress site to protect my images from being stolen.
If anyone have any idea what is that called and how it's done please help me.
It could be a way for you to use the images as an background image and place a transparent image above. So when the user right clicks the image, he will not be able to save the image this way. Of course he can look at the code and find out the url of the background image or just take a screenshot and crop it. But this would be more effort, so your images are much better protected then without this method.
Useful link for your issue: https://www.computerhope.com/issues/ch000977.htm
I adapted a code example from this site using a div container instead of a table:
<div style="background-image:url('pictures/image.jpg'); background-size:cover;">
<img width="350" height="150" src="pictures/transparent.png" alt="copyright">
</div>
Related
I have a blog website that loads the images slowly i want to know how to make them load faster and:
I am using same image for thumbnail and story. thumbnail is small,does it still load full image?if so how to use thumbnail of an image?
Where should i store the images? what is the best location to store images for your websites and blogs? can save them in one drive and use the source?
how to optimise images?what is a placeholder?i have seen many websites such as facebook use a kind of place holder which displays before image and content?how to do so?
-how to i preload images ? or is there any better way ?
Here are some pointers.
Thumbnail images have to be separate from original (large) images. When the user uploads the images, you have to use some script to resize the images. If you are using a standard CMS like Drupal or Wordpress, there should be an option somewhere to do the resizing (without you having to write code).
Assuming your blog is public, the images as well should be public (usually). You can create a directory named files and you can store the images inside that directory. If you are using a standard CMS, these options should be there in some form.
To avoid having all files in one directory in the long run, use folder naming schemes like files/[YEAR]/[MONTH] or anything else you think would serve your purpose.
Make sure the uploads directory and your upload mechanism is well-protected using and .htaccess (or equivalent). Otherwise, someone might upload malicious scripts and execute them on your server.
A placeholder is anything which holds the place of something while the original thing is absent (or being loaded). So, a placeholder image will be a standard image with a general design - it's as good as saying loading. You can use JavaScript or CSS (background-image) to achieve such a placeholder.
Preloading should not be necessary as far as I see from your question. A better opinion / answer could be given if you share the link to your site.
Next time, please try to make detailed questions - one question per problem, if possible. Also, do not fear to Google for a solution. I learnt programming (PHP, JS, Drupal, CodeIgniter and more) just by Googling! Hope this helps!
Jigar has done a fairly good job of answering the question though I thought I'd add if you want to optimise images there are plenty of websites that do it for you for free.
My favourite is https://tinyjpg.com/ however there are plenty of others. A quick Google search will get you plenty of different sites all doing basically the same thing.
This post might also help Load a low-res background image first, then a high-res one
I am trying to speed up my website which has too much content as well as multiple slider with high resolution images.
I studied many articles/blogs and applied like:
1) Host on a good server.
2) compressed images
3) sprite images for icon
4) compress js and css also attach css in header section and js at bottom etc.
same like from blogs. But my problem are by images.
Is there any plugin which can load page/images faster same like static site or any other solution.
You should try one of the libraries that lazy-load images. These libraries load images only when the page scrolls and the image comes into the view port.
example search: https://www.google.com/search?q=lazy+load+images
Use jQuery.Lazy to lazy load content only when the user reaches them by scrolling. Especially Images, but even iFrames, Videos, YouTube, and maybe some other content e.g. in Tabs or something via AJAX. It's simple HTML and JS. No big deal. ;)
For images it' simple, use data-src instead of src:
<img class="lazy" data-src="image.jpg" />
And then just call the Plugin:
$(function() {
$("img.lazy").Lazy();
});
You could even think about to use a low-res placeholder and load the high-res version whenever the user is viewing it. So the user don't have to wait for everything is loaded. You could even add some effects, to make it feel more dynamic. ;) This could even be done by Lazy.
<img class="lazy" src="lowres.jpg" data-src="highres.jpg" />
Good Luck!
I'm having a problem with the Facebook Like Button here. Although the button works, it's fetching the wrong thumbnail to display on Facebook.
Since the website is a store and each product has its own like button, it's very important that the correct thumbnail is displayed on Facebook. I used the Facebook Linter to debug a product URL from the site. I hoped Facebook would grab the bigger, obviously main image of a product URL but it's fetching one of the related products thumbnail.
From what I've read in the docs, I should explicitly set og:image in the head of my document. However, I have no access to the back-end and I can only use JavaScript to dynamically generate a meta-tag. I've tried to do that but it seems worthless doing so since the URL is scrapped before any script is run.
I don't understand what rules Facebook is using to infer the value of og:image. On another website that also doesn't have any meta-tags set, the main image of the product is being correctly scrapped. Why?
When, for whatever reason, one cannot declare any Open Graph properties, what can be done to improve the chances of Facebook's algorithm grabbing the desired image (or text)?
Ideally, you should set og:image meta tags as part of the open graph protocol. When this fails, it simply defaults to all images via image html tags take into precedence. The very first image defined via img tag will be the first image pulled by facebook.
<html><body>
<p style="background:url(img0.jpg);">hello</p>
<img src="img1.jpg">
<img src="img2.jpg">
<p>bye</p>
<img src="img3.jpg">
</body></html>
If the above sample code was your site, facebook would label img1, img2 and img3 as potential thumbnails and in that order if the user has the option to choose what image to specify.
So, just put your product picture first.
I am making a games website and I have little knowledge in computer language and I need to create a lightbox that will appear when a image is click linking to this box. The box doesn't need to be too fancy or anything, all i need is for it to have an embedded flash games at a set size without scrolling. I have had a look at jquery and mootools but I find them confusing and don't know how to embed a flash based game inside them, so any help would be very useful.
PrettyPhoto jQuery makes it easy to lightbox media such as Flash.
From their example:
<a title="Flash 10 demo" href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294" rel="prettyPhoto[mixed]">
<img src="/wp-content/themes/NMFE/images/thumbnails/flash-logo.jpg" alt="Flash 10 demo" width="50"/>
</a>
Put a link to the SWF with rel=prettyPhoto[groupName] in your anchor.
Within the anchor, you may place an image thumbnail.
<a href="flash.swf" rel="prettyPhoto[group]">
<img src="thumbnail.png" />
</a>
Download source.
One simple solution that I think might be good looking would be having a container that's hidden from start. When you click at the image this container turns visible. This way you don't have to embed flash to jquery/javascript but to html.
With jquery it would look like this.
$(document).ready(function(){
$('#yourimage').click(function(){
$('#containerwithgame').show();
});
});
This way you don't use an annoying pop-up lightbox, but that's a personal opinion.
This question is not really specific. I want to show thumbnail images of websites when hovering (its) url. With this code: JsFiddle
I can load websites in the iframe, which kinda 'resembles' a thumbnail preview. The problem is that it has to load the complete page which is not really fast and takes up quite some system performance. So my question is how can solve this problem? I can only think of two things myself:
1.Take some sort of 'snapshot' and show that snapshot instead of loading the page
2.Load only the css and other stuf but no object like movie files banner ads etc.
If those two are not done than please provide me with an alternative.