One of my images showed a broken image link, but only on mobile devices. In all my desktop browsers, even when resizing the browser window, the image was still showing. The file path of the <img> tag was correct and there was no CSS or JS targeting the image, except for literally only a width and a margin CSS property. After searching for puzzle pieces for about an hour, I finally figured out what fixed the problem but not what caused it.
The image tag I used:
<img src="/path/to/image.png" alt="image alt tag">
What ultimately solved the problem:
<img src="/path/to/image.png" alt="image alt tag" />
(notice the / at the end of the tag)
Why does this little / make such a big difference? And why do all other images, with the exact same CSS class and file paths, show no problems? What does this / actually do?
By adding that "/" (Or "Closing Bracket") to the end of the img tag, you are validating it for XML or XHTML. HTML does not require that ending bracket (It is optional in HTML, the code will work either way), but XML/XHTML does require it.
Since your mobile browser did not show the image without the bracket, but correctly showed it with the bracket (And your PC showed it both ways), that most likely means your mobile browser is parsing the code using XML/XHTML (Where the "/" is required) and your PC is parsing it in HTML (Where the code works with, or without the "/").
Hope that helped in clarification! Comment if you don't understand something I said or would like clarification :)
Related
I'm working on a website that's using a lot of embedded SVGs instead of linking them through an <img> tag, since that speeds up loading times. Most of them are pretty simple, single-colored and don't shift. Since our logo was made as an SVG as well it's embedded into the page as HTML too.
One day Search Console started reporting a CLS issue on Desktop, but not on mobile. I tested it locally but I wasn't able to see any layout shift nor find a cause. I went ahead and tested the page with https://developers.google.com/speed/pagespeed/insights/ and https://layoutstability.rocks/ and both reported the same, a CLS on Desktop but not on mobile.
Screenshots of the tests can be found here:
CLS issue on Desktop
No CLS issue on Mobile
PageSpeed Insights reporting the causing element
As you can see above PageSpeed Insights marked the embedded logo SVG as the cause for the ongoing layout shifts.
Causing element identified
Above you can see how I identified the causing element.
So now I'm wondering not only about the issue with the SVG shifting around but also about the issue only happening on Desktop.
Is there an easy way to fix CLS issues with embedded SVGs? Or do I need to specify static height and width to preserve the space? I'd like to not do so since the SVG is scaling when resizing the browser width which would limit the responsiveness.
I also wasn't able to find any resources on that issue whatsoever, seems like I'm the first posting about it.
Any help appreciated! (as a reference, this is the affected page: https://hydra.bot)
I actually found the issue and it has nothing to do with the SVG but with the webfont swapping in. Removing the webfont from the font-family stack solves the issue. Not sure how to use webfonts without CLS then though.
The problem is that having images and not indicating a width and height they grow and then adjust according to your CSS, you must indicate the dimensions for the browser to reserve the space while the images are loading.
You can find more about this at: https://web.dev/optimize-cls/
I am trying to load background image to a page using Dreamweaver. It shows in IE and Edge but not Chrome or Mozilla. I have tried moving the photo's location (file path) and tried in both straight HTML and CSS with the same result. I cannot find another way to write the code or think of one (being very new to this) so that it will show in all browsers. This is the CSS code:
background-image: url('file:///D:/website.com/httpdocs/pic/greenleaf.jpg')
set in the body brackets;
and html:
<body background="file:///D:/website.com/httpdocs/pic/Demo Page Song Thumbnails/Jpeg Thumbnails/greenleaf.jpg">
Everywhere I look I find examples with ellipsis points, like url(...website.com/greanleaf.jpg) and the dots totally confuse me. I think perhaps I need help with how file paths work.
This is due to the implementation of the body and html tags in Firefox and Chrome browsers. the body and HTML tags are only as big as the HTML content of them. where as Edge and IE the HTML and Body are auto sized to the size of the view port.
Add this to your CSS
body, html{
min-height:100%;
min-width:100%;
}
Ok , so if your code is correct and the image it's shown in IE and edge try to
refresh your browser but not normally with this command : Control + Shift + R
so that you're sure to be running the latest and greatest version of what that web
site's serving.
First, you'll need to be sure that the browser is correctly locating the image.
A good way to be sure is looking at Chrome's network tab. Hit F12 in Chrome to reveal Developer Tools. Click the Network tab and then refresh the browser. You will receive a list of resources that have/have not loaded. If your image is listed in red, then it failed to load. Your problem will be an incorrect path.
This is a good resource for understanding relative file paths.
https://css-tricks.com/quick-reminder-about-file-paths/
However, if it did load successfully, the image isn't showing for another reason. Without seeing all of your code, I can only make a guess. Is the container that your image is in empty? Without content or a specified height, the background image won't show in some browsers.
I've developed a responsive website, and just when I thought it was perfect and ready to launch, I found out that the images on the homepage are not displaying properly on iPhones (I developed the site while testing on an Android, so I was none the wiser about iPhone oddities until now). The images should be fitting into the width of the screen (I've set max-width: 100%; on them), but instead they are stretched and pixelated way beyond their actual resolution.
Curiously, images on any other page of the site display just fine. I thought the issue was rooted in the fact that the images on the homepage are actually set via a CSS background property, while images everywhere else are set in <img> tags in the HTML. So I commented out the "background" declarations in the CSS file and instead used <img> tags on the homepage, just like everywhere else. When I did that to the very first image, it displayed great. However, as soon as I switched the rest of the images to HTML, they all reverted back to the ugly that was present before.
My boss (who has access to an iPhone) sent me this video (apologies for it being out of focus, but you get the idea): https://www.youtube.com/watch?v=_vFJVZiBc3Q
The first four images he scrolls past ought to all fit above the fold, and you're only seeing the left ~1/10th of the actual image, that's how far it's stretched out.
I'm out of ideas here. Is there anything special I need to do for iPhones? With the <img> tag, these photos should be in the same format that the rest of the working images are in.
Thanks so much in advance!
As it turns out, it was a me-specific issue. Apologies for being vague above, I really had no idea what I should have been looking for when it came to iPhones. The images in question were contained in <div>s in which I specified a height in vh units. As a future reference for anyone reading this, you apparently shouldn't do that. Changing height to a percent unit fixed the issue, and it displays great on both Android and iPhone!
On my site - http://appliedcodingtech.com/site/factory_automation_photos, an image towards the bottom does not show up in IE8, but it shows up just fine in FF and Chrome. What is wrong?
The broken image is a CMYK .jpg, which IE8 does not support.
It looks like it's an issue with the image (corrupt or whatnot). Just opening the image in a new tab doesn't even work. My advice is take a screen cap of it and save that as Twin_belt_transport.jpg and re-upload it.
I think it is a corrupt image - I used Paint.Net to open the image and re-saved it, and now IE will display it.
Apparently the image is corrupted (applications may handle this in different ways) or is stored in a way that is not supported by IE. Try saving the image again using an image editor.
The problem lies in the image itself. IE cannot open it from disk either. It is indeed a jpg image (it has the 'exif' header), although I don't have the tools at hand to study exactly what's wrong with it.
Good question.
It seems that the image file is corrupted. Re-uploading it would definitely fix it!
But also some pointers
Thumbnails are too big. Use different images for thumbnails and for
view purposes. It loads slow and doesn't look professional at all :(
Your using .jpg and .JPG file extensions. For a more beautiful code,
use only lowercase .jpg!
There are spaces in the filenames. Use _ or -
I've build this image 1 and put in an src attribute of an img tag.
The image is shown if I access it directly from the browser but when I put it in a page in this way the image is not shown
<img src="$STATIC_MAP_URL" />
If I see the the image with Firebug it is shown, it's strange because Firebug show the img tag gray, as if it is hidden, but it's not.
Other browser haven't this problem and show the image as it is supposed to be.
Thank you in advance!
In addition to encoding the ampersands, make sure you encode the "|" to "%7C" too. I was struggling to get static maps working correctly on Blackberry Devices due to the pipes.