ipad一代应用_通过下一代图像提高您的应用程序性能

最新推荐文章于 2024-07-22 14:15:06 发布

weixin_26736149

最新推荐文章于 2024-07-22 14:15:06 发布

阅读量115

点赞数

文章标签： java python 计算机视觉人工智能

原文链接：https://levelup.gitconnected.com/improve-your-react-app-performance-with-next-gen-images-a8280665510

版权

ipad一代应用

It is no secret today that an app performance is an important component in the user experience. According to a study conducted by Google, 53% of mobile users will leave a page if it takes longer than 3 seconds to load.

如今，应用程序性能已成为用户体验中的重要组成部分，这已不是什么秘密。根据Google进行的一项研究， 如果加载时间超过3秒 ，则有53％的移动用户会离开该页面 。

After finally shipping out my personal project, City Secrets, I decided to run some Lighthouse Test and improve the performance.

在最终交付了我的个人项目City Secrets之后，我决定运行一些Lighthouse Test并提高性能。

Note: If you are unfamiliar with Lighthouse, it’s an open source tool that allows you to run audits on your web pages not only for performance but also accessibility, SEO, progressive web apps and more. The best way I found to run it is from the Chrome DevTools.

注意：如果您不熟悉 Lighthouse ，那么它是一个开放源代码工具，可让您在网页上运行审核，不仅包括性能，还包括可访问性，SEO，渐进式Web应用程序等。 我发现最好的运行方式是从Chrome DevTools。

问题：图像加载太慢 (The problem: Images loading too slowly)

City Secrets’ homepage contains one header image and 4 smaller ones. Thanks to the Lighthouse tool, I discovered I was spending far too much time loading them. This in turn impacted the time it took for the app to be interactive (and as a result, useful for the user). Yikes!

City Secrets的首页包含一个标题图片和4个较小的图片。多亏了Lighthouse工具，我发现我花了太多时间来加载它们。反过来，这影响了应用程序进行交互所花费的时间(因此，对用户有用)。 kes！

Thankfully, the Lighthouse report also includes ways to improve your score.

幸运的是，灯塔报告还包括提高分数的方法。

但是，什么是下一代格式？ (But, what are next-gen formats?)

Next-gen formats include WebP, JPEG 2000 and JPEG XR. Those image formats possess superior compression (making images even lighter than JPEG and PNG) without losing in quality.

下一代格式包括WebP，JPEG 2000和JPEG XR。这些图像格式具有出色的压缩效果(使图像比JPEG和PNG还要亮)，而不会降低质量。

But how big of a difference is it? Is it worth putting any effort into it?

但这有多大的区别？值得付出努力吗？

Well, my header image went from 357 kB in JPEG to 184 kB in WebP! That’s 51% smaller!

好吧，我的标题图片从JPEG的357 kB变为WebP的184 kB！ 小51％ ！

WebP与JPEG 2000与JPEG XR (WebP vs JPEG 2000 vs JPEG XR)

The only downside to next-gen formats is that none of them have universal browser compatibility today.

下一代格式的唯一缺点是，它们今天都没有通用的浏览器兼容性。

WebP (WebP)

While WebP is making great progress in being recognized by browsers, there are still a few that don’t recognize it. Like Safari, though the next release should, and Internet Explorer (a surprise to everyone, I imagine).

尽管WebP在被浏览器识别方面取得了长足的进步，但仍有一些无法识别。与Safari一样，尽管应该发布下一个版本，但它和Internet Explorer一样(我想所有人都感到惊讶)。

JPEG 2000 (JPEG 2000)

Currently only supported by Safari and iOS Safari.

当前仅受Safari和iOS Safari支持。

JPEG XR (JPEG XR)

Developed by Microsoft in 2009 and as a result, supported by Internet Explorer

由Microsoft在2009年开发，因此得到Internet Explorer的支持

With these three formats, we now have universal browser compatibility.

通过这三种格式，我们现在具有通用的浏览器兼容性。

将JPEG / PNG图像转换为WebP / JPEG 2000 / JPEG XR (Convert JPEG/PNG images to WebP/JPEG 2000/JPEG XR)

Here is a tool to convert an image to all three formats: https://www.aconvert.com/image/

这是将图像转换为所有三种格式的工具： https : //www.aconvert.com/image/

For WebP, I also like this one: https://squoosh.app/

对于WebP，我也喜欢这一点： https : //squoosh.app/

带图片标签HTML下一代图像 (Next-gen images in HTML with the picture tag)

Now that we have the same images in a whole bunch of formats, what to do? Well, thankfully, HTML5 offers a handy tag called picture. This tag supports multiples sources and gives developers more flexibility in specifying images sources.

现在我们已经拥有了一整套格式的相同图像，该怎么办？幸运的是，HTML5提供了一个方便的标签，称为图片。该标签支持多种来源，并为开发人员提供了更多指定图像来源的灵活性。

For examples, this would be an image displayed on the homepage:

例如，这是主页上显示的图像：

<picture>
   <source srcset="assets/img/bordeaux.webp" type="image/webp">
   <source srcset="assets/img/bordeaux.jxr" type="image/jxr">
   <source srcset="assets/img/bordeaux.jp2" type="image/jp2">
   <source srcset="assets/img/bordeaux.jpg" type="image/jpeg">
   <img src="assets/img/bordeaux.jpg" alt="Photo of Bordeaux" /> 
</picture>

This way, all our formats are included and the different browsers can process the one they support.

这样，包括了我们所有的格式，并且不同的浏览器可以处理它们支持的格式。

用React创建一个Image组件 (Create an Image component with React)

This is very nice but a big chunky. Let’s continue by abstracting this logic into a component.

这非常好，但是很大。让我们继续将此逻辑抽象为一个组件。

import React from 'react';const ImgNextGen = ({
  srcWebp,
  srcJrx,
  srcJp2,
  fallback,
  alt,
  ...props}) => {
  return (
    <picture>
       <source srcset={srcWebp} type="image/webp" />
       <source srcset={srcJrx} type="image/jxr" />
       <source srcset={srcJp2} type="image/jp2" />
       <source srcset={fallback} type="image/jpeg" />
       <img src={fallback} alt={alt} {...props} />
    </picture>
  );
};export default ImgNextGen;

And if we wanted to use it:

如果我们想使用它：

<ImgNextGen
    srcWebp="assets/img/bordeaux.webp"
    srcJrx="assets/img/bordeaux.jrx"
    srcJp2="assets/img/bordeaux.jp2"
    fallback="assets/img/bordeaux.jpg"
    alt="Photo of Bordeaux"
/>

下一代CSS (Next-gen in CSS)

What about background-images for example? Checking for WebP/JPEG 2000/JPEG XR compatibility is a tiny bit more tricky but certainly not impossible.

例如背景图像呢？检查WebP / JPEG 2000 / JPEG XR兼容性有些棘手，但并非不可能。

To achieve it, I recommend Modernizr. It’s a free and handy tool that allows you to check what HTML/CSS/Javascript features the browser supports. It works by adding a class to the html tag. In the case of WebP for example, modernizr would add .webp or .no-webp depending on the user's browser which allows you to then use the right image.

为此，我建议使用Modernizr 。这是一个免费且方便的工具，可让您检查浏览器支持HTML / CSS / Javascript功能。通过将一个类添加到html标签中，可以工作。以WebP为例，modernizr会根据用户的浏览器添加.webp或.no-webp ，从而允许您使用正确的图像。

Here is how it works:

下面是它的工作原理：

1. Head to Modernizr

1.前往Modernizr

2. Go to Download

2.前往下载

3. Check three features: Webp, JPEG 2000, JPEG XR

3.检查三个功能：Webp，JPEG 2000，JPEG XR

4. Click Build

4.单击生成

You then have a few choices. You can download the js file and import it into your React project.

然后，您有一些选择。您可以下载js文件并将其导入到React项目中。

Personally, I decided to click on “Open build on codepen.io” and then copy the javascript portion. Next, open your public/index.html file in your React project and paste the javascript into the head (Don't forget the <script> tag).

我个人决定单击“在codepen.io上打开版本”，然后复制javascript部分。接下来，在React项目中打开public/index.html文件，并将javascript粘贴到头部(不要忘记<script>标记)。

It should look similar to this:

它看起来应该类似于：

<script>
/*! modernizr 3.6.0 (Custom Build) | MIT *
 * https://modernizr.com/download/?-jpeg2000-jpegxr-webp !*/
!function(A,n,e){function o(A,n){return typeof A===n}function a(){var A,n,e,a,t,i,r;for(var l in s)if(s.hasOwnProperty(l)){if(A=[],n=s[l],n.name&&
...
</script>

As I mentioned, if you find it too long, simply download the js file and import it into your head.

如前所述，如果发现时间太长，只需下载js文件并将其导入您的头部即可。

Either way, depending on your user’s browser, the correct class is added to your html. This allows us to structure our CSS this way:

无论哪种方式，取决于您用户的浏览器，正确的类都将添加到您的html中。这使我们可以通过以下方式构造CSS：

.home-bg {
    background-image: url('assets/img/home-header.jpg')  /* default */
}.webp .home-bg {
    background-image: url(assets/img/home-header.webp')
}.jpeg2000 .home-bg {
   background-image: url('assets/img/home-header.jp2')
}.jpegxr .home-bg {
   background-image: url('assets/img/home-header.jxr')
}

That’s it! I hope it was helpful. Don’t hesitate to contact me if you have any questions.

而已！希望对您有所帮助。如有任何疑问，请随时与我联系。

Here are some resources mentioned in this tutorial (in case, you missed them):

这里是本教程中提到的一些资源(以防万一，您错过了它们)：

Lighthouse documentation on next-gen formats: https://web.dev/uses-webp-images/?utm_source=lighthouse&utm_medium=devtools

下一代格式的Lighthouse文档： https : //web.dev/uses-webp-images/? utm_source = lighthouse & utm_medium =devtools

To check browser compatibility of your format: https://caniuse.com/

要检查您的格式的浏览器兼容性： https : //caniuse.com/

To convert images to WebP/JPEG 2000/ JPEG XR: https://www.aconvert.com/image/

要将图像转换为WebP / JPEG 2000 / JPEG XR： https : //www.aconvert.com/image/

Modernizr: https://modernizr.com/

Modernizr： https ： //modernizr.com/

Originally published at https://blog.wanderingcreative.ca on September 4, 2020.

最初于 2020年9月4日 发布在 https://blog.wanderingcreative.ca 上。

翻译自: https://levelup.gitconnected.com/improve-your-react-app-performance-with-next-gen-images-a8280665510

ipad一代应用

weixin_26736149

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ipad一代应用_通过下一代图像提高您的应用程序性能

ipad一代应用It is no secret today that an app performance is an important component in the user experience. According to a study conducted by Google, 53% of mobile users will leave a page if it takes long...
复制链接

扫一扫