Writing in the front

Remember back in the old days when Photoshop wanted high fidelity output of the image is also relatively large. We have to upload the cut images to TinyPNG for compression in batches. After compression, the images are lossless or not lossy. Greatly improve the speed of website access, and then to the front-end engineering, the work will be handed over to the component tools such as Webpack.

For the use of picture formats, I believe that most of the front-end students are using JPG, PNG, GIF and other image formats. This can be described as the image format of the three world situation. As graphics technology changes, the next generation of graphics formats will change that. Multiple resolutions of the same image are normally handled by media queries, but now it can be easily set using image-set, the SRcset attribute of the IMG tag, or the unfamiliar picture tag. There are also new object-fit and clip-path attributes for CSS, including the previous article. Every front-end needs to know that these future-oriented CSS technologies refer to blending modes and filters that are similar to Photoshop for image processing. Let’s take a look at some of these next generation graphics features.

Next Generation Image FormatWebP

WebP, derived from VP8, is an image file format that provides lossy compression and lossless compression. WebP was originally launched in 2010 with the goal of reducing file sizes but achieving the same image quality as JEPG, with the hope of reducing the time it takes for images to be sent across the web. On November 8, 2011, Google began making WebP support for lossless compression and transparent colors.

According to Google’s earlier tests, WebP’s lossless compression is 45% smaller than PNG files found on the web, and even when PNGCRUSH and PNGOUT are used to process PNGCRUSH and PNGOUT, WebP can still reduce file size by 28%. For now, Webp can reduce image sizes by an average of 70%. WebP is the future of image formats.

Application scenarios and advantages of WebP:

  • Client software, embedded based on Chromium Webview, this kind of browser application of the web page is able to fully use WebP format, improve the loading and rendering speed, without considering compatibility.
  • With Node-WebKit developed procedures, using WebP can reduce the size of the file package.
  • Mobile applications or web games, the interface needs a large number of pictures, can be embedded in the WebP decoding package, can save user traffic, improve access speed advantages:
  • For PNG images, WebP is 45% smaller than PNG

At present, major Internet companies at home and abroad have gradually used WebP, technology blog GigaOM has reported that YouTube video thumbnails using WebP, webpage loading speed increased by 10%; The adoption of WebP in Google’s Online App Store saves several terabytes of bandwidth per day and reduces the average page load time by about a third. Google’s Mobile Marketplace saves 50 TERabytes of storage per day by adopting WebP images; After the application of WebP in Tencent News client in 2014, the peak traffic bandwidth was reduced by 9GB, and the average picture delay and data download delay were reduced by 100ms on the premise of constant network connection delay.

In addition to WebP, there are AVIF, HEIF and JPEG XL and other next generation image formats, interested can go to know.

CSSimage-set

Image-set () since 2012, Chromium-based browsers and Safari have supported CSS since version 6. Firefox 88 is currently supported.

.img { 
background-image: image-set(
"platypus.png" 1x,
"platypus-2x.png" 2x);
}
Copy the code

1X is used to identify low resolution images, while 2X is used to define high resolution images. X is an alias for DPPX, which stands for points per pixel.

The -webkit- prefix is currently required. This will be handled automatically if you use Autoprefixer. Safari no longer requires prefixes, but uses an older syntax that requires the URL () function to specify the path to the image. We can also include a regular background-image: URL () to accommodate anything that does not support image-set.

.img { 
/* Fallback */ 
background-image: url("platypus.png"); 
/* Chrome/Edge/Opera/Samsung, Safari will fallback to this as well */ 
background-image: -webkit-image-set(url("platypus.png") 1x, url("platypus-2x.png") 2x); 
/* Standard use */ 
background-image: image-set("platypus.png" 1x, "platypus-2x.png" 2x); }
Copy the code

CSSobject-fit

The object-fit attribute is similar to background-size, which can help us deal with the adaptation effects of IMG and video. Another attribute is object-position, which is somewhat similar to background-position.

There are five values of object-fit, and each value has a different effect, such as the effect shown in the following figure:

CSSclip-path

Clip-path provides functions such as polygon(), Circle (), Ellipse () and inset() to help draw some basic shapes, as shown below:

Clip-path can be used to create irregular shapes. For example, if you want to personalize the user’s avatar, use the polygon() function:

.avatar { 
    clip-path: polygon(0% 5%.100% 0%.100% 85%.65% 80%.75% 100%.40% 80%.0% 75%); 
}
Copy the code

Img tagssrcsetattribute

The srcset attribute of the IMG element is used by the browser to load image resources based on width, height, and pixel density.

Property format: Image address width description W pixel density description X, multiple resources separated by commas. Such as:

<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />
Copy the code

The example above shows that a browser width of 800px loads middle. JPG and a browser width of 1400px loads big.jpg. Note: the pixel density description is only valid for fixed width images.

The size attribute of the IMG element gives the browser an estimated image display width.

Property format: Media query width description (support PX), multiple rules separated by commas.

<img src="images/gun.png" 
         srcset="images/bg_star.jpg 1200w, images/share.jpg 800w, images/gun.png 320w"
         sizes="(max-width: 320px) 300w, 1200w"/ >Copy the code

The example above shows a 300px image width for a 320px browser viewport and 1200px for other scenarios.

Picture the label

This tag daily development believe that many students are less contact, in fact, HTML has been supporting the tag for many years.

<picture>
<source srcset="./img.webp" type="image/webp">
<img src="./img.jpg" alt="a small kitten">
</picture>
Copy the code

Image-set also provides equivalent CSS, allowing the next generation image format to be used by specifying the MIME type of the image:

.img {
background-image: image-set( "kitten.webp" type("image/webp"),
            "kitten.jpg" type("image/jpeg")); }Copy the code

Sometimes that’s the kind of thing that you want to do in the first place with background-image + Position and maybe you don’t need it at all.

<div>
<picture>
  <source srcset="https://assets.codepen.io/429997/abstract_space.jpeg?width=896&height=539&format=avif" type="image/avif"
>
  <img 
src="https://assets.codepen.io/429997/abstract_space.jpeg?width=896&height=539&format=auto
" alt="">
</picture>
  <h1>Example text over image</h1>
</div>
Copy the code
body {
  margin: 0;
  color: white;
  font-family: system-ui, sans-serif;
}       

div {
    position: relative;
    width: 100%;
    height: 291px;
}
        
 img {
       position: absolute;
       object-fit: cover;
       height: 100%;
       width: 100%;
}

  h1 {
       position: relative;
       text-align: center;
       margin: 0;
}
Copy the code

Write in the last

I’ll share these here, and I’ll share more in the future, exploring the next generation of image formats like AVIF, HEIF, and JPEG XL. Keep an eye out for CSS you don’t know about in my column where I collect more CSS related new technologies and features.