By using Google Chrome's inspect element, I can see image dimensions easily. like it is explained in Google's website.
But I want to know the image file size too (size, like 50kb). I know that I can first download and then look at the image file size on my computer, but I don't think it is the best way.
I want to know if I can find out about image file size in Chrome's inspect elements.
You can either find the file in sources or network tab.
For example, I inspect your avatar and see this url:
https://lh6.googleusercontent.com/-6jIAe62Q10s/AAAAAAAAAAI/AAAAAAAAABw/kRBVixTmLmk/photo.jpg?sz=128
I can look it up in the sources tab by finding the appropriate domain. The file size is listed at the bottom, under the preview.
The sizes are also displayed in the network tab but it has to be open before the image loads, otherwise it doesn't capture. Here it is filtered to show only images:
Related
In one of my websites, I am using css background-image property to set the background for different sections. All the sections load their background images properly except for the contact section.
When I try to inspect it, the inspector shows that the background image could not be loaded in the tool tip. But when I try to open the image in a new tab, I can see the image perfectly, After I do this, when I do a refresh of the page, I am able to see the background image for that section correctly now. I inspected the Network tab and don't even find the image file being called. However, after opening the image in a new tab and then inspecting the network tab shows the image.
Error when I inspect before trying to open the image in a new tab:
My site can be viewed here. The error happens in the Contact Section and can be viewed here
Please help me with this strange error.
Because you are getting this error in console:
The HTTP 409 Conflict response status code indicates a request conflict with current state of the server
Your Image Path:
The alternative and generally better option is to use a path that's relative to your domain, You should pass your image:
Please see this post:
background images path not working in CSS
I am just getting started using HTML and I seem to have fallen at the first hurdle.
I am trying to create a basic webpage containing an image that is downloaded when clicked.
So far I have:
<a href="/images/selfie_img.jpg" download>
<img src="/images/selfie_img.jpg" alt="Selfie" style="width: 300px">
</a>
I expected this to display the image I want as it seems to my eye to be formatted exactly like all the examples I have seen. However, this only displays the alternative title, not the actual image.
I have checked the image path, and used different images to try and solve the problem. I am using VS code and the software can follow the image path to find the appropriate image, but when I load the program, the image is replaced by that annoying blue question mark. Using a URL as the image path seems to work but then the image isn't downloaded when clicked, I just get the URL.
Welcome to StackOverflow, SpicedWater!
The problem you're describing is most likely caused by a wrong path. Your browser resolves the images path and can't find it. I suggest you take a look at the source code in your browser or the developer console's network tab to see what path it's trying to find this image at and which http status code the browser determined.
I uploaded a website online, and some of the images on of the pages does not display.
I have checked the path multiple times and I copied and pasted the src link, then just changed the name of the file, which was a number. eg: product1.jpg then product2.jpg, but the image of product 1 would display and not the image of product 2.
Is there anything else I can do to try fix it? Or find where the problem is?
Here is the product page of the current website.
Try using the debugger of the browser
On Chrome you can press F12, then go to the Sources section and check (and preview) the files the browser has recieved. If you see both pictures and you can preview them, then it is the HTML/CSS code of the page which, creates the problem. If you don't see them, the problem must be in the paths(check if you're using relative or absolute paths)
On Firefox you can press F12 and go to the Debugger section, and from there is is the same process.
Suppose there is a html page containing some images.
we want to disable the downloading of the images from user side.
Is that possible?
Should I need to use any javascript or add some attributes in <img> tag?
My current code is
<td><img src="images/handmade (1).jpg" class="img-responsive" alt="" /></td>
</tr>
</table>
Is there any technique to prevent image from downloading?
No, it cannot be done. Explanation here: https://graphicdesign.stackexchange.com/a/39464/24086
For all intents and purposes, this is downright impossible.
You can disable right click, but people can still view the source code of your page (by adding view-source: to the URL in Chrome, or just using a browser menu) and find the URL.
You can use a CSS background-image instead of HTML , but people can still use their browser's inspector (F12 for most browsers) and find that element's CSS properties.
You can engineer some crazy thing that you think will work, but at the end of the day, the user has to download the image in some way to see it. If the user is completely unable to download the image, he/she won't even be able to see it in the first place! No matter what you do, nothing will prevent a simple glance at a network traffic monitor or the "Network" tab of your favorite browser's developer tools.
Depends what you mean by downloading, really.
The user has to be able to download the image (i.e. retrieve the image onto their computer) in order to display the image in their browser. I suspect what you mean is that you want to stop them saving that specific image onto their computer. Any attempt to try and stop them doing this is pretty pointless, as they can always take a screenshot, or just access the image directly using the URL.
I've seen various attempts using javascript to try and stop users from saving images, but they are all easily worked around.
Cut up the image server-side and store them that way, then assemble them as one image in javascript client-side. The user could download each segment via URL and assemble them manually, but that is much more work than most users are willing to do.
I have created a form in django project which contains an image field and i did the image upload and retrieving the image to webpage successfully but one more thing i have to do is to make the image non downloadable. I did that by making the image as background image of a div element using css. But still the image can be downloadable by viewing the page source and using the url of the image.
Is there any other way to make the image non downloadable?
If you want to server an image to the browser is impossible for the image to not be downloadable? How would the browser interpret the contents if it cannot access them?
If you want the image to not be usable maybe add a watermark to it.
Lets say you could do that. Display the image but won't be downloadable. But in that case the user could just make a print screen and cut the image out of it.
You can't do that, the browser implicitly is downloading the image to show it, if you make an image not downloadable, it means that it is not accessible so it won't be displayed. If you want to make it difficult for the user to save it, you can disable the right click in the image so the user can't do something like inspect element in chrome having to look for the image in the source code. As I've said, this is not the solution because there isn't.