Webp images on different browsers
up vote
0
down vote
favorite
I have a problem. In my HTML pages I have a lot of Webp images that I can visualize only using Google Chrome. With other browsers like Mozilla, Explore or Safari I can't see them.
Is there a solution? Maybe without change every image's extension (cause they are a lot)?
Thanks
html webp
add a comment |
up vote
0
down vote
favorite
I have a problem. In my HTML pages I have a lot of Webp images that I can visualize only using Google Chrome. With other browsers like Mozilla, Explore or Safari I can't see them.
Is there a solution? Maybe without change every image's extension (cause they are a lot)?
Thanks
html webp
Related - Detecting WebP support
– vsync
Nov 8 at 12:21
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have a problem. In my HTML pages I have a lot of Webp images that I can visualize only using Google Chrome. With other browsers like Mozilla, Explore or Safari I can't see them.
Is there a solution? Maybe without change every image's extension (cause they are a lot)?
Thanks
html webp
I have a problem. In my HTML pages I have a lot of Webp images that I can visualize only using Google Chrome. With other browsers like Mozilla, Explore or Safari I can't see them.
Is there a solution? Maybe without change every image's extension (cause they are a lot)?
Thanks
html webp
html webp
edited Nov 8 at 11:26
vsync
44.1k35154214
44.1k35154214
asked Nov 8 at 11:22
Marco P
124
124
Related - Detecting WebP support
– vsync
Nov 8 at 12:21
add a comment |
Related - Detecting WebP support
– vsync
Nov 8 at 12:21
Related - Detecting WebP support
– vsync
Nov 8 at 12:21
Related - Detecting WebP support
– vsync
Nov 8 at 12:21
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
You need to fallback to a supported image format. here's an example using the <picture>
element:
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="">
</picture>
You did not specify the very important information - are you using the images as <img>
elements or a CSS backgrounds?
If the images are used in CSS then you can use Modernizr's .no-webp
class name to target non-support browsers and serve a non-webp format instead:
.no-webp .elementWithBackgroundImage {
background-image: url("image.jpg");
}
This article has good information you can use
So I must change every image extension, right?
– Marco P
Nov 8 at 11:32
I use <img src="....webp">
– Marco P
Nov 8 at 11:34
@MarcoP - well, you need 2 formats for sure. You can also use 3rd party image hosting service such as Cloudinary, which can auto-detect browser support and serve the right format to the user
– vsync
Nov 8 at 11:34
Ok thank you very much, it will be a long work for me ahah
– Marco P
Nov 8 at 11:36
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
You need to fallback to a supported image format. here's an example using the <picture>
element:
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="">
</picture>
You did not specify the very important information - are you using the images as <img>
elements or a CSS backgrounds?
If the images are used in CSS then you can use Modernizr's .no-webp
class name to target non-support browsers and serve a non-webp format instead:
.no-webp .elementWithBackgroundImage {
background-image: url("image.jpg");
}
This article has good information you can use
So I must change every image extension, right?
– Marco P
Nov 8 at 11:32
I use <img src="....webp">
– Marco P
Nov 8 at 11:34
@MarcoP - well, you need 2 formats for sure. You can also use 3rd party image hosting service such as Cloudinary, which can auto-detect browser support and serve the right format to the user
– vsync
Nov 8 at 11:34
Ok thank you very much, it will be a long work for me ahah
– Marco P
Nov 8 at 11:36
add a comment |
up vote
0
down vote
accepted
You need to fallback to a supported image format. here's an example using the <picture>
element:
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="">
</picture>
You did not specify the very important information - are you using the images as <img>
elements or a CSS backgrounds?
If the images are used in CSS then you can use Modernizr's .no-webp
class name to target non-support browsers and serve a non-webp format instead:
.no-webp .elementWithBackgroundImage {
background-image: url("image.jpg");
}
This article has good information you can use
So I must change every image extension, right?
– Marco P
Nov 8 at 11:32
I use <img src="....webp">
– Marco P
Nov 8 at 11:34
@MarcoP - well, you need 2 formats for sure. You can also use 3rd party image hosting service such as Cloudinary, which can auto-detect browser support and serve the right format to the user
– vsync
Nov 8 at 11:34
Ok thank you very much, it will be a long work for me ahah
– Marco P
Nov 8 at 11:36
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
You need to fallback to a supported image format. here's an example using the <picture>
element:
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="">
</picture>
You did not specify the very important information - are you using the images as <img>
elements or a CSS backgrounds?
If the images are used in CSS then you can use Modernizr's .no-webp
class name to target non-support browsers and serve a non-webp format instead:
.no-webp .elementWithBackgroundImage {
background-image: url("image.jpg");
}
This article has good information you can use
You need to fallback to a supported image format. here's an example using the <picture>
element:
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="">
</picture>
You did not specify the very important information - are you using the images as <img>
elements or a CSS backgrounds?
If the images are used in CSS then you can use Modernizr's .no-webp
class name to target non-support browsers and serve a non-webp format instead:
.no-webp .elementWithBackgroundImage {
background-image: url("image.jpg");
}
This article has good information you can use
edited Nov 8 at 11:35
answered Nov 8 at 11:29
vsync
44.1k35154214
44.1k35154214
So I must change every image extension, right?
– Marco P
Nov 8 at 11:32
I use <img src="....webp">
– Marco P
Nov 8 at 11:34
@MarcoP - well, you need 2 formats for sure. You can also use 3rd party image hosting service such as Cloudinary, which can auto-detect browser support and serve the right format to the user
– vsync
Nov 8 at 11:34
Ok thank you very much, it will be a long work for me ahah
– Marco P
Nov 8 at 11:36
add a comment |
So I must change every image extension, right?
– Marco P
Nov 8 at 11:32
I use <img src="....webp">
– Marco P
Nov 8 at 11:34
@MarcoP - well, you need 2 formats for sure. You can also use 3rd party image hosting service such as Cloudinary, which can auto-detect browser support and serve the right format to the user
– vsync
Nov 8 at 11:34
Ok thank you very much, it will be a long work for me ahah
– Marco P
Nov 8 at 11:36
So I must change every image extension, right?
– Marco P
Nov 8 at 11:32
So I must change every image extension, right?
– Marco P
Nov 8 at 11:32
I use <img src="....webp">
– Marco P
Nov 8 at 11:34
I use <img src="....webp">
– Marco P
Nov 8 at 11:34
@MarcoP - well, you need 2 formats for sure. You can also use 3rd party image hosting service such as Cloudinary, which can auto-detect browser support and serve the right format to the user
– vsync
Nov 8 at 11:34
@MarcoP - well, you need 2 formats for sure. You can also use 3rd party image hosting service such as Cloudinary, which can auto-detect browser support and serve the right format to the user
– vsync
Nov 8 at 11:34
Ok thank you very much, it will be a long work for me ahah
– Marco P
Nov 8 at 11:36
Ok thank you very much, it will be a long work for me ahah
– Marco P
Nov 8 at 11:36
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53206746%2fwebp-images-on-different-browsers%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Related - Detecting WebP support
– vsync
Nov 8 at 12:21