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

edited Nov 8 at 11:26

vsync

44.1k35154214

asked Nov 8 at 11:22

Marco P

124

Related - Detecting WebP support
– vsync
Nov 8 at 12:21

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

edited Nov 8 at 11:26

vsync

44.1k35154214

asked Nov 8 at 11:22

Marco P

124

Related - Detecting WebP support
– vsync
Nov 8 at 12:21

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

edited Nov 8 at 11:26

vsync

44.1k35154214

asked Nov 8 at 11:22

Marco P

124

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

edited Nov 8 at 11:26

vsync

44.1k35154214

asked Nov 8 at 11:22

Marco P

124

edited Nov 8 at 11:26

vsync

44.1k35154214

asked Nov 8 at 11:22

Marco P

124

edited Nov 8 at 11:26

vsync

44.1k35154214

edited Nov 8 at 11:26

vsync

44.1k35154214

edited Nov 8 at 11:26

vsync

44.1k35154214

asked Nov 8 at 11:22

Marco P

124

asked Nov 8 at 11:22

Marco P

124

asked Nov 8 at 11:22

Marco P

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

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

edited Nov 8 at 11:35

answered Nov 8 at 11:29

vsync

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 |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

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

Name

1 Answer
1

active

oldest

votes

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

edited Nov 8 at 11:35

answered Nov 8 at 11:29

vsync

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 |

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

edited Nov 8 at 11:35

answered Nov 8 at 11:29

vsync

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 |

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

edited Nov 8 at 11:35

answered Nov 8 at 11:29

vsync

44.1k35154214

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

edited Nov 8 at 11:35

answered Nov 8 at 11:29

vsync

44.1k35154214

answered Nov 8 at 11:29

vsync

44.1k35154214

answered Nov 8 at 11:29

vsync

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

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 |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk