I've been converting some images on a website I'm working on to webp to optimize page-load times and score higher on lighthouse and all of that.
I used fallbacks in my code such as below:
.flex {
display: flex;
justify-content: space-around;
background: #ddd;
padding: 5px 0;
}
<div class="flex">
<div>WEBP image:<br> <img src="https://www.gstatic.com/webp/gallery/1.sm.webp" style="height: 80px;" /></div>
<div>JPG image:<br> <img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" style="height: 80px;" /> </div>
<div>Fallback image (JPG):<br> <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" style="height: 80px;" />
</div>
</div>
<div>
Test image:<br>
<picture>
<source srcset="https://www.gstatic.com/webp/gallery/1.sm.webp" type="image/webp">
<source srcset="https://www.gstatic.com/webp/gallery/2.sm.jpg" type="image/jpeg">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg">
</picture>
</div>
I'm obviously testing on Chrome because I know Safari doesn't support WEBP, but it seems my chrome is always falling back on the jpeg and png files. When I inspect, I see the WEBP is in the code, and I can click it and it opens from the server so it is there. But Chrome isn't using it to render the page, it's immediately falling back on legacy formats.
I've been pulling my hair trying to figure out why it's not working--maybe I used the picture tag incorrectly, etc...--but no solution.
Finally, I linked Modernizer in my layout, and saw that it wasn't inserting any webp class into the html element. So I added a short script below it to see what's happening, as below:
<script>
if (Modernizr.webp) {
console.log('webp supported');
} else {
console.log('webp not supported');
}
</script>
And the console logged the else webp not supported.
At this point, I'm lost. I've trying looking up online, and I see no mention of Chrome dropping WEBP support or anything. My only guess is that I'm omitting and obvious declaration or something.
Related
I am trying to center an image in a block using CSS and HTML. The code I am currently using works for both firefox and chrome but Microsoft Edge will not center. Chrome and firefox are both picking up the webp format of the image, while internet explorer is picking up the png.
I have tried using inline property instead of block for css. I have tried creating a function in CSS and applying that function to the HTML. I have tried setting an attribute name to the HTML box and editing the css to alter that box only. Virtually all of these things except for inline have worked on chrome and firefox. None work on edge.
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.png" type="image/png">
<img src="image.png" alt="circle of excellence" class="displayed" width="300" height="290">
</picture>
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
I expected the image to be centered on all browsers. It was centered on all but Internet Explorer. I take this to mean there is something wrong with the way the png image is interacting with the code. Or my code is written in such a way as to exclude the png from centering.
Apparently the cash needed to reset in my microsoft edge. This code works perfectly. SMH
I just center the picture tag and it is working fine..
try this...
picture {
display: block;
text-align: center;
}
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.png" type="image/png">
<img src="image.png" alt="circle of excellence" class="displayed" width="300" height="290">
</picture>
We are facing this problem.
I'll try to explain the most I can how we are working in this project first of all.
We have a demo page, and another one were we have each element of the demo page separately, called modules. This is because other clients can work more easily while building the "real" page.
Once said this, we have included a video in our demo page. In our modules, the video has a "fullscreen" button, but not in our demo.
We have to say that in our modules, we make a "fake" modal from bootsrap, just to show the clients how it should look the modal once opened. But once we include it into our demo page, this button literally doesn't shows up. We think it can be because the modal from bootstrap it's preventing to show it, but we are not sure. Here we leave some images from our modules and demo.
Modules:
Demo:
HTML:
<div class="modal-body">
<div class="ver-video">
<video controls >
<source src="video/video-finanzas.mp4" type="video/mp4">
<source src="video/video-finanzas.ogv" type="video/ogv">
<source src="video/video-finanzas.webm" type="video/webm">
Tu navegador no soporta el video
</video>
</div>
<div class="container-fluid wrapper-content">
<img src="img/icn-step2-incorrecto.png">
<h4>Text</h4>
<h5>More text</h5>
<p>More text</p>
Link
</div>
</div>
CSS:
.modal-onboarding .ver-video {
background-image: url("../img/Step2_Resposta.png");
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 220px;
position: relative;
}
.modal-onboarding .ver-video video{
width: 100%;
height: 100%;
}
As I said, we don't know why the button disappears. Maybe because bootstrap modal is preventing to showing it? If it's this, which is the solution? The code from one page to the other is the same one, copy-paste.
For what I can see, in Firefox and Chrome, a HTML5 video tag inside a frame tag, will make this button disappear. I just tested it with and without frames, and that's what exactly occurred.
I currently have a banner, that is 100% wide, but with limited height. Say 100px;
I would like to have my clients put in their branding image in a certain directory, where the browser already looks for this image.
If the image is not found, nothing is displayed, and its business as usual.
If the image is found, then the image is displayed.
At the moment, my code displays an image to indicate that there is supposed to be an image that could not be loaded.
codepen:
#banner {
background-color: aliceblue;
width: 100%;
height: 100px;
}
<div id="banner">
<img src="/images/myImage.jpg"/>
</div>
HTML Based solution
<object data="o.png" type="image/png">
<img src="" />
</object>
https://jsfiddle.net/pratikhegde/mskLf844/
Jquery Based solution:
This works after DOM is ready
$('img').error(function() {
$(this).hide();
});
https://jsfiddle.net/pratikhegde/k5uo4efh/
I'm trying to use the <picture> element, which is created by the picturefill js library, inside of a web component I'm creating using Polymer, but it is choosing the smallest possible image as <picture> is not getting any dimensions from the container element.
I have tried giving :host a display:block among a myriad of other atempts at doing this with styling, including making sure the container is 100%, but nothing works.
Here is a codepen of what I'm trying to do showing the polymer-made element using the smallest image, then the <picture> element on it's own showing the correct image.
Note that in the live codepen version that the <hr> (horizontal rule) elements created by the polymer-element are the full width and thus understand the correct width of the container.
This is the code in the codepen:
```
<polymer-element name="picture-container" attributes="value">
<template>
<style>
:host {
display: block;
border: 1px solid #000;
padding: 1em;
}
</style>
<hr>
<h2>Picture In Polymer Element</h2>
<picture>
<source srcset="http://www.placecage.com/c/500/500" media="(min-width: 500px)">
<source srcset="http://www.placecage.com/c/200/200" media="(min-width: 400px)">
<img srcset="http://www.placecage.com/c/100/100" alt="An example of the picture element">
</picture>
<hr>
</template>
<script>
Polymer('picture-container');
</script>
</polymer-element>
<picture-container></picture-container>
<hr>
<h2>Picture In Polymer Element</h2>
<picture>
<source srcset="http://www.placecage.com/c/500/500" media="(min-width: 500px)">
<source srcset="http://www.placecage.com/c/200/200" media="(min-width: 400px)">
<img srcset="http://www.placecage.com/c/100/100" alt="An example of the picture element">
</picture>
<hr>
```
any help on this greatly appreciated.
thanks,
Scott
UPDATE
There is a running thread on this on the picturefill github issues section. That thread gave a new option in the script section which made this work correctly in Firefox and Safari:
<script>
Polymer('picture-container',{
ready: function() {
picturefill({elements: this.shadowRoot.getElementsByTagName('img')});
}
});
</script>
Example codepen: http://codepen.io/scottnath/pen/Wboayg
I discovered that in Firefox (33.03) if I go into about:config and change these two settings to true:
dom.image.srcset.enabled
dom.image.picture.enabled
then this mimics the incorrect behavior of chrome for the picture element.
Still no solution though...
I have a few jpeg images on this page that, for some reason, do not show up in either Firefox or Chrome, but fine in IE 8 and 9. If I click the image URL in Firefox browser source, it shows up just fine.
http://www.chemoutsourcing.com/banners.php
The paths are correct, using a mix of both full and relative urls, and am using the IMG tag correctly. I'm very baffled at the simplicity of this.
<div style="margin:5px 0;">
600px by 160px<br />
<img src="http://www.chemoutsourcing.com/images/banner_ads/mainheader_2013_600x160.jpg" border="1" width="600" height="160" alt="" />
</div>
<div style="margin:5px 0;">
600px by 160px<br />
<img src="images/banner_ads/mainheader_Pharma_600x160.jpg" border="1" width="600" height="160" alt="" />
</div>
<div style="margin:5px 0;">
160px by 600px<br />
<img src="images/banner_ads/mainheader_2013_160x600.jpg" border="1" width="160" height="600" alt="" />
</div>
<div style="margin:5px 0;">
160px by 600px<br />
<img src="images/banner_ads/mainheader_Pharma_160x600.jpg" border="1" width="160" height="600" alt="" />
</div>
I used inspect element on chrome, and it shows the following inline styles attached to all the img elements:
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
background-position: 600px 160px;
That can't be right.
The best solutions occur by accident.
I tried viewing this page in Chrome Private mode, and they appeared fine. So that means...
The browser extension AdBlock was reading the images' subfolder "banner_ads" in the source and treating them as 3rd party content to block.
Once I rename the folder, the issue should go away on its own.
Change directory name to ensure the word 'ads' isnt there. For example: if image source is src=images/ads/your_pic.png then rename the folder 'ads' to anything but not 'ads'. for example - src=images/visitor_image/your_pic.png
This should work, if not then its not about browser, its about your re-directions.
p.s. ignore syntax mentioned here, use your own.
Cheers
Had the same problem. Figured out the picture not showing correctly was named .JPG while others were named .jpg. Renaming apparently fixed the problem for me.