wordpress图像大小_掌握WordPress中的图像优化

wordpress图像大小

When building and maintaining WordPress websites, it’s important to find ways to improve site performance and decrease page load times. This helps reduce bounce rates and increase rankings on search engines.

在构建和维护WordPress网站时，重要的是找到提高网站性能并减少页面加载时间的方法。 这有助于降低跳出率并提高搜索引擎的排名。

There are several ways of achieving performance through a WordPress site’s theme and plugin code – for example, minifying JavaScript, CSS and images. There’s also server based configuration options – for example, enabling caching, or using a WordPress Plugin to help cache static content.

有多种方法可以通过WordPress网站的主题和插件代码来提高性能，例如，最小化JavaScript，CSS和图像。 还有基于服务器的配置选项–例如，启用缓存，或使用WordPress插件来帮助缓存静态内容。

However, we can’t control the content – specifically images – that clients will add to their WordPress web site. Images may be uploaded in their original form, leading to site performance issues and increasing page load times.

但是，我们无法控制客户端将添加到其WordPress网站的内容(尤其是图像)。 图片可能会以其原始形式上传，从而导致网站性能问题并增加页面加载时间。

In this article we will explore different ways of optimizing JPEG and PNG images, which are uploaded by clients and site owners into WordPress.

在本文中，我们将探讨优化JPEG和PNG图像的不同方法，这些方法由客户端和网站所有者上载到WordPress。

主题图片大小 (Theme Image Sizes)

When a WordPress user uploads an image, WordPress provides two functions which we can use to create copies of the original image, at specific dimensions. This is useful where we want to output an image at a specific size within our theme.

当WordPress用户上传图片时，WordPress提供了两个功能，我们可以使用这些功能创建特定尺寸的原始图片的副本。 当我们要在主题内以特定尺寸输出图像时，这很有用。

缩略图，中型和大号 (Thumbnail, Medium and Large Sizes)

Within the WordPress Administration, under Settings > Media, there are three predefined image sizes: thumbnail, medium and large. Each can have their own dimensions set.

在WordPress管理中的“设置”>“媒体”下，有三种预定义的图像尺寸： thumbnail ， medium和large 。 每个都可以设置自己的尺寸。

Because WordPress will always resize images to these sizes (resulting in 4 images being stored – the original, thumbnail, medium and large sizes), it’s worth setting these first and using them within your WordPress Theme where possible.

由于WordPress始终会将图像调整为这些尺寸(导致存储4张图像-原始，缩略图，中型和大尺寸)，因此有必要先进行设置，并在可能的情况下在WordPress主题中使用它们。

To use a predefined image size in your WordPress Theme, use:

要在WordPress主题中使用预定义的图像大小，请使用：

while ( have_posts() ) {
    the_post();
    the_post_thumbnail( 'thumbnail' ); // Or 'medium', or 'large'
}

set_post_thumbnail_size() (set_post_thumbnail_size())

If you need additional image sizes, we can use set_post_thumbnail_size():

如果您需要其他图像尺寸，可以使用set_post_thumbnail_size() ：

Set the default Featured Image (formerly Post Thumbnail) dimensions.

设置默认的“特色图片”(以前称为“缩略图”)尺寸。

This allows us to define the width and height of Featured Images for Posts, Pages and Custom Post Types, which we output in our theme using the_post_thumbnail().

这使我们能够定义帖子，页面和自定义帖子类型的精选图像的宽度和高度，这些宽度和高度我们使用the_post_thumbnail()在主题中输出。

To define the Featured Image size, add the following code to your theme’s functions.php file. This would set Featured Images to be 500px width x 500px height:

要定义“特色图像”大小，请将以下代码添加到主题的functions.php文件中。 这会将Featured Images设置为500px宽x 500px高：

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 500, 500, true );

To output a Post’s Featured Image at the specified dimensions, use the_post_thumbnail() within the WordPress Loop:

要以指定的尺寸输出帖子的特色图片，请在WordPress循环中使用the_post_thumbnail() ：

while ( have_posts() ) {
    the_post();
    the_post_thumbnail();
}

add_image_size() (add_image_size())

Whilst set_post_thumbnail_size() is useful, we can only call it once to define one set of image dimensions, alongside WordPress thumbnail, medium and large sizes. We’re stuck if we then want to output additional sizes – for example, a 500px x 500px image for our Posts, and a 400px x 400px image for our Pages.

尽管set_post_thumbnail_size()很有用，但我们只能调用一次来定义一组图像尺寸，以及WordPress缩略图，中号和大号图像。 如果我们随后想要输出其他尺寸，则会陷入困境，例如，“帖子”的尺寸为500px x 500px，而“页面”的尺寸为400px x 400px。

Thankfully, WordPress also provides the add_image_size() function:

幸运的是，WordPress还提供了add_image_size()函数：

Registers a new image size. This means WordPress will create a copy of the image with the specified dimensions when a new image is uploaded.

注册新的图像尺寸。 这意味着当上传新图像时，WordPress将创建具有指定尺寸的图像副本。

We can call this function within our theme’s functions.php file as many times as we need, in order to register as many image sizes as our theme requires. Let’s register two image sizes, for Posts and Pages respectively:

我们可以根据需要在主题的functions.php文件中多次调用此函数，以便注册主题所需的图像大小。 让我们注册两个图像大小，分别用于Posts和Pages：

add_image_size( 'post', 500, 500, true );
add_image_size( 'page', 400, 400, true );

We can now specify which image size we want to output by modifying our the_post_thumbnail() calls:

现在，我们可以通过修改the_post_thumbnail()调用来指定要输出的图像尺寸：

while ( have_posts() ) {
    the_post();
    the_post_thumbnail( 'post' ); // Or 'page'
}

结果 (Results)

Using our test JPEG and PNG images, we can see the file size reduction and performance gains:

使用我们的测试JPEG和PNG图像，我们可以看到文件大小减小和性能提高：

JPEG图像 (JPEG Image)

Original Dimensions – File Size: 504KB

500px x 500px – File Size: 29KB

400px x 400px – File Size: 21KB

原始尺寸–文件大小：504KB

500px x 500px –文件大小：29KB

400px x 400px –文件大小：21KB

PNG图片 (PNG Image)

Original Dimensions – File Size: 697KB

500px x 500px – File Size: 354KB

400px x 400px – File Size: 236KB

原始尺寸–文件大小：697KB

500px x 500px –文件大小：354KB

400px x 400px –文件大小：236KB

影像压缩 (Image Compression)

Image compression aims to reduce image file sizes further by removing redundant data, with little or no sacrifice to image quality.

图像压缩旨在通过删除冗余数据来进一步减小图像文件的大小，而几乎不牺牲图像质量。

There are two main methods for image compression: lossy and lossless.

图像压缩有两种主要方法：有损和无损。

有损图像压缩 (Lossy Image Compression)

Lossy compression uses inexact approximations, discarding partial amounts of image data, to produce an image that will have a lower file size, whilst maintaining the original image as best as possible.

有损压缩使用不精确的近似值，丢弃部分图像数据，以生成具有较小文件大小的图像，同时尽可能保持原始图像的最佳状态。

Metadata (such as EXIF information, telling us about the camera make, model and location) can be discarded with no effect on image quality.

可以丢弃元数据(例如EXIF信息，告诉我们有关相机的品牌，型号和位置)，而不会影响图像质量。

The disadvantage is that image quality may suffer, so it’s important to find the right balance between fast image loading times and image quality.

缺点是图像质量可能会受到影响，因此在快速图像加载时间和图像质量之间找到适当的平衡非常重要。

Lossy compression is typically used on JPEG images and photographs, where there is a lot of data within the image file to render the image output.

有损压缩通常用于JPEG图像和照片，其中图像文件中有很多数据可呈现图像输出。

Using our test images and tinypng.com, we can see the effects of lossy compression on our JPEG and PNG images:

使用我们的测试图像和tinypng.com ，我们可以看到有损压缩对JPEG和PNG图像的影响：

JPEG图像 (JPEG Image)

Original Dimensions – Original File Size: 504KB, Lossy Compressed File Size: 367KB, Saving: 27%

500px x 500px – Original File Size: 29KB, Lossy Compressed File Size: 17.1KB, Saving: 41%

400px x 400px – Original File Size: 21KB, Lossy Compressed File Size: 12.5KB, Saving: 39%

原始尺寸–原始文件大小：504KB，有损压缩文件大小：367KB，节省：27％

500px x 500px –原始文件大小：29KB，有损压缩文件大小：17.1KB，节省：41％

400px x 400px –原始文件大小：21KB，有损压缩文件大小：12.5KB，节省：39％

PNG图片 (PNG Image)

Original Dimensions – Original File Size: 697KB, Lossy Compressed File Size: 229.6KB, Saving: 67%

500px x 500px – Original File Size: 354KB, Lossy Compressed File Size: 94.3KB, Saving: 73%

400px x 400px – Original File Size: 236KB, Lossy Compressed File Size: 64.6KB, Saving: 73%

原始尺寸–原始文件大小：697KB，有损压缩文件大小：229.6KB，节省：67％

500px x 500px –原始文件大小：354KB，有损压缩文件大小：94.3KB，节省：73％

400px x 400px –原始文件大小：236KB，有损压缩文件大小：64.6KB，节省：73％

无损图像压缩 (Lossless Image Compression)

Lossless compression allows partial discarding and compression of image data, with no loss of image quality. Images that are ‘losslessly’ compressed will render the same as the original image.

无损压缩允许部分丢弃和压缩图像数据，而不会损失图像质量。 “无损”压缩的图像将呈现与原始图像相同的图像。

The disadvantage is that it doesn’t usually provide any file size improvement on more complex images, such as photographs. For that reason, it’s best used on PNG and GIF images.

缺点是它通常不会在照片等更复杂的图像上提供任何文件大小的改进。 因此，最好在PNG和GIF图像上使用。

图像压缩：WordPress解决方案 (Image Compression: WordPress Solutions)

WordPress provides two ways of adjusting image quality, using lossy compression. We can use both by adding the following code to our theme’s functions.php file:

WordPress提供了两种使用有损压缩来调整图像质量的方法。 我们可以通过将以下代码添加到主题的functions.php文件中来使用两者：

add_filter( 'jpeg_quality', 'custom_image_quality' );
add_filter( 'wp_editor_set_quality', 'custom_image_quality' );
function custom_image_quality( $quality ) {

    return 60;

}

jpeg_quality defines the quality of JPEG images uploaded to WordPress, or edited within WordPress’ Image Editor.

jpeg_quality定义上传到WordPress或在WordPress的图像编辑器中编辑的JPEG图像的质量。

wp_editor_set_quality defines the quality of (in this case) any image edited within WordPress’ Image Editor. For JPEG images, because we’ve specified the jpeg_quality filter, this will override this filter.

wp_editor_set_quality定义(在这种情况下)在WordPress图像编辑器中编辑的任何图像的质量。 对于JPEG图片，由于我们指定了jpeg_quality过滤器，因此它将覆盖此过滤器。

Uploading our test images to WordPress with these changes produces the following results:

通过这些更改将测试图像上传到WordPress会产生以下结果：

JPEG图像 (JPEG Image)

Original Dimensions – Original File Size: 504KB, 60% Quality File Size: 504KB, Saving: 0%

500px x 500px – Original File Size: 29KB, 60% Quality File Size: 14KB, Saving: 51%

400px x 400px – Original File Size: 21KB, 60% Quality File Size: 10KB, Saving: 52%

原始尺寸–原始文件大小：504KB，60％质量文件大小：504KB，节省：0％

500px x 500px –原始文件大小：29KB，60％质量文件大小：14KB，节省：51％

400px x 400px –原始文件大小：21KB，60％质量文件大小：10KB，节省：52％

PNG图片 (PNG Image)

	Original	500px x 500px	400px x 400px
File Size	697KB	354KB	236KB
60% Quality File Size	697KB	354KB	236KB
Saving	0%	0%	0%

	原版的	500px x 500px	400像素x 400像素
文件大小	697KB	354KB	236KB
60％的优质文件大小	697KB	354KB	236KB
保存	0％	0％	0％

You’ll notice that our uploaded PNG images are not changed – this is because the jpeg_quality filter only affects JPEG images, and the wp_editor_set_quality is only used if we edit an image through the Media Library.

您会注意到我们上载的PNG图像没有更改-这是因为jpeg_quality过滤器仅影响JPEG图像，并且仅当我们通过媒体库编辑图像时才使用wp_editor_set_quality 。

Furthermore, our original images aren’t changed – this is because WordPress only applies the quality filters to resized images.

此外，我们的原始图像未更改–这是因为WordPress仅将质量过滤器应用于调整大小的图像。

图像压缩：插件解决方案 (Image Compression: Plugin Solutions)

Whilst we’ve explored how image compression works, and used an online tool to run some tests, we’d ideally want our images to be automatically compressed in WordPress. This means we’re not relying on clients (or ourselves) to remember to use a third party tool before uploading images into WordPress, and we’re simplifying the process.

尽管我们探索了图像压缩的工作原理，并使用在线工具进行了一些测试，但理想情况下，我们还是希望图像可以在WordPress中自动压缩。 这意味着在将图像上传到WordPress之前，我们不依赖客户(或我们自己)记住使用第三方工具，而是在简化流程。

There are a few WordPress Plugins which provide automatic image compression:

有一些WordPress插件可提供自动图像压缩：

EWWW图像优化器 (EWWW Image Optimizer)

EWWW Image Optimizer provides lossless compression, using a variety of JPEG, PNG and GIF compression libraries/services. It requires exec() access, which some shared hosts may not have – however they do provide an EWWW Image Optimizer Cloud, which is a paid for service that processes images on their servers.

EWWW Image Optimizer使用多种JPEG，PNG和GIF压缩库/服务提供无损压缩。 它需要exec()访问权限，某些共享主机可能没有访问权限-但是它们确实提供了EWWW Image Optimizer Cloud，这是为在其服务器上处理图像的服务付费的。

Again, for lossy compression, you’ll need to pay for an API key, with rates starting at $1 for 1,000 images.

同样，对于有损压缩，您需要支付API密钥的费用，每1,000张图像的费率开始为$ 1。

To setup EWWW Image Optimizer, navigate to Plugins > Add new in your WordPress Administration interface, and search for “EWWW Image Optimizer”:

要设置EWWW Image Optimizer，请在WordPress管理界面中导航至Plugins> Add new，然后搜索“ EWWW Image Optimizer”：

Click the Install Now button, and activate the plugin once installed.

单击立即安装按钮，并在安装后激活插件。

By default, the plugin will provide lossless compression on our images, with no further configuration required. Let’s create a new Post, and set our Featured Image to our test image to get some results:

默认情况下，该插件将在我们的图像上提供无损压缩，而无需进一步配置。 让我们创建一个新的帖子，并将“特色图片”设置为测试图片以获取一些结果：

JPEG图像 (JPEG Image)

Original Dimensions – Original File Size: 504KB, Lossy Compressed File Size: 503KB, Saving: 0.2%

500px x 500px – Original File Size: 29KB, Lossy Compressed File Size: 28KB, Saving: 3.5%

400px x 400px – Original File Size: 21KB, Lossy Compressed File Size: 20KB, Saving: 4.8%

原始尺寸–原始文件大小：504KB，有损压缩文件大小：503KB，节省：0.2％

500px x 500px –原始文件大小：29KB，有损压缩文件大小：28KB，节省：3.5％

400px x 400px –原始文件大小：21KB，有损压缩文件大小：20KB，节省：4.8％

PNG图片 (PNG Image)

Original Dimensions – Original File Size: 697KB, Lossy Compressed File Size: 669KB, Saving: 4%

500px x 500px – Original File Size: 354KB, Lossy Compressed File Size: 300KB, Saving: 15.3%

400px x 400px – Original File Size: 236KB, Lossy Compressed File Size: 200KB, Saving: 15.3%

原始尺寸–原始文件大小：697KB，有损压缩文件大小：669KB，节省：4％

500px x 500px –原始文件大小：354KB，有损压缩文件大小：300KB，节省：15.3％

400px x 400px –原始文件大小：236KB，有损压缩文件大小：200KB，节省：15.3％

We’re able to get better performance when ‘losslessly’ compressing PNG images over JPEG images, which is to be expected. However, these images are still quite large, so let’s try another plugin that provides lossy compression instead.

当“无损”压缩JPEG图像上的PNG图像时，我们能够获得更好的性能，这是可以预期的。 但是，这些图像仍然很大，因此让我们尝试另一个提供有损压缩的插件。

压缩JPEG和PNG图像 (Compress JPEG & PNG Images)

As well as providing a web based image compression service, TinyPNG also provide a WordPress Plugin to automatically provide lossy compression to JPEG and PNG images.

除提供基于Web的图像压缩服务外，TinyPNG还提供WordPress插件来自动为JPEG和PNG图像提供有损压缩。

The first 500 image compressions per month are free. After that, it costs $0.009 per image compression.

每月前500次图像压缩是免费的。 之后，每次图像压缩的费用为$ 0.009。

To setup the TinyPNG plugin, navigate to Plugins > Add new in your WordPress Administration interface, and search for “Compress JPEG & PNG Images”:

要设置TinyPNG插件，请在WordPress管理界面中导航至Plugins> Add new，然后搜索“ Compress JPEG＆PNG Images”：

Click the Install Now button, and activate the plugin once installed.

单击立即安装按钮，并在安装后激活插件。

Next, obtain an API key by visiting https://tinypng.com/developers and entering your name and email address:

接下来，通过访问https://tinypng.com/developers并输入您的姓名和电子邮件地址来获取API密钥：

You’ll receive an email with a link to obtain your API key. Click the link, and make a note of your API key:

您会收到一封包含链接的电子邮件，以获取您的API密钥。 单击链接，并记下您的API密钥：

In the WordPress Plugin, navigate to Settings > Media, and insert your TinyPNG API key. You can also choose which image sizes to compress – each image size counts as a compression out of the 500 free allocated compressions per month, so let’s just select the original image, Page and Post sizes for our tests:

在WordPress插件中，导航到“设置”>“媒体”，然后插入TinyPNG API密钥。 您还可以选择要压缩的图像大小-每个图像大小都算作每月500种免费分配的压缩中的一种压缩，因此让我们为测试选择原始图像，页面大小和张贴大小：

Let’s create a new post, and set our ‘Featured Image’ to our test image to get some results:

让我们创建一个新帖子，并将我们的“特色图片”设置为测试图片以获取一些结果：

JPEG图像 (JPEG Image)

Original Dimensions – Original File Size: 504KB, Lossy Compressed File Size: 367KB, Saving: 27.2%

500px x 500px – Original File Size: 29KB, Lossy Compressed File Size: 19KB, Saving: 34.5%

400px x 400px – Original File Size: 21KB, Lossy Compressed File Size: 13KB, Saving: 38.1%

原始尺寸–原始文件大小：504KB，有损压缩文件大小：367KB，节省：27.2％

500px x 500px –原始文件大小：29KB，有损压缩文件大小：19KB，节省：34.5％

400px x 400px –原始文件大小：21KB，有损压缩文件大小：13KB，节省：38.1％

PNG图片 (PNG Image)

Original Dimensions – Original File Size: 697KB, Lossy Compressed File Size: 230KB, Saving: 67%

500px x 500px – Original File Size: 354KB, Lossy Compressed File Size: 94KB, Saving: 73%

400px x 400px – Original File Size: 236KB, Lossy Compressed File Size: 65KB, Saving: 73%

原始尺寸–原始文件大小：697KB，有损压缩文件大小：230KB，节省：67％

500px x 500px –原始文件大小：354KB，有损压缩文件大小：94KB，节省：73％

400px x 400px –原始文件大小：236KB，有损压缩文件大小：65KB，节省：73％

From one image alone, using specific image sizes and a compression plugin, we can reduce a 504KB JPEG image down to 13KB – a 491KB saving, or around a 1 second faster over a 2 Mbps connection. For a 697KB PNG, we can reduce this down to 65KB – a 632KB saving, or around 1.2 seconds faster over a 2 Mbps connection.

仅使用一张图像，使用特定的图像尺寸和压缩插件，我们就可以将504KB JPEG图像减少到13KB –节省491KB，或者在2 Mbps连接上快1秒钟左右。 对于697KB的PNG，我们可以将其减少到65KB-节省632KB，或者在2 Mbps连接上大约快1.2秒。

Now that we’ve optimized the images we want to deliver on our WordPress web site, let’s see how we can optimize the delivery of those images, based on the visitor’s location and other factors.

既然我们已经优化了要在WordPress网站上交付的图像，让我们看看如何根据访问者的位置和其他因素来优化那些图像的交付。

内容交付网络(CDN) (Content Delivery Networks (CDN))

A content delivery network is a large number of servers, typically distributed in multiple data centers across the world. They’re designed to serve static content, such as text, images, CSS and Javascript, as well as larger file downloads.

内容交付网络是大量服务器，通常分布在世界各地的多个数据中心中。 它们旨在提供静态内容，例如文本，图像，CSS和Javascript，以及较大的文件下载。

CDNs may also utilise caching and minification, to ensure that the delivered content is as optimized as possible.

CDN还可以利用缓存和最小化来确保所传递的内容尽可能地优化。

Due to the geographic locations of CDNs, most will detect the visitor’s country, and attempt to deliver text, images, CSS and Javascript from the nearest available data center. This helps reduce response times and page load times, as well as reducing server bandwidth and load on your server.

由于CDN的地理位置，大多数都会检测到访问者所在的国家，并尝试从最近的可用数据中心发送文本，图像，CSS和Javascript。 这有助于减少响应时间和页面加载时间，并减少服务器带宽和服务器负载。

Let’s look at two available CDN solutions for WordPress.

让我们看一下两个适用于WordPress的CDN解决方案。

光子 (Photon)

Photon is described as:

光子描述为：

… an image acceleration and editing service for sites hosted on WordPress.com or on Jetpack-connected WordPress sites. That means less load on your host and faster images for your readers

…针对WordPress.com或Jetpack连接的WordPress网站上托管的网站的图像加速和编辑服务。 这意味着主机上的负载更少，读者的图像更快

It automatically grabs JPEG, PNG and GIF images, serving resized versions to meet the requirements of the browser. This is useful if we’re viewing a WordPress web site on a mobile device that has 500px x 500px images, but we only need a 250px x 250px version.

它会自动捕获JPEG，PNG和GIF图像，并提供调整大小的版本，以满足浏览器的要求。 如果我们在具有500px x 500px图像的移动设备上查看WordPress网站，但是仅需要250px x 250px版本，这将非常有用。

To setup Photon, we need to install and activate Jetpack. Navigate to Plugins > Add new in your WordPress Administration interface, and search for “Jetpack”:

要设置Photon，我们需要安装并激活Jetpack。 导航到“插件”>“在WordPress管理界面中添加新内容”，然后搜索“ Jetpack”：

Click the Install Now button, and activate the plugin once installed.

单击立即安装按钮，并在安装后激活插件。

Next, click on Jetpack in the WordPress Administration menu, and then click on Connect to WordPress.com. You’ll then be asked to login to your WordPress.com account (don’t worry if you don’t have one – you can sign up for a free account at this point):

接下来，单击“ WordPress管理”菜单中的Jetpack ，然后单击“ 连接到WordPress.com”。 然后，系统将要求您登录到WordPress.com帐户(不用担心，如果您没有这个帐户，您可以在此时注册一个免费帐户)：

If everything is successful, you’ll be redirected back to your WordPress Administration interface, where you’ll see several modules, including Photon, available. Let’s go ahead and activate Photon by clicking the Activate button:

如果一切成功，您将被重定向回WordPress管理界面，在该界面中您将看到几个可用模块，包括Photon。 让我们继续，通过单击“ 激活”按钮来激活Photon：

Photon is now activated, and images will be served from their CDN.

现在已激活光子，并且将通过其CDN提供图像。

Let’s view our existing Post and Page, which contained our TinyPNG optimized Featured Images. You’ll notice the images are now served from i2.wp.com – this is Photon’s CDN. We can get the image source and adjust the resize parameters to get the original, 500px and 400px versions, to test the optimized file sizes:

让我们查看现有的Post and Page，其中包含我们的TinyPNG优化的精选图像。 您会注意到，现在可以从i2.wp.com提供图像了-这是Photon的CDN。 我们可以获取图像源并调整调整大小参数以获取原始的500px和400px版本，以测试优化的文件大小：

JPEG图像 (JPEG Image)

Original Dimensions – Original File Size: 504KB, Lossy Compressed File Size: 318KB, Saving: 37%

500px x 500px – Original File Size: 29KB, Lossy Compressed File Size: 14KB, Saving: 51.7%

400px x 400px – Original File Size: 21KB, Lossy Compressed File Size: 10KB, Saving: 52.4%

原始尺寸–原始文件大小：504KB，有损压缩文件大小：318KB，节省：37％

500px x 500px –原始文件大小：29KB，有损压缩文件大小：14KB，节省：51.7％

400px x 400px –原始文件大小：21KB，有损压缩文件大小：10KB，节省：52.4％

PNG图片 (PNG Image)

Original Dimensions – Original File Size: 697KB, Lossy Compressed File Size: 239KB, Saving: 65.7%

500px x 500px – Original File Size: 354KB, Lossy Compressed File Size: 101KB, Saving: 71.5%

400px x 400px – Original File Size: 236KB, Lossy Compressed File Size: 69KB, Saving: 70.8%

原始尺寸–原始文件大小：697KB，有损压缩文件大小：239KB，节省：65.7％

500px x 500px –原始文件大小：354KB，有损压缩文件大小：101KB，节省：71.5％

400px x 400px –原始文件大小：236KB，有损压缩文件大小：69KB，节省：70.8％

We’re still able to achieve similar file size savings to TinyPNG, with our JPEG image performing better on Photon, and our PNG image performing better using TinyPNG.

我们仍然能够实现与TinyPNG相似的文件大小节省，我们的JPEG图像在Photon上的性能更好，而我们的PNG图像在TinyPNG上的性能更好。

第三方CDN (Third Party CDNs)

If you’d prefer not to install Jetpack, and utilise the other functionality that comes with it (36 modules and counting!), you can use a third party CDN, such as MaxCDN.

如果您不想安装Jetpack，而是使用它附带的其他功能(36个模块，还在增加！)，则可以使用第三方CDN，例如MaxCDN。

The advantage of this approach is that you’re not just limited to optimizing image delivery; you can specify that CSS, JavaScript files and other static file types be served by the CDN. We can also keep an image optimization plugin, such as TinyPNG, on our WordPress installation, ensuring that our images are optimized before being stored on the CDN. If you’re on a site that has more CSS and Javascript content vs. images, then this may be a better solution.

这种方法的优点是您不仅限于优化图像传送； 您可以指定CDN提供CSS，JavaScript文件和其他静态文件类型。 我们还可以在WordPress安装中保留一个图像优化插件，例如TinyPNG，以确保在将图像存储到CDN之前对其进行优化。 如果您所在的站点具有更多CSS和Javascript内容而不是图像，那么这可能是一个更好的解决方案。

To setup MaxCDN, head over to their web site, and click the Get a Free Test Account button.

要设置MaxCDN，请转到其网站，然后单击“ 获取免费测试帐户”按钮。

Follow the on-screen instructions to complete your personal details. You’ll then receive an email allowing you to create your MaxCDN account and get started.

按照屏幕上的说明完成您的个人详细信息。 然后，您会收到一封电子邮件，允许您创建MaxCDN帐户并开始使用。

Once you’ve signed up, you’ll need to create a zone. A zone is essentially a web site.

注册后，您需要创建一个区域。 区域实质上是一个网站。

To create a zone, click the Zones option in the main menu, followed by Create Pull Zone

要创建区域，请单击主菜单中的“区域”选项，然后单击“ 创建拉动区域”

Enter the name for your pull zone (typically your web site name), it’s URL and an optional label:

输入拉区的名称(通常是网站名称)，URL和可选标签：

Next, we need to configure our WordPress installation to use MaxCDN. We’ll use W3 Total Cache, which is a WordPress Plugin that comes with MaxCDN support.

接下来，我们需要配置WordPress安装以使用MaxCDN。 我们将使用W3 Total Cache，这是MaxCDN支持随附的WordPress插件。

To setup W3 Total Cache, navigate to Plugins > Add new in your WordPress Administration interface, and search for “W3 Total Cache”:

要设置W3 Total Cache，请在WordPress管理界面中导航至Plugins> Add new，然后搜索“ W3 Total Cache”：

Click the Install Now button, and activate the plugin once installed.

单击立即安装按钮，并在安装后激活插件。

Once activated, navigate to Performance > CDN in the WordPress Administration menu, and scroll down to the Configuration panel.

激活后，导航至“ WordPress管理”菜单中的“性能”>“ CDN”，然后向下滚动至“配置”面板。

Click the Authorize button, copy the authorization key, and paste it into the Authorization key field of the plugin:

单击授权按钮，复制授权密钥，然后将其粘贴到插件的授权密钥字段中：

If everything worked, a Key is valid notice should display on screen. Click the Save all settings button to complete configuration.

如果一切正常，则应在屏幕上显示密钥有效通知。 单击保存所有设置按钮以完成配置。

Reload one of your existing Pages or Posts, and you should see the CSS, JS and images are being served from the CDN.

重新加载您现有的Pages或Posts之一，您应该看到CDN正在提供CSS，JS和图像。

结论 (Conclusion)

In this article, we’ve reviewed a number of image optimization and CDN plugins for WordPress. Photon CDN, which is part of the Jetpack Plugin, provides the single, most effective solution to delivering optimized images, scaled for all resolutions and served from a CDN – and best of all, it’s free.

在本文中，我们回顾了许多针对WordPress的图像优化和CDN插件。 Photon CDN是Jetpack插件的一部分，它提供了一个最有效的解决方案来交付优化的图像，可针对所有分辨率进行缩放，并可以从CDN进行服务-最好的是，它是免费的。

For those who already have a CDN in place, or would prefer not to use one, or use Jetpack, TinyPNG’s WordPress Plugin resulted in a slight improvement in image optimization over Photon for PNG images, and can be useful in conjunction with a third party CDN providers.

对于已经安装CDN或不想使用CDN或不使用Jetpack的用户，TinyPNG的WordPress插件在图像优化方面比对PNG图像的Photon略有改进，并且可以与第三方CDN结合使用提供者。

翻译自: https://www.sitepoint.com/mastering-image-optimization-in-wordpress/

wordpress图像大小