On Firefox, I found something weird on Firefox cosnole which throw an error message, even Mozilla doc example. Does it mean we need to specific min-width: 0px in the media attribute from now?
<link
rel="preload"
href="/img/bg.webp"
as="image"
media="(max-width: 600px)" />
Preload of http://localhost:3000/img/bg.webp was ignored due to unknown “as” or “type” values, or non-matching “media” attribute.
Expected no issue on Firefox console.
Related
I have a banner which appears at the top fold of the page. To improve my LCP score, I am preloading the banner image to make it as a critical resource but I can see that for my mobile resolution, the tablet, mobile version of banner image is preloaded.
Please find below the markup of my banner image
`
<picture><source srcset="mobile.jpg" media="(max-width: 767px)">
<source srcset="tablet.jpg" media="(max-width: 1024px)">
<!-- [if IE 9]></video><![endif] -->
<img src="/desktop.jpg" width="1920" height="1080" alt="Kia Sportage">
</picture>`
I am using below preloads to load images as per viewport sizes:
<link rel="preload" href="mobile.jpg" as="image" importance="high" media="(max-width: 767px)">
<link rel="preload" href="tablet.jpg" as="image" importance="high" media="(min-width: 768px) and (max-width: 1024px)">
<link rel="preload" href="desktop.jpg" as="image" importance="high" media="(min-width: 1025px)">
For Tablet, Desktop size viewport I can see respective images getting preloaded but for mobile resolution I see that mobile.jpg and tablet.jpg is loaded and in console I can see Chrome complaining with below warning:
The resource tablet.jpg was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
Am I missing something here?
I found the cause!
Apparenntly The meta tag <meta name"viewport" content=”width=device-width, initial-scale=1"> was defined way below in head tag in which case the viewport has not been configured when the media query is evaluated.
For a static site I load one of two stylesheets depending a prefers-color-scheme media query, as follows:
<link rel="stylesheet" href="/dark.css"
media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="/light.css"
media="not all and (prefers-color-scheme: dark)">
The downside to this approach is that for browsers that don't support the prefers-color-scheme media, neither stylesheet will be loaded (queries with unknown elements are always false), so the result is garbage-looking unstyled content.
In this case, I'd like to load light.css as a fallback. Is there a good way to do this without Javascript?
Just making one stylesheet unconditioinal like:
<link rel="stylesheet" href="/light.css">
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">
... doesn't work because the dark scheme may not specify exactly the same attributes for every style as light. It's also not desirable from a performance perspective since now the light stylesheet is redundantly loaded and parsed even in dark mode.
I have an error in my development when implementing .webp and .png images.
I don't get the browser to show one option (or another), and now my problem is that the browser loads the two images ( webp + png ) gand shows them in block.
I'm doing something wrong, of course, and I'm not sure of img tags either, but I'm using them in .css.
Any idea of my mistakes?
Thanks in advance.
HTML:
<link rel=preload as=script href="js/modernizr.min.js"/>
<div id="info-1">
<picture>
<img class="imgesc" source srcset="img/Camiseta-1.png" type="image/png" width="725" height="1024" alt="imagen">
<img class="imgesc" source srcset="img/Camiseta-1.webp" type="image/webp" width="725" height="1024" alt="imagen">
<img class="imgmov" source srcset="img/Camiseta-1-Land.png" type="image/png" width="1024" height="725" alt="imagen">
<img class="imgmov" source srcset="img/Camiseta-1-Land.webp" type="image/webp" width="1024" height="725" alt="imagen">
</picture>
</div
Style:
#info-1 img {
width:100%;
height:auto;
max-width:500px;
margin:0 auto
}
.imgmov {
display:none
}
#media screen and (max-width:999px) and (orientation:landscape){
.imgesc{display:none}
.imgmov{display:block}
#info-1{max-width:310px;margin:auto}
}
It's showing two copies of each image, because you have an <img> tag for each image format, including modern ones. That's not quite how fallback images work.
If you're using a <picture> element, it should only contain <img> elements for backward-compatibility with older browsers. The modern image formats, targeted at modern browsers, should be in a <source> element instead.
Read this: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Use_modern_image_formats_boldly
Here's the example code from the Mozilla docs, but with your filenames instead:
<picture>
<source type="image/webp" srcset="img/Camiseta-1.webp">
<img src="img/Camiseta-1.png" alt="imagen">
</picture>
That documentation page also talks about how to use the size attribute to make resolution-specific fallbacks instead of format-specific ones.
I want a very low quality of my background image to load with the initial paint, then a higher quality version to replace it, based on the browser's width.
Here is my HTML :
<div style="background-image: url('data:image/jpeg;base64,[...]');"></div>
I'm giving the div a base64 background-image that's really low resolution.
And in my CSS :
#media(max-width: 600px) { div { background-image: url(600.jpg) !important} }
#media(max-width: 1000px) { div { background-image: url(1000.jpg) !important} }
#media(min-width: 1001px) { div { background-image: url(2200.jpg) !important} }
And here I'm overriding the inline rule with the appropriate images for each screen width.
Unfortunately, as soon as the CSS file loads, the browser replaces the placeholder base64 image with an ugly partly-loaded version of the higher-quality image.
How can I wait for the background-image to be fully loaded before swapping-it in ?
Edit : as replied in the comments below, this is not a duplicate as the related answer does not address responsive image sizes.
TLDR:
define the hi-res image to be loaded in your CSS as "invisible"
#hi-res {
visibility: hidden;
}
preload image at the Head
<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
and then wait till the DOM has fully loaded to "display" the image with
$(window).load(function(){
document.getElementById('hi-res').style.visibility='visible';
});
So what you're running into is not a 'loading' issue, but a 'rendering' issue. The browser is already doing what it thinks you want it to do, that is: swapping one image for another after it's "loaded", or more accurately "found" in the DOM. The issue then is that the browser is coming across (loading) that hi-res image sooner than when it is able to quickly render it. Essentially you want to specifically have the browser wait to load an image at a point when it can render it quickly.
The preload attribute should help address this in that it is essentially a request on the DOM that says: Yo, you're definitely going to need this soon, so grab it before everything else and in full. That being said, it doesn't mean it will render all that quickly once the browser is told to display the image.
So, if you really want to double tap this to ensure the alternative image does not replace the lo-res one before the browser can devote all it's resources to rendering it on screen you can simply have it explicitly hidden from view until everything else is done loading. You can do this by using CSS:
#hi-res {
visibility: hidden;
}
and then JS on DOM:
$(window).load(function(){
document.getElementById('hi-res').style.visibility='visible';
});
Preloading
Back in the day you could have used lazy loading or even just a simple JS wait script at the bottom of your page.
However, I think the best solution to your problem would be to simply preload your images using rel="preload" as specified in the MDN Web Docs
This could done by preloading the CSS file itself:
<head>
<meta charset="utf-8">
<title>JS and CSS preload example</title>
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="stylesheet" href="style.css">
</head>
Source
Or more simply on the media elements themselves:
<head>
<meta charset="utf-8">
<title>Responsive preload example</title>
<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
<link rel="stylesheet" href="main.css">
</head>
Source
I am trying to get the right points of my application that brakes so i can add a media query to my application. I found a great website called http://responsivepx.com/ to test my application out on.
I ran my application and seen that it shows my application brakeing between 1257 width and 1576 width and then after that my application will be fine again. So i edit my query to fill the needs of the resolution issue and still it is not working?
Here is the querys i have at the moment:
<link rel="stylesheet" media="(min-width: 1600px)" type="text/css" href="../Style/CommonStyle/Common1600Style.css"/>
<link rel="stylesheet" media="(max-width: 1280px)" type="text/css" href="../Style/CommonStyle/Common1280Style.css" />
And then i added this to the media querys and it still doesnt work:
<link rel="stylesheet" media="(min-width: 1258px) and (max-width: 1576px)" type="text/css" href="../Style/MaxWidth1280StyleSheet.css" />
Does anyone know the reason my application is breaking and not hitting that media query?
What do you mean by 'not hitting that media query'? I'm a bit in the dark here because you haven't given an example css rule which isn't applied or provided the contents of any of the stylesheets, or even stated what your window size is when you see a problem. But here goes.
Are you sure it's not a rule precedence issue? If your browser window is between 1257px and 1280px then there will be two sets of rules the browser is trying to apply e.g. both stylesheets Common1280Style.css and MaxWidth1280StyleSheet.css are loaded and a more specific rule in Common1280Style.css will still override one in MaxWidth1280StyleSheet.css.
This assumes you are loading the stylesheets in the order shown e.g.
<link rel="stylesheet" media="(min-width: 1600px)" type="text/css" href="../Style/CommonStyle/Common1600Style.css"/>
<link rel="stylesheet" media="(max-width: 1280px)" type="text/css" href="../Style/CommonStyle/Common1280Style.css" />
<link rel="stylesheet" media="(min-width: 1258px) and (max-width: 1576px)" type="text/css" href="../Style/MaxWidth1280StyleSheet.css" />
To illustrate what I mean, here's a http://codepen.io/anon/pen/Bjwsa notice the color rule for (max-width: 1280) takes precedence over the one for (min-width: 1258px) and (max-width: 1576px) if the browser width is between 1258px and 1280px . Because its more specific e.g. a rule for body #example is considered more specific than just #example