Not all Images showing in HTML email - html

I have a html email that displays perfectly in my browser when viewing it locally but when I send it to gmail/hotmail/yahoo and select 'display images', it doesn't show every image.
The total amount of images to be downloaded is in the region of 0.8 MB.
Can any one advise while only some of the images are being displayed and not all? Is it due to the total size of all the images to be downloaded? How can I ensure that all images display?

Look at the html email source (or webversion source) and copy&paste each image link url into a browser to see if it shows up. If it doesn't show up, the image link is obviously wrong.
If you've uploaded the images to a ESP like Mailchimp for example, I'd follow up with them as to why the images are not showing. Typically they will create a url for the image, so they have control over why it isn't showing.

Related

Random images don't display on website

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.

Background image not showing up unless it directly visited and cached by the browser

I have a strange issue with a particular image URL.
First of all please visit this page with your clean cache (it's an under development Reddit clone in Turkish language, anyway...)
So, the thumbnail image didn't show up right? Nothing, just whitespace right? I mean no thumbnail image unlike this page right?
This is how we are loading the thumbnail image:
<div class="link-thumbnail" style="background-image: url('http://www.herkesebilimteknoloji.com/wp-content/uploads/2017/01/dunya.png');"></div>
Now please visit the image directly with your browser and return back to the problematic page. This time image showed up right?
Eventually my conclusion is; background image is not showing up unless it directly visited and cached by the browser.
So what is the mechanism/reason behind this? As you can imagine by just looking to URL, image's host is a WordPress site. So what could be the trick to prevent this image to load by background-image: url('...') By the way it's loading the image perfectly with <img> tag.
I know some wallpaper web sites doing similar trick but none of them were giving away the image directly without doing a redirection trick. I believe this case is not similar.
And last but not least; how can I handle such a case when using background-image ?
You are loading this image from a different URL / wordpress system. It seems like Wordpress itself prevents images within its "file system" to be loaded as background images from other URLs.
But you can just save that image, put it on your own site and load it from there.

Why are some images not being showed on page load while some are?

On my website, images are not loading for some pages. The website is in flash. The address can be found at http://www.serenityspacharleston.com
More specifically, when you go to "Our Spa" or "Location" pages, the images show up, but on the other two pages, it only shows a percentage, as if the pictures were loading, but they never complete.
I verified the XML file and all links for the images are pointing to the correct placement, as far as I can tell (they are using the same format as the links that do work). Any thoughts on why some images would not be showing up? I can provide the source code if that is helpful.

How to show non downloadable image in django

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.

Wrong image thumbnail on Facebook for (blogger aka blogspot)

I have a blogger (ameliaily.blogspot.com) and I am trying to get images from the blog to post as a thumbnail on Facebook and I have tried many things and none work. I still keep getting the og:image is not big enough error.
I have searched many forums and looked at all the answers I could find and it is still not working. I do not want FB to keep using my googleusercontent image as the picture (it is my personal photo and I don't want it to be the thumbnail used).
Below are the things I have tried:
Changing the size of the actual image. I've tried making it exactly 200 x 200 px, I've tried making it a rounded number i.e. 600 x 400 instead of 541 x 441.
Uploading the actual image to blogger.
Uploading the actual image to photobucket and THEN linking that image to blogger.
Adding the open graph code to my template HTML as suggested by these two forums: blogger-hints-and-tips.blogspot.com/2013/06/add-facebook-open-graph-tags-to-blogger-for-better-looking-shares-and-likes.html and www.bloggerhow.com/2012/07/implement-open-graph-in-blogger-blogs.html
5) These are the images that I am trying to use as thumbnails: http://smg.photobucket.com/user/dizzyuptheblue/media/Blogger/balancebeam-4.jpg.html and http://smg.photobucket.com/user/dizzyuptheblue/media/Blogger/image004.jpg.html
They are both huge images so I don't know why FB keeps telling me it is not large enough.
I had a look at the source of your page, and it looks like you are using a tag like this for the image:
<meta content='http://smg.photobucket.com/user/dizzyuptheblue/media/Blogger/image004.jpg.html' property='og:image'/>
The file type of the URL in this tag needs to be an image - at the moment, it is an HTML file which shows an image. You need the direct URL to the image. To get this, you can visit that page (ending in image0004.jpg.html) and right click on the image, copy the image URL and use this copied value in the tag instead - so the tag should become this:
<meta content='http://img.photobucket.com/albums/v235/dizzyuptheblue/Blogger/image004.jpg' property='og:image'/>
Try that instead and then test it out on the Facebook Open Graph debugger.