CODEWITHSUNDEEP
jpegfallbackwebp
user10653827
user10653827

Reputation:

Webp Implementation

How can i implement a fallback for webp format or shall i even care about webp?

i tried but this but it doesnt quite work. where is my mistake?

.bgimg-1 {
    background-position: center center;
    background-size: cover;
    background-image: url("background.jpg");
    min-height: 100%;
}
<!-- Header with full-height image -->
<header class="bgimg-1 w3-display-container w3-animate-opacity" id="home">
  
  <picture>
  <source srcset="img/background.webp" type="image/webp">
  <source srcset="img/background.jpg" type="image/jpeg"> 
  <img class="logo" src="img/background.jpg" alt="Alt Text!">
</picture>


  
  <div class="w3-display-bottomleft w3-text-red w3-large w3-grayscale-min" style="padding:24px 48px">
    <i class="fa fa-facebook-official w3-hover-opacity"></i>
    <i class="fa fa-instagram w3-hover-opacity"></i>
    <i class="fa fa-pinterest-p w3-hover-opacity"></i>
    <i class="fa fa-weibo w3-hover-opacity"></i>
    <i class="fa fa-wechat w3-hover-opacity"></i>
    </div>
</header>

Upvotes: 2

Views: 603

Answers (3)

harley81
harley81

Reputation: 192

Here is my webp-background-solution. With the optional class contain you can set the size of the image. The onload event secures the abillity of the final image. You load the image with a hidden picture element and fetch with js the loaded image (with fallback to jpg or png). Finally you set the loaded image with jquery as the background of the parent div.

function makeBgImage( img ){
    let srcImage;
    if ( typeof img.currentSrc === "undefined" ){
        //Old browser
        srcImage = img.src;
    }else{
        //Modern browser
        srcImage = img.currentSrc;
    }
    let ref = $(img).parents('div:first');
    ref.css('background', 'url(' + srcImage + ')');
    if( ref.hasClass('contain') ){
        ref.css('background-size', 'contain');
    }else{
        ref.css('background-size', 'cover');
    }
    ref.css('background-position', 'center');
    ref.css('background-repeat', 'no-repeat');
}
.hidden{display: none;}
.img-container{
  width: 100%;
  padding-top: 62.5%; /* 8:5 Aspect Ratio */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-container">
  <picture class="hidden">
    <source srcset="image.webp" type="image/webp">
    <img onload="makeBgImage(this)" alt="Image" src="image.png">
  </picture>
</div>

Upvotes: 0

8ctopus
8ctopus

Reputation: 3237

Adding webp images to your site is definitely something to consider to increase page loading speed, however not all browsers support the new format (Internet Explorer for example does not support it). In addition, the implementation you suggest complexifies the html a fair amount.

An elegant way to solve the problem is to dynamically serve webp images for browsers that support it as the later do mention what formats they support in the request headers.

Here's suggested implementation without changes to your html

<header class="bgimg-1 w3-display-container w3-animate-opacity" id="home">
<img class="logo" src="img/background.jpg" alt="Alt Text!">

Convert all images in the img dir to webp. Then add this to your .htaccess file

RewriteEngine On

# redirect images to webp when possible
# check if browser accepts webp
RewriteCond %{HTTP_ACCEPT} image/webp

# check if requested file is jpg or png
RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$

# check if a webp file exists for this image
RewriteCond %{REQUEST_FILENAME}\.webp -f

# serve webp image instead
RewriteRule . %{REQUEST_FILENAME}\.webp [T=image/webp,E=EXISTING:1,E=ADDVARY:1,L]

# make sure that browsers which do not support webp also get the Vary:Accept header
# when requesting images that would be redirected to existing webp on browsers that does.
SetEnvIf Request_URI "\.(jpe?g|png)$" ADDVARY

# Apache appends "REDIRECT_" in front of the environment variables defined in mod_rewrite, but LiteSpeed does not.
# So, the next lines are for Apache, in order to set environment variables without "REDIRECT_"
SetEnvIf REDIRECT_EXISTING 1 EXISTING=1
SetEnvIf REDIRECT_ADDVARY 1 ADDVARY=1

# Set Vary:Accept header for the image types handled by WebP Express.
# The purpose is to make proxies and CDNs aware that the response varies with the Accept header.
Header append "Vary" "Accept" env=ADDVARY

Upvotes: 0

Christiaan1981
Christiaan1981

Reputation: 11

Looks like webp is getting more widely accepted & it does increase loading speed significantly if you're into SEO.

Looks like you are doing 2 different things. In order to implement webp in the body you can use (instead of the usual img tag):

<picture>
  <source srcset="img/background.webp" type="image/webp">
  <source srcset="img/background.jpg" type="image/jpeg"> 
  <img class="logo" src="img/background.jpg" alt="Alt Text!">
</picture>

if you want to implement it in the css (for the background picture you're trying to load)I would recommend this way instead:

.bgimg-1{
   background-position: center center;
   background-size: cover;
   background-image:image("background.webp", "background.jpg")
}

Upvotes: 1

Related Questions