l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何使用WP Smush优化WordPress图片及其替代方案

如何使用WP Smush优化WordPress图片及其替代方案

Bug编译狮

Bug编译狮

WordPress Smush 是一款免费的插件，它可以帮助您优化您的WordPress网站上的图片文件大小和质量。

首先，我们需要安装并启用这个插件。请按照以下步骤操作：

  1. 登录到您的 WordPress 管理面板。
  2. 导航到“插件”部分，然后点击“添加新插件”按钮。
  3. 在搜索框中输入“Smush”，找到并点击“Smush: Image Optimizer for WordPress”。
  4. 选择您的 WordPress 主题，然后点击“激活”以启用该插件。

接下来，我们将使用 Smush 插件来优化我们的 WordPress 图片。

假设我们有一个名为 “example.jpg” 的图片文件，现在我们想使用 Smush 插件对其进行优化。请按照以下步骤操作：

  1. 打开 WordPress 编辑器（通常是按 Ctrl + Shift + V 或者点击屏幕右上角的编辑图标）。
  2. 将 “example.jpg” 文件拖放到编辑区域，或者上传一个新的图片。
  3. 一旦图片被上传或插入，您将在右侧看到一个选项卡，其中包含一些有关此图像的信息，包括其原始尺寸、格式等。
  4. 在这些信息旁边，会有一个蓝色的“优化”按钮。点击这个按钮，将会打开一个弹出窗口。
  5. 在弹出窗口中，您可以设置一些优化参数，如质量、压缩率等。我建议您根据自己的需求调整这些参数。如果您不熟悉这些参数，可以参考 Smush 插件的帮助文档或在线教程。
  6. 设置好参数后，点击“开始优化”按钮。这可能需要一些时间，具体取决于您的图片大小和复杂性。
  7. 当优化过程完成时，您可以在左侧的“优化后的图片”选项卡中查看优化后的图片。

通过以上步骤，我们可以使用 Smush 插件优化我们的 WordPress 图片。这样做的好处是可以提高网站加载速度，减少服务器负载，同时还可以节省存储空间。

请注意，虽然 Smush 插件可以有效地优化图片，但它并不能完全消除图片的质量损失。因此，在某些情况下，您可能仍然希望保留高分辨率的原始图片，以便在用户放大图片时能够保持清晰度。在这种情况下，您可以考虑为特定的图片创建预览图或使用其他方法来确保用户体验。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

教学目标：

本课程旨在通过深入浅出的方式，教授您如何使用 WordPress 的 Smush 图片压缩功能以及其替代方案。

课程大纲：

  1. Smush 图片压缩概述
  2. 使用教程：设置 Smush 图片压缩
  3. 使用教程：自定义图片尺寸和质量
  4. 使用教程：处理外部链接的图片
  5. 图像替换与优化

第一部分：Smush 图片压缩概述

演示示例代码：

<?php
function my_smush_script() {
    wp_enqueue_style( 'smush-style', get_template_directory_uri() . '/css/smush.css' );
    wp_enqueue_script( 'smush-script', get_template_directory_uri() . '/js/smush.js', array( 'jquery' ), '1.0', true );
}

add_action( 'wp_enqueue_scripts', 'my_smush_script' );
?>

解释：

这段代码首先加载了 Smush 的 CSS 和 JavaScript 文件（smush-style 和 smush-script），然后通过 add_action 函数将这些文件添加到 WordPress 编辑器中。

第二部分：使用教程：设置 Smush 图片压缩

演示示例代码：

// 设置图片压缩选项
function my_smush_options() {
    add_theme_support('wp-smush-options');
}
add_action('admin_init', 'my_smush_options');

// 自定义选项设置
function my_smush_custom_settings($settings) {
    $settings['quality'] = ['default' => 75, 'description' => 'Quality of the image (between 1 and 99)'];
    return $settings;
}
add_filter('wp_smush_custom_options', 'my_smush_custom_settings');

解释：

这两段代码分别实现了两个目的：一是启用 Smush 的主题支持，二是为用户提供了自定义设置的功能。

第三部分：使用教程：自定义图片尺寸和质量

演示示例代码：

// 定义图片尺寸和质量
function my_smush_dimensions() {
    return [
        'max-width'   => '1080',
        'max-height'  => '1080',
        'min-width'   => '600',
        'min-height'  => '600',
        'quality'     => 75,
    ];
}
add_filter('wp_smush_dimensions', 'my_smush_dimensions');

解释：

这段代码定义了一个自定义的图片尺寸和质量范围，供用户选择。

第四部分：使用教程：处理外部链接的图片

演示示例代码：

// 处理外部链接的图片
function my_smush_link_images() {
    global $post;
    if ($post->ID && !is_attachment()) {
        $sizes = apply_filters('wp_smush_image_sizes', []);
        foreach ($sizes as $size => $options) {
            if (isset($options['link'])) {
                $image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), $size);
                if (!empty($image_url)) {
                    // 进行图片压缩
                    $compressed_size = wp_smush_image(
                        $image_url[0],
                        $options['link'],
                        $options['width'],
                        $options['height']
                    );
                    echo '<img src="' . esc_url($compressed_size['url']) . '" alt="' . esc_attr($compressed_size['alt']) . '">' . "n";
                }
            }
        }
    }
}
add_action('template_redirect', 'my_smush_link_images');

解释：

此代码根据当前页面是否为附件来判断是否需要处理图片，如果为附件则显示对应的图片；如果没有，则显示整个页面的所有图片。

第五部分：图像替换与优化

演示示例代码：

// 替换原图
function my_smush_replace_original_img($content) {
    global $post;
    if ($post->ID && !is_attachment()) {
        $sizes = apply_filters('wp_smush_image_sizes', []);
        foreach ($sizes as $size => $options) {
            if (isset($options['link'])) {
                $image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), $size);
                if (!empty($image_url)) {
                    $content = str_ireplace($image_url[0], '<img src="'.$image_url[0].'" alt="" width="'.$options['width'].'" height="'.$options['height'].'">', $content);
                }
            }
        }
    }
    return $content;
}
add_filter('the_content', 'my_smush_replace_original_img');

解释：

这段代码在 the_content 函数中执行，用于替换原图，确保在图片被替换后仍然可以正常访问。

结语

通过上述示例代码，您可以了解如何使用 WordPress 的 Smush 功能对图片进行优化和替换，从而提升网站的整体性能和用户体验。希望这些建议能帮助您更好地利用这个强大的工具！

, , ,

最新更新