img不要边框_不要毁了你的<img>

img不要边框

by Anthony Ng

由Anthony Ng

不要毁了你的<img> (Don’t ruin your <img>)

As developers and designers, it’s our duty to ensure the best user experience possible. And you know what one huge part of that experience is? Images.

作为开发人员和设计师，我们的职责是确保可能的最佳用户体验。 您知道这种经历的重要部分是什么？ 图片。

But many of us are too busy to give images much thought beyond adding a src property and some pixel dimensions.

但是我们很多人都忙于除了添加src属性和某些像素尺寸之外，还没有给图像带来更多思考。

This guide will show you some common problems with image usage, and how to fix them.

本指南将向您展示图像使用方面的一些常见问题，以及如何解决这些问题。

I also built a website with live examples to illustrate all of these issues. Do some hard refreshes, resize your browser, and you’ll quickly see what I mean. ?

我还建立了一个带有实时示例的网站来说明所有这些问题。 进行一些严格的刷新，调整浏览器的大小，您很快就会明白我的意思。 ？

Oh, and you can find all of the source code here on Github.

哦，您可以在Github上找到所有源代码。

Let’s get started.

让我们开始吧。

缩小图像 (Cut images down to size)

When you visit a website, an HTML page is sent to your browser. The browser then has to download any assets that the HTML page includes. Your browser has to load any JavaScript files, stylesheets — and of course, images — that the page uses. Each of these assets takes time to load. The larger the file, the longer it will take.

当您访问网站时，HTML页面将发送到您的浏览器。 然后，浏览器必须下载HTML页面包含的所有资产。 您的浏览器必须加载页面使用的所有JavaScript文件，样式表(当然还有图像)。 这些资产中的每一个都需要时间来加载。 文件越大，所需时间越长。

We minify our JavaScript files to remove unnecessary bloat and get a smaller file size. We should do the same with our images.

我们缩小JavaScript文件的大小，以消除不必要的膨胀，并减小文件大小。 我们应该对图像进行同样的处理。

One way to get rid of image “bloat” is to make sure dimensions are reasonable. There’s no reason to leave images any larger than they need to be.

消除图像“膨胀”的一种方法是确保尺寸合理。 没有理由将图像保留为任何所需的大小。

If the maximum width of an image on your website is going to be 960px, then there’s no need to use an image file that’s 1800px wide. The load time of your website will suffer. Especially on slower connections. And you’re forcing your user to download more bytes than they need.

如果您网站上图片的最大宽度将为960px，则无需使用1800px宽的图片文件。 您的网站的加载时间将受到影响。 特别是在较慢的连接上。 并且您迫使用户下载比他们需要的更多的字节。

When you know the dimensions of your images, use a program that can resize photos to the size you need them to be. I usually use Sketch or Affinity Designer.

当您知道图像的尺寸时，请使用一个程序，可以将照片调整为所需的尺寸。 我通常使用Sketch或Affinity Designer 。

In our example here, the images both have a width of 960px. However, the original photo has a width of 5183px. There’s no use having an image with such large dimensions if we’re not going to use it.

在此处的示例中，图像的宽度均为960px。 但是，原始照片的宽度为5183px。 如果我们不打算使用具有如此大尺寸的图像，那就没有用了。

After reducing the photo dimensions to have a width of 960px, we see a 90% reduction in file size, with a 6 second improvement in load time over a wifi connection.

将照片尺寸减小到960px的宽度后，我们看到文件大小减少了90％，与wifi连接相比，加载时间缩短了6秒。

And, of course, load times vary depending on your network speed.

而且，当然，加载时间取决于您的网络速度。

If we use the Chrome Developer tool to throttle the connection to a regular 4G connection, we see a whopping 16 second improvement in load time.

如果我们使用Chrome Developer工具将连接限制为常规4G连接，则加载时间将缩短16秒。

使用压缩 (Use compression)

Reducing the dimensions of our image is a great start to reducing the overall file size, but we can do more. We can compress our image to further reduce the image file size, with little (if any) reduction of image quality.

减小图像的尺寸是减小整体文件大小的一个很好的开始，但是我们可以做更多的事情。 我们可以压缩图像以进一步减小图像文件的大小，而几乎不降低(如果有)图像质量。

Compression removes unnecessary junk from our image, such as metadata, embedded thumbnails, comments and unnecessary color profiles.

压缩会从我们的图像中删除不必要的垃圾，例如元数据，嵌入的缩略图，注释和不必要的颜色配置文件。

I use an application called ImageOptim to compress my images. To use it, all you need to do is drag your images into the application and…that’s it. The new compressed image will replace your old one. If you want to automate image compression, you can use a task runner, such as Grunt, to minify your images when building your project.

我使用一个名为ImageOptim的应用程序来压缩我的图像。 要使用它，只需将图像拖到应用程序中就可以了。 新的压缩映像将替换旧的压缩映像。 如果要自动执行图像压缩，则可以在构建项目时使用任务运行器(例如Grunt)来缩小图像。

In our example here, we see a 13% reduction in file size after compression, with a 100 millisecond (12%) improvement in load time over a wifi connection.

在此处的示例中，我们看到压缩后文件大小减少了13％，而通过wifi连接的加载时间缩短了100毫秒(12％)。

100 milliseconds may seem small, but these savings make a difference when you have multiple images on the same page trying to battle through a weak 3G network onto an iPhone.

100毫秒似乎很小，但是当您在同一页面上尝试通过脆弱的3G网络连接到iPhone上的多个图像时，这些节省空间会有所不同。

使用媒体查询使图像响应 (Use media queries to make images responsive)

Now we have a slimmed down image file that will quickly load on your HTML page. The user experience is definitely better, but our job isn’t finished yet. We have to make sure the image looks good on displays of all sizes. It has to be responsive.

现在，我们有了缩小的图像文件，该文件将快速加载到您HTML页面上。 用户体验肯定会更好，但是我们的工作尚未完成。 我们必须确保图像在所有尺寸的显示器上看起来都不错。 它必须具有响应能力。

There are websites where the image doesn’t completely fit into the display. You have to scroll left and right — or even zoom out — in order to view the entire photo. This isn’t the best user experience.

在某些网站上，图片并不完全适合显示。 您必须向左和向右滚动(甚至缩小)才能查看整个照片。 这不是最佳的用户体验。

Let’s use media queries to style our images when the display is a certain size. On smaller displays, we’ll use “max-width: 100%” to style our images.

当显示为特定大小时，让我们使用媒体查询来为图像设置样式。 在较小的显示器上，我们将使用“最大宽度：100％”来设置图像样式。

In our example here, whenever we resize the page, we can see that our responsive image will always fit entirely inside the display. The user doesn’t have to scroll or zoom to view the full image.

在这里的示例中，每当我们调整页面大小时，我们都可以看到我们的响应式图像将始终完全适合显示器内部。 用户不必滚动或缩放即可查看完整图像。

询问美术指导 (Ask an art director)

Our user experience is definitely improving. Our image is light and responsive. However, this scaled down image might not be exactly what we want on our website.

我们的用户体验肯定正在改善。 我们的形象清淡而敏感。 但是，按比例缩小的图像可能并不完全符合我们在网站上想要的。

For example, our website might be about the Empire State Building. When the image is 960px, the Empire State Building stands majestically in the center of the skyline, recognizable at a glance. But once we resize our browser to be 360px wide, it loses some of its pizzazz. In this instance, a scaled down image isn’t what we want.

例如，我们的网站可能是关于帝国大厦的。 当图像为960px时，帝国大厦雄伟地耸立在天际线的中心，一眼就能认出。 但是，一旦我们将浏览器的大小调整为360px宽，它就会失去一些麻烦。 在这种情况下，缩小图像不是我们想要的。

By making our image responsive, we avoid the issue of users scrolling and zooming out to view our image. But we’re replacing that problem with a new one. Users now have to zoom into the image, only to see a pixelated Empire State Building. This isn’t the best user experience.

通过使我们的图像具有响应性，我们避免了用户滚动和缩小以查看我们的图像的问题。 但是我们正在用一个新的问题代替这个问题。 用户现在必须放大图像，才能看到像素化的帝国大厦。 这不是最佳的用户体验。

In situations like this, our image needs to be changed more drastically. You might want to crop the image or change the image altogether. Doing this is referred to as “art direction.”

在这种情况下，我们的形象需要更彻底地改变。 您可能想要裁剪图像或完全更改图像。 这样做称为“艺术指导”。

To use different images, we can use the <picture> and <source> HTML tags. This tells the browser which image to request and use based on a media query.

要使用不同的图像，我们可以使用<picture>和<source> HTML标签。 这会告诉浏览器根据媒体查询请求和使用哪个图像。

In our example, we’ll be using different images based on the size of our display. Now when you resize the website, you should be able to see the Empire State Building in all of its glory.

在我们的示例中 ，我们将根据显示器的尺寸使用不同的图像。 现在，当您调整网站大小时，您应该能够看到帝国大厦的所有荣耀。

使用服务人员在缓存中获利 (Use service workers to cash in on caching)

Responsive Web Design is a relatively new concept. We should design our websites to look good, no matter what display they’re on. Now there’s a new trend for websites to feel more like Native Apps. Among other things, this means that our websites should function even without an internet connection.

响应式Web设计是一个相对较新的概念。 无论网站显示在什么位置上，我们都应该设计出美观的网站。 现在，网站出现了一种新趋势，使其更像本机应用程序。 除其他外，这意味着即使没有互联网连接，我们的网站也应能正常运行。

What does this mean for our images? For images that are static and won’t be getting updated often (such as logos), we should cache them. When caching assets, these assets are saved to the client browser.

这对我们的图像意味着什么？ 对于静态且不会经常更新的图像(例如徽标)，我们应该对其进行缓存。 缓存资产时，这些资产将保存到客户端浏览器。

When caching assets, these assets are saved to the client browser. The benefit of this is that when the user visits our websites in the future, it will first look for any assets in our cache before requesting from the server. Our image will load even faster, because retrieving from the cache is usually faster than making an HTTP request. Another benefit is that we can even access our image even without internet connection!

缓存资产时，这些资产将保存到客户端浏览器。 这样做的好处是，当用户将来访问我们的网站时，它将首先在我们的缓存中查找任何资产，然后再向服务器请求。 我们的图像加载速度甚至更快，因为从缓存中检索通常比发出HTTP请求更快。 另一个好处是，即使没有互联网连接，我们甚至可以访问我们的图像！

Let’s use service workers to cache our assets. Service workers are a powerful new technology that acts as a middleware between your browser and the internet. This allows us to have fully functioning webpages offline!

让我们使用服务人员来缓存我们的资产。 服务人员是一项强大的新技术，可充当您的浏览器和Internet之间的中间件。 这使我们可以离线使用功能齐全的网页！

In our example, if you turn your internet off and refresh the page, you will see our website still functioning as it used to.

在我们的示例中 ，如果您关闭Internet并刷新页面，您将看到我们的网站仍然可以正常运行。

可访问图像是友好图像 (An accessible image is a friendly image)

When using the <img> HTML tag, keep in mind the alt property.

当使用<IMG> HTML标记，保持分钟d吨他ALT属性。

Many people with visual impairments use tools called screen readers that read all the contents of a webpage out loud to them. They will read the alt property of any images they encounters, and skip over any images that don’t have an alt property. So alt properties are crucial for these people to understand images.

许多视力障碍的人使用称为屏幕阅读器的工具，这些工具会大声朗读网页的所有内容。 他们将读取遇到的任何图像的alt属性，并跳过所有没有alt属性的图像。 因此，alt属性对于这些人理解图像至关重要。

By the way, every image should have an alt property, but if the image is purely for decoration (or clearly explained above), you can leave it blank.

顺便说一句，每个图像都应具有alt属性，但是如果该图像仅用于装饰(或上面已明确说明)，则可以将其留空。

This way, our images can be understood by everyone — even people who can’t see them.

这样，每个人都可以理解我们的图像，即使看不见的人也可以。

That’s all! Have any tips for better using images? Leave a comment below!

就这样！ 有什么技巧可以更好地使用图像吗？ 在下面发表评论！

Want to learn more about Service Workers? Check out this introduction on Google’s developer page.

想更多地了解服务人员？ 在Google开发人员页面上查看此介绍 。

Want to learn more about creating better user experiences through faster websites? Check out this book.

想更多地了解通过更快的网站创造更好的用户体验？ 看看这本书 。

翻译自: https://www.freecodecamp.org/news/you-need-to-stop-making-these-6-mistakes-with-your-img-s-e242c02d14be/

img不要边框