响应式图像_真正响应式图像的完整指南-CSDN博客

响应式图像

There is a lot that goes into making a website responsive, and images are a major factor and can make or break your site. With that out of the way, let's dig in:

要使网站具有响应能力，就要付出很多努力，图像是一个主要因素，可以决定您的网站成败。不用担心，让我们深入探讨：

<img src="giraffe.jpg" />

Whoa! That's not quite right, let's fix that.

哇！那不是很正确，让我们修复它。

使用CSS的宽度图像百分比 (Percentage width images using CSS)

By definition, a responsive site has no fixed width. We can account for this by setting our image width using percentages. A percentage width can be set on the image directly using inline CSS or set globally using a CSS style sheet.

根据定义，响应站点没有固定的宽度。我们可以通过使用百分比设置图像宽度来解决这一问题。可以使用内嵌CSS在图像上直接设置百分比宽度，也可以使用CSS样式表在全局上设置百分比宽度。

<!-- Inline CSS -->
<img src="giraffe.jpg" style="max-width: 100%;" />

/* Global CSS style sheet */
img {
    max-width: 100%;
}

Our image set to 100% maximum width now looks like this. Feel free to resize your browser window and see the image width change automatically.

设置为最大宽度100％的图像现在看起来像这样。随意调整浏览器窗口的大小，并查看图像宽度自动更改。

Awesome! Our images are now responsive, but let's not get too excited. CSS percentage widths have a major downside: This reading pane has a maximum width of 700 pixels and our image is 3742 pixels wide or 532% larger than what we need. It's also consuming 1.55 MB of bandwidth.

太棒了！现在，我们的图像响应灵敏，但请不要过于激动。 CSS百分比宽度有一个主要缺点：此阅读窗格的最大宽度为700像素，我们的图像宽3742像素，比我们所需的图像大532％。它还消耗1.55 MB的带宽。

所以图像很大，有什么大不了的？ (So the image is huge, what's the big deal?)

On a standard ADSL internet connection it is going to take 2 seconds to download that single image.

在标准的ADSL Internet连接上，将需要2秒钟下载该单个图像。

I'm going to assume you have more than one image on your website. If every image takes 2 seconds to download, your site will be very slow and your search ranking will take a big hit.

我假设您的网站上有多个图片。如果每张图片需要2秒钟下载，则您的网站将非常缓慢，并且您的搜索排名将受到很大的冲击。

我们如何解决这个问题？ (How can we fix this problem?)

Since we only need an image that is 700 pixels wide, let's pop open Photoshop and resize it.

由于我们只需要700像素宽的图像，因此我们弹出Photoshop并调整其大小。

That's better! Our image is now 700 pixels wide and weighs in at 264 KB with no loss of quality.

那更好！我们的图像现在为700像素宽，重264 KB，没有质量损失。

那么移动设备呢？ (What about mobile devices?)

Great question! On mobile devices, 700 pixels can be more than double what you need and 264 KB on is still slow on a mobile internet connection.

好问题！在移动设备上，700像素可以是您需要的两倍以上，并且在移动Internet连接上264 KB的速度仍然很慢。

What if we could display different size images for different size devices?

如果我们可以为不同尺寸的设备显示不同尺寸的图像怎么办？

Now you're thinking!

现在你在想！

使用srcset属性的不同图像大小 (Different image sizes using the srcset attribute)

Let's downsize our original image and save it as three versions of 700 pixels, 480 pixels and 360 pixels. We'll name them as follows:

让我们缩小原始图像的尺寸并将其保存为700像素，480像素和360像素的三个版本。我们将它们命名如下：

giraffe-small.jpg - 360px @ 101 KB
giraffe-small.jpg-360px @ 101 KB
giraffe-medium.jpg - 480px @ 151 KB
giraffe-medium.jpg-480px @ 151 KB
giraffe-large.jpg - 700px @ 264 KB
giraffe-large.jpg-700px @ 264 KB

We'll use the srcset attribute to tell the browser about our different image sizes. This tells the browser that we have three versions of this image in the sizes 360w, 480w and 700w. The "w" in this case is the same as "px".

我们将使用srcset属性来告知浏览器我们不同的图像大小。这告诉浏览器，我们有此图像的三个版本，大小分别为360w，480w和700w。在这种情况下，“ w”与“ px”相同。

<img 
    style="max-width: 100%;"
    srcset="giraffe-small.jpg 360w, giraffe-medium.jpg 480w, giraffe-large.jpg 700w"
/>

Some older browsers will ignore the srcset attribute. We can use the src attribute as a fallback for these browsers.

一些较旧的浏览器将忽略srcset属性。我们可以使用src属性作为这些浏览器的备用。

<img 
    style="max-width: 100%;"
    srcset="giraffe-small.jpg 360w, giraffe-medium.jpg 480w, giraffe-large.jpg 700w"
    src="giraffe-large.jpg"
/>

Great! Now we are saving bandwidth by delivering different images to different devices.

大！现在，我们通过将不同的图像传送到不同的设备来节省带宽。

This goes without saying, but you know what this means right? You'll need to create a minimum of three versions of every image on your site. If you want to support hi-dpi or retina displays, you'll need even more variations. That is an incredible amount of time that none of us have. In addition, if you re-design your site at different breakpoints, you'll need to do this all over again.

不用说，但是您知道这意味着什么吗？您需要为网站上的每个图像至少创建三个版本。如果要支持Hi-dpi或视网膜显示，则需要更多的版本。那是我们一个人都无法想象的时间。另外，如果您在不同的断点处重新设计站点，则需要重新做一遍。

At Tueri, we're developers too and recognize that your time is valuable. In the next section I'll show you how we solved this problem for you.

在Tueri，我们也是开发人员，并且意识到您的时间很宝贵。在下一节中，我将向您展示我们如何为您解决此问题。

使用Tueri.io进行实时图像处理 (Real-time image processing with Tueri.io)

Tueri.io is a real-time image processing platform. We store, process, and deliver your image perfectly sized to every device.

Tueri.io是一个实时图像处理平台。我们存储，处理和交付大小合适的图像到每台设备。

这是你的工作 (Here's what you do)

Upload your image to Tueri.io
将您的图片上传到Tueri.io
Change the image src to tueri-src
将图像src更改为tueri-src
Include tueri.js in your code
在代码中包含tueri.js

<img tueri-src="https://cdn.tueri.io/274877906982/giraffe-family.jpg"/>
<script src="tueri.js"></script>

就像魔术！ (It's like magic!)

Oh, and we also do:

哦，我们也这样做：

Low-quality image placeholders
低质量的图像占位符
Image lazy-loading
图像延迟加载
Image compression
图像压缩
Image conversion
图像转换

Originally published at Tueri.io

最初发表于Tueri.io

翻译自: https://www.freecodecamp.org/news/your-complete-guide-to-truly-responsive-images/

响应式图像