www.wpcitation.com/

Tag: 网站加载速度优化

  • WordPress 图片大小： 如何修改和优化图片

    WordPress 图片大小： 如何修改和优化图片

    随着内容竞争的加剧和用户注意力的下降，图片等视觉元素变得比以往更加重要。因此，选择合适的 WordPress 图片尺寸也很重要。

    得益于 WordPress 的灵活性，可以更改默认的图片尺寸，甚至添加自定义图片尺寸。此外，多种图片优化插件让工作更加轻松。

    在本篇文章中，我们看看新手如何修改 WordPress 图片尺寸、如何重新生成缩略图（即将更改的设置应用到之前上传的图片）、图片优化技巧，以及不同图片格式的优缺点。

    图片[1]-361Sale WordPress Care

    WordPress 图片尺寸概览

    每次将图片上传到 WordPress 媒体库时，WordPress 会为该图片生成多种不同的尺寸，例如 700px x 400px。这意味着图片的宽度为 700 像素，高度为 400 像素。

    通过这种功能，网站可以根据图片的使用场景显示合适的尺寸，从而提升加载速度和视觉效果。

    这些数字通常被称为图片的“尺寸”。换句话说，图片尺寸越大，像素越多，文件的存储大小也越大。

    图片大小也指图片在设备上占用的存储空间，通常以字节表示，例如 100KB（千字节）。

    如果图片文件过大，用户下载图片所需时间会更长，从而降低网站的运行速度。因此，文件大小应保持较低，同时图片尺寸需适当。关于图片优化的更多内容，我们会在后面讨论。

    WordPress 如何处理和管理图片？

    当管理员将图片上传到 WordPress 媒体库时，WordPress 会自动创建多种尺寸的图片版本。上传的原始图片被称为“全尺寸图片”，而 WordPress 会根据预定义的尺寸自动生成额外的版本，例如缩略图、中等尺寸和大尺寸。

    图片[2]-361Sale WordPress Care

    这些尺寸在 WordPress 设置中定义，并会根据图片在网站上的展示位置（例如文章、画廊或侧边栏）自动使用。

    为什么 WordPress 要这样做？可以理解为 WordPress 确保您的图片在各种场景中都能得到最佳展示，无论是在侧边栏、页脚、文章中，还是页面上。

    例如，一张 100 像素的小图片可能适合用作文章预览，而相同的图片放大到横幅尺寸也可以保持良好的视觉效果。

    WordPress 生成这些不同尺寸的图片，以便满足网站各个区域的常规需求，同时避免图片被过度拉伸或缩小导致失真。

    WordPress 默认图像大小

    WordPress 生成的图像副本是默认的 WordPress 图像大小。可以根据特定的设计需求调整这些尺寸。我们会在本篇博文中学习如何做到这一点：

    • 缩略图（150×150像素）：通常用于小图像预览。
    • 中等（300×300 像素）：中等尺寸的图像，通常显示在博客文章或页面中。
    • 大尺寸（1024×1024 像素）：主要用于特色图片、全宽图片或任何需要较大图片的情况
    • 全尺寸：这是上传的图像的原始尺寸。
    图片[3]-361Sale WordPress Care

    要查看这些选项，请将照片上传到网站页面并点击它。图像大小选项将显示在右侧面板上。

    推荐的 WordPress 图片尺寸

    网站的不同部分有不同的需求，每个区域需要不同的图片尺寸。以下是具体建议：

    图片类型 推荐尺寸 注意事项
    Logo 200 x 100 像素（或更大，取决于设计） 确保 Logo 为高分辨率 PNG 格式，尽量使用透明背景。
    头部/横幅图片 1200 x 600 像素 图片需足够大以填满屏幕宽度，但需优化以防加载速度变慢。
    特色图片（博客文章） 1200 x 628 像素（社交分享用）或 800 x 450 像素 为社交媒体平台的分享进行优化。
    缩略图 150 x 150 像素 用于博客预览、归档页面和小部件中，不需要过大尺寸。
    产品图片（WooCommerce） 主图：800 x 800 像素
    目录缩略图：300 x 300 像素
    画廊缩略图：100 x 100 像素    		 产品图片应保持正方形以确保一致性。
    背景图片 1920 x 1080 像素 图片需足够大以覆盖全屏宽度，同时文件大小应控制在 500 KB 以下以提升加载速度。
    社交媒体图片 1200 x 630 像素 优化以便在 Facebook 和 Twitter 等平台分享。

    WordPress 图片优化

    没有必要用超过需求的图片尺寸。

    过大的图片文件会导致网页加载速度变慢，很多访问者没耐心的话，会导致他们离开网站。同时，这也可能对搜索引擎排名产生负面影响。（加载速度也是收录因素之一）

    理想情况下，WordPress 图片大小应控制在 150KB 以下，但对于较大的图片，可以适当容忍更大的文件大小。

    以下是优化 WordPress 图片尺寸时需要注意的一些事项：

    压缩 WordPress 图片

    压缩是通过减少文件大小而不影响图片质量的过程。

    图片[4]-361Sale WordPress Care

    在 WordPress 网站上压缩图片是提升网站速度的有效方法之一。

    可以使用以下几种在线工具来进行压缩：

    • TinyPNG
    • Squoosh
    • Imagify
    • Optimizilla
    • Compressor.io

    通过压缩所有的 JPEG（照片）和 PNG（图形）图片，可以显著提升网站的速度和效率。

    压缩有两种主要类型：有损压缩和无损压缩。

    • 有损压缩：通过去除一些可能看不到的图像数据来大幅减少文件大小。适用于网页图片，但如果压缩过度，会导致图像质量略有下降。
    • 无损压缩：保持图像的质量，同时在有限程度上减少文件大小。如果希望保留尽可能多的图像细节，无损压缩是很有用的。

    插件可以大大帮助进行图片压缩，更多内容将在后面介绍。

    调整图片大小

    调整图片大小是指改变图片的实际尺寸（而非像素大小），包括宽度和高度。

    大尺寸图片占用更多的磁盘空间，并且加载时需要更长的时间，因此需要优化。

    许多主题已经提供了多种图片尺寸，可以从中选择。不过，在上传图片到网站之前，最好还是手动调整其尺寸。

    SEO 优化

    在 WordPress 中进行图片的 SEO 优化对搜索引擎排名和网站性能至关重要。压缩图片是提升加载速度和优化 SEO 的重要步骤。

    优化图片的有效技巧

    ✅ 在上传图片之前，确保重新命名。不要使用“IMG1425”。应为图片赋予描述性的名称，如“WordPress 图片大小： 如何修改和优化图片.jpg”。

    ✅ 使用 alt 文本。这对于访客（增强可访问性）和爬虫（帮助理解图片内容并可能提高排名）都很有帮助。

    ✅ 使用响应式图片，因为它们有助于保持或提升移动端的性能，这可能成为搜索引擎排名的一个因素。

    ✅ 为特定类型的图片添加 schema 标记，例如产品图片，以改善 SEO。此外，创建图片站点地图，帮助搜索引擎更好地索引网站图片。

    选择合适的图片格式（JPEG、PNG、GIF 等）

    除了调整尺寸，选择合适的图片格式也非常重要。每种图片格式都有其优缺点。

    以下是几种常见格式及其优缺点：

    格式 优点 缺点
    JPEG 高度压缩，适用于颜色较多的图片，广泛支持浏览器和设备 有损压缩会降低质量，不支持透明背景
    PNG 无损压缩保留图片质量，支持透明背景，适用于图形、logo 和需要清晰度的图片 文件大小比 JPEG 大，不适合大尺寸照片，旧版浏览器支持有限
    WebP 优越的压缩效果，支持透明背景，文件大小更小，比 JPEG 和 PNG 更好 旧版浏览器（如 Internet Explorer、旧版 Safari）支持有限，需要更多处理能力进行编码/解码，尚未普遍应用于所有平台

    可以参阅文章《超详细保姆级教程：手把手教你在 WordPress 中实现 WebP 图片转换，加速网站速度》

    WordPress 图片尺寸优化插件

    插件在优化 WordPress 图片尺寸时非常有帮助。有许多易于使用的插件可以满足不同的需求。

    对于压缩和调整尺寸，您可以使用以下插件：

    EWWW Image Optimizer

    图片[5]-361Sale WordPress Care

    EWWW Image Optimizer 是一款流行的图片优化插件，可以自动压缩图片。主要功能包括：

    • 支持无限文件大小
    • 支持 WebP 转换
    • 付费服务可达到 80% 的压缩率
    • 支持 PNG、JPEG、GIF、WebP 和 PDF 文件
    • 评分：5/5（1,725 评价）

    价格：免费或起价 $8/月

    Smush

    图片[6]-361Sale WordPress Care

    Smush 是一款非常适合压缩和调整图片尺寸的插件，拥有超过 100 万次安装，成为非常受欢迎的 WordPress 图片插件。主要功能包括：

    • 延迟加载图片
    • 支持 WebP 转换
    • 提供免费的无损压缩
    • 与 Gutenberg 块集成
    • 评分：5/5（6,000 评价）

    价格：起价 $6/月

    Imagify

    图片[7]-361Sale WordPress Care

    Imagify 是另一款图片优化插件，提供调整大小和压缩功能，同时不会降低图片质量。主要功能包括：

    • 支持转换为 AVIF 和 WebP 格式
    • 移动设备图片优化
    • 批量优化
    • 评分：4.5/5（1,406 评价）

    价格：免费或起价 $4.99/月

    更改 WordPress 默认图片尺寸

    如前所述，WordPress 已经提供了三个默认的图片尺寸。如果默认设置不满足需求，可以进行更改。

    例如：认为默认的缩略图尺寸（150×150）太大，需要调整为更小的尺寸（例如 100×100）。

    下面是更改步骤：

    • 进入 WordPress 管理后台。
    • 在左侧面板中，点击 设置 > 媒体。
      图片[8]-361Sale WordPress Care
      • 在 媒体设置 部分，可以调整每种尺寸的像素。在此示例中，我更改了缩略图尺寸。
      • 点击 保存更改 按钮保存设置。
      图片[9]-361Sale WordPress Care

        注意：现在更改的设置仅适用于新上传的

        如何重新生成缩略图

        不用担心，可以轻松地将新的设置应用到现有的图片。只需使用 Regenerate Thumbnails 插件即可。

        以下是操作步骤：

        • 进入网站 WordPress 管理后台。
        • 在左侧面板中，点击 插件 > 安装插件。
        图片[10]-361Sale WordPress Care
        • 搜索 Regenerate Thumbnails 插件。
        • 点击 安装。
        • 点击 启用。
        图片[11]-361Sale WordPress Care
          • 启用后，返回仪表盘，点击左侧面板中的 工具 > 重新生成缩略图。
          图片[12]-361Sale WordPress Care
          • 在这里，点击 重新生成所有缩略图附件，以将所有图片更新为新的设置。
          图片[13]-361Sale WordPress Care

          如何在 WordPress 中添加自定义图片尺寸

          WordPress 提供了三种默认的图片尺寸，但如果需要更多的图片尺寸选项，可以通过编辑 functions.php 文件来添加自定义的图片尺寸。

          下面是操作步骤：

          1. 进入网站 WordPress 管理后台。

          2. 在左侧面板中，点击 外观 > 主题文件编辑器。

          图片[14]-361Sale WordPress Care

          3. 在右侧找到 functions.php 文件。

          图片[15]-361Sale WordPress Care

          4. 在 functions.php 文件中，添加一个函数来定义新的图片尺寸，使用 add_image_size()。

            例如：

            phpCopy codeadd_image_size('custom-size-name', 800, 600, true); // 800px 宽，600px 高，裁剪

            其中：

            • 'custom-size-name' – 自定义图片尺寸的唯一名称。
            • 800, 600 – 图片的宽度和高度（以像素为单位）。
            • true 或 false – 裁剪模式。true 启用硬裁剪（精确尺寸），false 保持原始宽高比（软裁剪）。
            1. 点击 更新文件 按钮以保存文件。
            2. 要在主题中显示自定义图片尺寸，粘贴以下代码：
            phpCopy code<?php the_post_thumbnail( 'your-specified-image-size' ); ?>

            💡 在进行任何更改之前，请备份网站数据！

            1. 将“your-specified-image-size”替换为你在前一步中设置的名称。例如，可以将其更改为 custom-size-name。
            图片[16]-361Sale WordPress Care

            常见问题解答

            Q) 在 WordPress 中使用什么尺寸的图片？
            常见尺寸包括：

            • 1200×628 px 用于特色图片
            • 300×300 px 用于缩略图
            • 1024×768 px 用于内容图片

            根据主题需求选择尺寸，并进行优化以加快加载速度。

            Q) 如何调整 WordPress 中的图片尺寸？
            进入 设置 > 媒体 来设置默认尺寸，或者在 媒体库 中单独选择并调整图片尺寸。

            Q) 如何增加 WordPress 中的图片上传大小？
            通过编辑 php.ini 文件、修改 .htaccess 文件，或在主机面板中调整设置来增加上传大小。

            Q) 如何让 WordPress 中的所有图片尺寸一致？
            使用图片编辑插件（例如 Regenerate Thumbnails）或调整自定义 CSS 以确保网站中的图片尺寸一致。

          1. 如何优化 Elementor 设置以提高性能

            如何优化 Elementor 设置以提高性能

            1. 安装 Elementor 并配置设置

            安装 Elementor 后，转到“设置”并进行适当配置：

            • 常规选项卡：选择要使用 Elementor 的帖子类型。如果某些自定义帖子类型 (CPT) 不需要使用 Elementor，请关闭其支持。
            • 高级选项卡：建议将 CSS 打印方法设置为“外部文件”。如果可能，尽量本地存储字体并关闭 Google 字体支持。如果需要使用 Google 字体，选择“交换”方法来加载。
            • 功能选项卡：激活需要的功能，停用不使用的功能。优化 DOM 输出、资源加载等功能非常有用。
            图片[1]-361Sale WordPress Care

            2. 使用元素管理器优化小部件

            图片[2]-361Sale WordPress Care

            Elementor 的元素管理器功能展示所有可用的小部件，包括其它插件的小部件。你可以看到每个小部件的使用次数，从而决定停用哪些不常用的小部件。

            图片[3]-361Sale WordPress Care

            3. 本地加载字体和图标

            最好的方案是本地加载字体和图标，并在首屏上预加载它们。添加自定义字体和图标后，可以停用默认的字体和图标加载。为此，在 functions.php 文件中添加以下代码以停用 Elementor 原生图标 Eicons：

            add_action('wp_enqueue_scripts', 'disable_eicons', 11);
function disable_eicons() {
    wp_dequeue_style('elementor-icons');
    wp_deregister_style('elementor-icons');
}

            4. 优化布局

            Elementor 布局由部分、列和小部件构成，元素越多，请求越多。以下是一些优化建议：

            • 尽量减少部分、列和小部件的数量。
            • 使用“图像+文本”小部件而不是单独的小部件。
            • 使用全局样式设置字体和颜色。
            • 对视频使用延迟加载功能。

            5. 页眉和页脚优化

            页眉位于首屏，对速度指标影响最大。尽量使用纯 HTML 和 CSS 构建页眉。页脚、侧边栏和其它全局元素也应遵循相同的逻辑。

            6. 使用优化和缓存插件

            图片[4]-361Sale WordPress Care

            优化和缓存插件对基于 Elementor 的网站至关重要。推荐使用 WP Meteor、Flying Press 和 Perfmatters 这样的插件，它们能显著改善网站速度。

            7. 限制 Elementor 附加组件

            图片[5]-361Sale WordPress Care

            在安装 Elementor 插件之前，仔细测试并检查其功能，选择不会让网站臃肿且真正需要的插件。避免安装为了使用几个小部件而装整个插件，防止插件冲突。

            总结：

            在优化 Elementor 网站性能时，安装后需进行适当的设置，如选择支持的帖子类型、使用外部文件方式的 CSS 打印方法、本地存储字体并优化 DOM 输出和资源加载等功能。此外，利用元素管理器优化小部件、本地加载字体和图标、优化布局、使用优化和缓存插件以及限制 Elementor 附加组件，都能显著提升网站的加载速度和整体性能。