wordpress图像大小_为WordPress优化图像

朱雀 2022-12-03 10:00 183阅读 0赞

wordpress图像大小

Once upon a time, about 20 years ago, there was Mosaic. Mosaic is often credited with starting the World Wide Web as we know it today. It was the first browser that allowed images to be displayed inline with text, rather than having a separate window popup for each image. Although it wasn’t the first graphical browser, it caught on with the wider public.

从前，大约20年前，有马赛克。 正如我们今天所知，Mosaic通常被认为可以启动万维网。 这是第一个允许图像以文本内联显示的浏览器，而不是每个图像都有单独的窗口弹出窗口。 尽管它不是第一个图形浏览器，但它受到了广大公众的欢迎。

Back then colour screens with 256 colours were relatively new, and we were all on dial-up Internet, the aim was to get your images to download, full stop. How they looked was secondary.

那时，具有256色的彩色屏幕还比较新，我们都在拨号上网中，目的是让您的图像完全下载。 他们的样子是次要的。

Fast-forward to today and things are very different. As people buy increasingly higher resolution screens, we need to make our images look great. On the other hand, Google would like your Web pages to load in one second, even on mobile devices. So how do you make your images look good and load fast? In this article, we’re going to cover the basics of optimizing your images for WordPress.

快进到今天，情况大不相同。 随着人们购买分辨率越来越高的屏幕，我们需要使图像看起来更好。 另一方面，Google希望您的网页在一秒钟内加载，即使在移动设备上也是如此。 那么，如何使图像看起来不错并快速加载？ 在本文中，我们将介绍为WordPress优化图像的基础。

## 确实需要图像吗？ **(**Is an Image Really Required?**)** ##

Of course the first question you should ask is do you really need an image when text, symbols, and simple logos can be replaced with web fonts and other CSS effects that can possibly do the job better, faster, and in a responsive way. Any text element such as banners and buttons that are created from images should be replaced with non-image formats. However, if you need to use an image read on.

当然，您应该问的第一个问题是，当文本，符号和简单徽标可以替换为网络字体和其他CSS效果(可能会更好，更快且响应速度更快地完成工作)时，是否真的需要图像？ 从图像创建的任何文本元素(例如横幅和按钮)都应替换为非图像格式。 但是，如果需要使用图像读取。

## 栅格与矢量 **(**Raster Versus Vector**)** ##

Raster images are made up of a grid of a fixed number of pixels. They don’t scale well, and enlarging the image will result in jaggies and pixelation as the grid pattern becomes visible. Images created in a digital camera and programs such as Adobe Photoshop are raster images. The image quality setting will determine the size of the saved file. This could be as large as 7360 x 4912 pixels with a high end SLR camera; such an image would be well over 36MB in size. Clearly this is way larger than required for WordPress use.

栅格图像由固定像素数的网格组成。 它们不能很好地缩放，并且当网格图案变得可见时，放大图像会导致锯齿和像素化。 在数码相机和程序(如Adobe Photoshop)中创建的图像是光栅图像。 图像质量设置将确定保存文件的大小。 高端单反相机的像素可能高达7360 x 4912像素； 这样的图像将远远超过36MB。 显然，这比WordPress使用所需的更大。

Vector images, on the other hand, are constructed mathematically. They work particularly well for simple images such as logos, text, icons, etc. They are mathematical and when they are zoomed in on or resized the browser recalculates the mathematics, and the image will remain sharp.

另一方面，矢量图像是用数学方法构造的。 它们对于徽标，文本，图标等简单的图像特别有用。它们是数学的，当放大或调整大小时，浏览器会重新计算数学，并且图像将保持清晰。

Such images are created in programs such as Adobe Illustrator and saved in the SVG (Scalable Vector Graphics) format for Web use. However, whilst WordPress rejects the SVG format due to security issues (in theory an SVG file could contain malicious code) there are plug-ins that allow you to overcome this limitation. Having said that allowing SVG files is something that should restricted to admin level users only. Another consideration is that most browsers only offer partial support for the format, so stay within the 1.1 standard. If you are using this format consider ‘minifying’ the images to strip any unnecessary meta data.

此类图像是在Adobe Illustrator等程序中创建的，并以SVG(可伸缩矢量图形)格式保存以供Web使用。 但是，尽管WordPress由于安全问题而拒绝了SVG格式(理论上SVG文件可能包含恶意代码)，但仍有一些插件可让您克服此限制。 话虽如此，仅允许管理员级别的用户使用SVG文件。 另一个考虑因素是，大多数浏览器仅部分支持该格式，因此请保持在1.1标准之内。 如果使用此格式，请考虑“缩小”图像以剥离任何不必要的元数据。

## JPEG，GIF或PNG？ **(**JPEG, GIF or PNG?**)** ##

Modern browsers support a range of raster image formats; JPEG/JPG is the most popular. There is also GIF that supports 256 colours that is often used for advertising. PNG (Adobe’s Portable Network Graphics) overcomes many of the limitations of JPEG and GIF formats and was supposed to become a standard Web image format, but has mixed traction.

现代浏览器支持多种栅格图像格式； JPEG / JPG是最受欢迎的。 还有一种GIF支持256色，通常用于广告。 PNG(Adobe的可移植网络图形)克服了JPEG和GIF格式的许多限制，并被认为是一种标准的Web图像格式，但是具有混合吸引力。

Each format has pluses and minuses. JPEG’s can be compressed to a high degree for small file sizes, and if the dimensions are modest, they can look more than acceptable. JPEG uses a lossy compression format similar to MP3 audio files. During compression, information is thrown away and cannot be recovered. Highly compressed JPEGs have the drawback of high levels of artifacts (speckles and blotches in large flat areas of colour, and blurry edges). They also lack the ability to support transparency. This means any cut out area will default to white, so unless your page background is also white, the image will be in a white box.

每种格式都有优点和缺点。 对于较小的文件大小，可以将JPEG高度压缩，并且如果大小适中，它们看起来可能会超出可接受范围。 JPEG使用类似于MP3音频文件的有损压缩格式。 在压缩期间，信息将被丢弃并且无法恢复。 高度压缩的JPEG的缺点是伪影水平很高(在较大的平坦颜色区域中出现斑点和斑点，而边缘模糊)。 他们还缺乏支持透明度的能力。 这意味着任何剪切区域将默认为白色，因此，除非页面背景也为白色，否则图像将位于白色框中。

GIFs are great for creating text and simple graphical images with limited colour – hence their use for serving banner ads. They are easy to animate, but again they don’t support transparency so the background of the image you create must match the page colour.

GIF非常适合创建颜色有限的文本和简单的图形图像-因此，它们可用于投放横幅广告。 它们很容易设置动画，但是它们又不支持透明度，因此您创建的图像背景必须与页面颜色匹配。

The PNG format will produce the highest quality images as it is a lossless compression format. However, PNG images can rarely be compressed as small as the equivalent JPEG. The format supports transparency so whatever is behind the cut out area is visible.

由于PNG格式是无损压缩格式，因此将产生最高质量的图像。 但是，PNG图像很少能压缩到等效JPEG的大小。 该格式支持透明性，因此可以看到剪切区域后面的任何内容。

For some further reading, check out this article on [SitePoint that covers the difference between JPEG, GIF or PNG by James George][SitePoint that covers the difference between JPEG_ GIF or PNG by James George].

有关更多信息，请[参阅SitePoint上的][SitePoint that covers the difference between JPEG_ GIF or PNG by James George]本文， [其中涵盖了James George的JPEG，GIF或PNG之间的区别][SitePoint that covers the difference between JPEG_ GIF or PNG by James George] 。

Although the best tool for working with raster images is Adobe Photoshop, there are plenty of other tools such as a free program, [GIMP][]. There are also online services you can use to resize and compress raster images.

尽管使用光栅图像的最佳工具是Adobe Photoshop，但是还有许多其他工具，例如免费程序[GIMP][] 。 您还可以使用在线服务来调整和压缩光栅图像。

The following steps are based on Photoshop CC.

以下步骤基于Photoshop CC。

### 调整图像大小 **(**Sizing the Image**)** ###

When working with raster images from the camera, the first thing to do is to reduce the pixel dimensions. This is achieved through the ‘Image’ and then ‘Image Size’ menu. Remember to ‘Constrain the Aspect Ratio’ and change one of the dimensions to retain the original shape.

在处理来自相机的光栅图像时，首先要做的是减小像素尺寸。 这是通过“图像”然后是“图像大小”菜单实现的。 记住要“限制纵横比”并更改尺寸之一以保留原始形状。

The dimensions should match the dimensions given in the HTML/CSS code of the page. There is little advantage to making the dimensions larger as the browser will resize the image as it renders the page; this will slow down response times.

尺寸应与页面HTML / CSS代码中给出的尺寸匹配。 增大尺寸几乎没有好处，因为浏览器将在渲染页面时调整图像的大小； 这会减慢响应时间。

A further consideration is the reduction of the Bit Depth. Better cameras now allow 14 bits per channel raw processing. Photographers often process their raw images in 16 or 32 bit mode to retain the best quality until final output is required. That amounts to a huge colour range that won’t be reproduced on the sRGB colour space of most screens. If the image is not already in this 8bit format, reduce the image to 8 bit per channel mode by selecting ‘Image’ the ‘Mode’ then ‘8 Bits/Channel’. This will immediately reduce the file size substantially.

进一步的考虑是位深度的减小。 更好的相机现在允许每通道14位原始处理。 摄影师经常以16或32位模式处理其原始图像，以保持最佳质量，直到需要最终输出为止。 这相当于一个巨大的色彩范围，在大多数屏幕的sRGB色彩空间中都无法再现。 如果图像还不是这种8位格式，则通过选择“图像”，“模式”，然后选择“ 8位/通道”，将图像减小为每个通道模式8位。 这将立即大大减少文件大小。

Although I recommend resizing your images prior to uploading them to WordPress, you can use the WordPress Media Library to edit the dimensions of your image. For example, this image below is 1000 x 621. If I only want the image to be say 300 x 186, I simply click on the ‘Edit Image’ button below.

尽管我建议在将图像上载到WordPress之前调整其大小，但是您可以使用WordPress媒体库来编辑图像的尺寸。 例如，下面的图像为1000 x621。如果我只希望图像为300 x 186，则只需单击下面的“编辑图像”按钮。

![Resizing images in WordPress media library][]

This will then bring up a window with a range options for editing the image.

然后，将打开一个带有范围选项的窗口，用于编辑图像。

![Resizing image in WordPress media library][]

I then update the ‘Scale Image’ field with ‘300’ and it will automatically predict the ‘186’ pixels and then click ‘Scale’ to see the image dimensions reduce and then ‘Update’ to save these settings.

然后，我将“缩放图像”字段更新为“ 300”，它将自动预测“ 186”像素，然后单击“缩放”以查看图像尺寸缩小，然后单击“更新”以保存这些设置。

![Resized image in WordPress media library][]

You can now see that the new dimensions of the image are saved at 300 x 186 and there has also been a reduction in the file size from 913KB to 110KB.

现在，您可以看到图像的新尺寸保存为300 x 186，文件大小也从913KB减少到110KB。

### “另存为”与“另存为网络” **(**‘Save As’ Versus ‘Save for Web’**)** ###

Ideally your photographic images will have been saved in the camera as raw files and have been processed in the TIFF format in 16 Bit mode. Once you have resized the image and reduced the bit depth you will now face choices as to the final file format and file size.

理想情况下，您的摄影图像将作为原始文件保存在相机中，并已以TIFF格式在16位模式下进行处理。 调整图像大小并减小位深度后，现在您将面临最终文件格式和文件大小的选择。

![Maximum media file size WordPress][]

As you can see above, the WordPress Media Library file uploader has a default file size limit. This is way bigger than you would want for dropping an image into a post or even a banner. Limits aside, you should ideally keep your images as small as possible.

如上所示，WordPress媒体库文件上传器具有默认文件大小限制。 这比将图像拖放到帖子甚至横幅中要大得多。 除了限制，理想情况下，您应该使图像尽可能小。

In fact, the [WordPress Codex][] recommends that large high quality images should ideally be around 60-100KB while smaller images should ideally be 30KB or less.

实际上， [WordPress Codex][]建议理想情况下，高质量的大图像应在60-100KB左右，而较小的图像在理想情况下应在30KB或更小。

Doing a ‘Save As’ will only do part of the job. If you are not using Photoshop, most editors will offer some basic options, the file type, and if JPEG, quality and size options. You will need to do some experimenting to see what combination of setting results in a satisfactory balance between size and quality.

进行“另存为”将仅做部分工作。 如果您不使用Photoshop，大多数编辑器将提供一些基本选项，文件类型以及JPEG，质量和大小选项。 您将需要进行一些实验，以了解哪种设置组合可以在尺寸和质量之间取得令人满意的平衡。

‘Save for Web’ on the other hand will give you a wide range of options and a preview of the potential results. Other than reducing the Bit depth you can resize the image in the ‘Save for Web’ dialog box. The controls are fairly self-explanatory.

另一方面，“另存为Web”将为您提供多种选择，并预览可能的结果。 除了减小位深度之外，您还可以在“保存为Web”对话框中调整图像的大小。 控件是不言自明的。

I tend to check the ‘Progressive’ option so that that people on slow connections will at least see the image begin to appear. You should also ensure that ‘Convert to sRGB’ is checked so that you can preview any unexpected colour shifts.

我倾向于检查“渐进式”选项，以便处于低速连接状态的人们至少会看到图像开始出现。 您还应确保选中“转换为sRGB”，以便可以预览任何意外的颜色偏移。

You should note the potential file size below the preview image as you adjust the size and compression of the image in JPEG mode, but look closely at the image to ensure that the artifacts don’t become to noticeable. Although some versions of Photoshop will warn that the file is too large, it will still process the image.

在JPEG模式下调整图像的大小和压缩时，应注意预览图像下方的潜在文件大小，但请仔细查看图像以确保伪影不会变得明显。 尽管某些版本的Photoshop会警告该文件太大，但仍会处理图像。

Remember always to work with copies of your files. Every time you save an image to JPEG format you are throwing away image information that can’t be recovered.

请记住，始终使用文件副本。 每次将图像保存为JPEG格式时，都会丢弃无法恢复的图像信息。

## 如何处理已经在您的WordPress网站上使用的图像 **(**What to Do about Images Already Being Used on Your WordPress Site**)** ##

If you are reading this article and not sure what to do about the hundreds or even thousands of images you already have on your site, all is not lost.

如果您正在阅读本文，但不确定如何处理网站上已有的成百上千的图像，那么一切都不会丢失。

The first step is to run a page speed test to try and isolate any issues. There are plenty of tools out there which can help you, and you can find out more from this [recent article on SitePoint about Speeding Up Your WordPress Site][]. This article also reviews the benefits of caching plugins and Content Delivery Networks (CDNs) which are also worth investigating if your site is image heavy.

第一步是运行页面速度测试以尝试找出所有问题。 有很多工具可以为您提供帮助，您可以从[最近在SitePoint上有关加速WordPress网站的文章中][recent article on SitePoint about Speeding Up Your WordPress Site]找到更多信息。 本文还回顾了缓存插件和内容分发网络(CDN)的好处，如果您的网站图像繁重，也值得研究。

There are also a range of handy WordPress bulk image compression plugins that are worth checking out (it’s worth noting that most plugins will only apply to media library files). Here are just a few:

还有一系列方便的WordPress批量图像压缩插件值得一试(值得注意的是，大多数插件仅适用于媒体库文件)。 这里仅仅是少数：

*  [EWWWW Image Optimizer][]
    
    [EWWWW图像优化器][EWWWW Image Optimizer]
 *  [WP Smush.it][]
    
    [WP Smush.it][]
 *  [Imsanity][]
    
    [精神错乱][Imsanity]

## 摘要 **(**Summary**)** ##

So to summarise, here is a quick check list of things to consider when optimizing your images for your WordPress site:

综上所述，以下是为WordPress网站优化图片时要考虑的事项的快速检查清单：

*  Do you need an image where HTML5/CSS3, Web fonts/symbols can be used?
    
    您是否需要可以使用HTML5 / CSS3，Web字体/符号的图像？
 *  Can you use a vector image instead of a raster image?
    
    可以使用矢量图像代替光栅图像吗？
 *  Consider the most appropriate raster image format: GIFs are the smallest, but are limited to 256 colours, don’t scale, and don’t support transparency; JPEGs compress to a small size, don’t scale or support transparency; PNG images retain the best image quality and support transparency, but don’t compress to the same degree, and don’t scale.
    
    考虑最合适的光栅图像格式：GIF最小，但限于256色，不能缩放，也不支持透明； JPEG压缩到较小的尺寸，不缩放或不支持透明度； PNG图像可保持最佳图像质量并支持透明性，但不会压缩到相同程度，也无法缩放。
 *  Work with the highest bit depth and full pixel dimensions until the compression stage.
    
    在压缩阶段之前，以最高的位深度和完整的像素尺寸工作。
 *  If using Photoshop use the ‘Save for Web’ option rather than simply ‘Save As’.
    
    如果使用Photoshop，请使用“另存为Web”选项，而不仅仅是“另存为”。
 *  Work in a consistent manner and make notes of your settings, once you develop a consistent workflow, Image Optimization can become a quick and simple process, that will lead to fast page loading.
    
    一旦开发出一致的工作流程，以一致的方式工作并记下您的设置，则图像优化可以成为一个快速而简单的过程，从而可以快速加载页面。

> 翻译自: [https://www.sitepoint.com/optimizing-your-images-for-wordpress/][https_www.sitepoint.com_optimizing-your-images-for-wordpress]

wordpress图像大小

[SitePoint that covers the difference between JPEG_ GIF or PNG by James George]: https://www.sitepoint.com/gif-jpg-png-whats-difference/
[GIMP]: http://www.gimp.org/
[Resizing images in WordPress media library]: /images/20221123/e8104298fb7840648fbe815d855d0d83.png
[Resizing image in WordPress media library]: /images/20221123/3141ca10b5224cb1a91ffcb68b345cd8.png
[Resized image in WordPress media library]: /images/20221123/0dd29c59e71d4c45a8f8171877177f37.png
[Maximum media file size WordPress]: /images/20221123/a196d7e38e3d4269b913ae16f911f8af.png
[WordPress Codex]: http://codex.wordpress.org/Image_Size_and_Quality
[recent article on SitePoint about Speeding Up Your WordPress Site]: https://www.sitepoint.com/speed-wordpress/
[EWWWW Image Optimizer]: https://wordpress.org/plugins/ewww-image-optimizer/
[WP Smush.it]: https://wordpress.org/plugins/wp-smushit/
[Imsanity]: https://wordpress.org/plugins/imsanity/
[https_www.sitepoint.com_optimizing-your-images-for-wordpress]: https://www.sitepoint.com/optimizing-your-images-for-wordpress/