本文转载自微信公众号“天天向上”，作者小义。转载本文请联系天天向上公众号。大家好，我是小艺。共享的内容是您应该使用图片标签而不是Img标签的原因。在用户界面中使用图像和动画已成为现代Web应用程序中的普遍现象。虽然这些现代设计专注于改善应用程序的用户体验，但如果这些图像不能在所有设备上响应，事情就会适得其反。作为开发人员，我们必须满足所有这些要求。但大多数时候，我们会错过可以产生巨大影响的小事，因为我们正在寻找更高层次的解决方案。在图片标签和img标签之间做出选择可能是一个很小的决定，但如果您做出正确的选择，您将能够改善用户体验和性能。本文将讨论picture和img标签之间的区别，以及是什么让picture标签比img标签更突出。下次您创建React图片组件时，请务必将您将要学习的最佳实践实施到其中。根据收到的道具返回正确的标签，处理所有必要的回退。img标签的问题是众所周知的。相当长一段时间以来，Img标签一直是HTML的核心元素之一，其简单性和易用性从未受到质疑。然而，随着各种屏幕尺寸、分辨率和复杂用户需求的设备的发展，人们开始质疑其在多设备应用程序中的响应能力和能力。所有这些问题可以概括为两个主要问题。分辨率切换-为窄屏幕设备提供较小尺寸图像的问题。艺术指导-在不同屏幕尺寸上显示不同图像的问题。现在，让我们看看这些问题是如何解决的，以及图片标签的附加功能。分辨率切换正如我之前提到的，现代网页设计师经常使用高分辨率图像来增加用户吸引力。但是作为开发人员，我们必须非常小心地选择正确的HTML元素。以增加用户吸引力。但是作为开发人员，我们必须非常小心地选择正确的HTML元素。假设您对高分辨率图像使用简单的Img标签。在这种情况下，相同的图像将在您的应用程序运行的每台设备上使用，事实上，这将导致屏幕分辨率较低的设备（例如移动设备）出现性能问题。这可能会导致更长的图像加载时间和从上到下的部分图像加载。从上到下的图片加载问题这个问题可以通过在图片标签上使用srcset和sizes属性轻松解决。srcset属性接受多个图像，它们各自的宽度以像素为单位，浏览器在提供从图片中选择。在上面的示例中，同一图像有3个不同尺寸的版本。sizes属性定义图像在屏幕上占据的空间大小。在上面的例子中，如果屏幕的最小宽度为1280px，则图片将占用1200px。话虽如此，我们建议不要仅将图片标签用于分辨率切换，因为使用更新版本的Img标签（具有更多浏览器支持）可以实现同样的目的。但是，在大多数情况下，我们需要同时处理分辨率切换和美术指导，图片标签是最好的解决方案。那么让我们看看如何使用图片标签来解决这些问题。使用媒体属性的主要思想是根据设备的屏幕尺寸显示不同的图像。在大多数情况下，在大屏幕上看起来不错的图像可能会被裁剪或切换到移动设备时看起来很小。我们可以通过为不同的屏幕尺寸提供不同版本的图像来解决这个问题。这些不同的版本可以是横向、纵向或同一图像的任何自定义版本。有了picture标签，我们可以很方便的在picture标签内部使用多个source标签实现分辨率切换。然后我们可以使用media属性来定义将使用哪些源的不同媒体条件。我们还可以以与上一节中讨论的类似方式使用srcset和sizes属性。下面的示例显示了使用图片标签和分辨率切换的完整示例。如果屏幕方向是横向，浏览器将显示第一组图片，如果方向是纵向，浏览器将使用第二组图片。除此之外，您还可以使用带有max-width和min-width参数的媒体属性。最后的img标签是为了向后兼容那些不支持图片标签的浏览器。使用部分支持的图像类型随着技术的快速发展，每天都会引入不同类型的现代图像类型。其中一些类型（如webp、svg和avif）提供更高级别的用户体验。另一方面，一些浏览器对这些现代图像类型有限制，如果我们不使用兼容的图像类型，事情就会适得其反。但是，我们可以使用图片标签轻松解决这个问题，因为它允许我们在其中包含多个来源。上面的例子包括avif、webp和png格式的图片。首先，浏览器会尝试avif格式，如果失败，它会尝试webp格式。如果浏览器不支持这两种格式，它将使用png图像。当Chrome宣布“DevTools将在渲染选项卡中提供两个新的模拟来模拟一些支持的图像类型”时，关于图像标签的事情变得更加有趣。从Chrome88开始，您可以使用ChromeDevTools检查图像类型的浏览器兼容性。使用ChromeDevTools进行图像兼容性仿真总结尽管我们谈到了为什么图像标签比img标签更突出，但我必须坚持认为img标签没有死，也不会很快死。如果我们明智地使用提供的属性（如srcset和size），我们可以充分利用img标签。比如我们只用img标签就可以解决分辨率切换问题。另一方面，我们可以使用图像标签使用媒体查询和其他提供的属性轻松实现分辨率切换和艺术指导。处理某些支持的图像类型的能力和对Chrome开发工具的支持可以被认为是图像标签的额外好处。然而，这两种元素都有其优点和缺点。因此，我们必须仔细考虑并根据我们的要求使用最合适的元素。
