我们生活在高清世界中。 由于我们大多数人每天花费超过XNUMX个小时来查看不同类型的屏幕， 图像质量 这些屏幕中包含的字符非常重要。
尽管它们仅面世了几年，但Retina显示器仍是未来之路。 视网膜显示器中的高像素密度使图像清晰清晰。 还有谁不喜欢精美清晰的图像呢？
学会 创建一个网站 与 Retina 屏幕兼容是任何 Web 开发人员的重要资产。 不幸的是，没有理想、完美的解决方案可以让您的网站使用 Retina-Ready 显示器对用户友好。
因此，在我们等待某人找到最完整的解决方案的同时，我们也研究了一些最佳的方法来使您的网站准备就绪。 这样，当所有设备都以某种形式出现Retina的时候，您就不会误入歧途。
但是在开始之前，花点时间看一下 如何安装WordPress主题, 我应该如何许多插件安装WordPress的.
那我们开始工作吧！
创建多个图像文件
让我们从基础开始。 获得您的网站的Retina模式支持的最简单方法是 创建不同分辨率的多个图像变体。 这意味着对于每种类型的分辨率（即1x），您需要创建该剪辑的高分辨率版本（即2x）。
基本上，您可以创建同一文件的多个版本，并使用WP Retina 2x之类的插件或诸如retina.js之类的脚本来自动生成每个图像大小的“ @ 2x”版本，或查找“ @ 2x”图像并显示每个设备对应的大小。
的确，创建同一图像的多个版本可能是一个耗时的过程。 不幸的是，没有快速的方法可以自动为您生成这些图像。 然而， 有几个Photoshop插件可让您快速修复图像.
像“ 视网膜 这是一系列Photoshop动作，可让您轻松优化视网膜显示屏的设计。 如果您使用的是Photoshop（CC之前的版本）较旧的版本，则可以使用“ 四 基本上可以完成当前Photoshop Generator工具的所有工作，但适用于旧版本的Photoshop。
可缩放矢量图形（SVG）
进行Retina模式的最简单方法是在您的网站上使用可缩放矢量图形（SVG）。 SVG是基于XML的矢量图像格式。 顾名思义，SVG图像是可伸缩的，这意味着可以将图像拉伸到所需的程度（或尽可能少），同时仍然清晰明了。 这是您轻松实现Retina模式的快速简便的方法。
但是，在WordPress上使用SVG有两个缺点。 首先，由于它是矢量格式，因此SVG不适用于所有图像。 因此，您可以将SVG用于徽标和图标，但不能用于照片等文件（如果您想为网站使用高分辨率图像，那会有些痛苦）。 但是，如果您想使用简单的图标，动画或插图，SVG文件当然可以作为与Retina兼容的网站的一个选项。
在WordPress上使用SVG的第二个缺点是，出于安全考虑，它不是与WordPress正式兼容的格式。 由于SVG文件本质上是XML文件，因此可以将其打开为 与XML文件格式相关的所有已知漏洞，例如强制分析，XML外部实体攻击（XEE），XML拒绝服务攻击（XDoS）攻击等。
但是，有一种方法可以为您的网站启用SVG支持，这将使您的SVG文件安全。
如何在WordPress上安全地启用SVG
安全的SVG 是一个插件，可让您在网站上安全地启用SVG文件支持。 此插件可确保对您的SVG文件进行消毒，以防止影响您网站的任何潜在XML漏洞。
远离允许MIME类型允许从SVG上传到WordPress媒体库的插件，因为它们是危险的，并且可能对您的网站有害。 因此，如果您真的很想在WordPress上使用SVG格式，请确保安全使用，不要下载看到的第一个SVG插件。
阅读我们的博客，为您的博客带来更多转化 产生更多的游客到您的博客15内容类型
一些插件可以在WordPress上集成Retina兼容性
有几种用于Retina兼容性的脚本和插件，可以在尝试设置与Retina Mode兼容的网站时使您的生活更加轻松。 但是，如前所述，大多数可用的插件和脚本会将图像替换为高分辨率图像，仅用于高分辨率显示。 它们不会像SVG那样拉伸：您仍然需要创建多个分辨率不同的图像。
1-retina.js
retina.js 是用于提供高分辨率图像的最常用脚本之一。 这是一个开放源代码脚本，可以轻松地向具有Retina显示屏的设备提供高分辨率图像。
该脚本检查页面上的每个图像，以查看服务器上是否有该图像的高分辨率版本。 如果存在高分辨率变体，则脚本将标准分辨率与高分辨率图像交换。 这是为网站上的Retina显示屏提供图像的最常用方法之一。
另见： GIF，Emojis或Memes：对WordPress网站来说是个好主意吗？
2-密集
与retina.js类似， 稠密 是一个jQuery插件，提供了一种简单的方法来以像素比率格式提供图像。 该脚本调用初始化的$ .fn.dense（）方法，该方法的目标是“ img”标签，这些标签将根据需要用作与Retina模式兼容的图像。
因此，它将所有图像替换为各自的高分辨率版本，就像retina.js脚本一样。
3-WP视网膜2x
后者可以比作神奇的Retina图像生成器。
WP Retina 2x 是一个插件，可创建High-DPI设备所需的图像文件，并相应地将其显示给您的访问者。 与前两个脚本不同，它从初始图像生成不同分辨率的图像。 因此，如果您对手动创建具有不同分辨率的不同图像不太满意，则可以使用此选项。
这就是本教程的全部内容，我希望它将允许您将图像转换为Retina Ready图像。
还发现一些高级WordPress插件
您可以使用其他 WordPress插件 赋予现代外观并优化您的博客或网站的处理。
我们在这里为您提供了一些高级WordPress插件，它们将帮助您实现这一目标。
1。 一个花哨的WordPress作者列表
顾名思义，该插件 花哨的WordPress作者列表 在小部件中显示您网站的作者列表。 它具有简单的用户界面，允许 显示任何作者的信息 在侧边栏中。 您所要做的就是将作者小部件拖到侧边栏，然后插件将完成工作。
其主要特点包括：可能性 显示博客作者 以一种有趣的方式吸引新的访问者，在侧边栏或页面上显示作者列表的功能， 开始比赛 博客作者之间的互动，快速响应的布局，对短代码的支持等等。
2.简易目录
Ce WordPress插件 用户友好型允许您在帖子、页面和自定义帖子类型中插入目录。 它有很多特点，主要有：
自动管理目录，支持标签，Rankin Math插件支持，与多个页面编辑器（例如Gutenberg， Divi, Elementor, WPBakery Page Builder 以及其他选择，包括选择您希望在哪个页面上显示出版物，在某些页面上自动插入目录等等。
这是一个 WordPress插件 免费软件具有显示目录所需的一切，因此请随意选择它作为您的首选。
3。 WooCommerce高级批量编辑
您是否定期编辑产品目录？ 无论您有 100 种产品还是 10.000 种产品，这 WordPress插件 溢价在我看来是“必备品”：（这是我想到的第一个词）。
只需几块钱，插件 WooCommerce Advanced批量编辑 将使生活更轻松，并节省您的时间。 毫不犹豫，这是一颗炸弹。
推荐资源
查找有关其他推荐资源的信息，以帮助您构建和管理网站。
结论
这里 ！ 就是本教程的内容了，希望它可以让您为您的网站创建Retina-Ready图像。 不要犹豫 与您最喜欢的社交网络上的朋友分享.
但是，您也可以咨询 我们的资源，如果您需要更多元素来执行创建Internet网站的项目，请参考我们的指南 WordPress博客创建。
如果您有任何建议或意见，请将其留在我们的部分 评论.
...
