图像处理的凸优化
This sponsored article was created by our content partner, KeyCDN. Thank you for supporting the partners who make SitePoint possible.
这篇赞助文章是由我们的内容合作伙伴KeyCDN创建的。 感谢您支持使SitePoint成为可能的合作伙伴。
Image optimization is a big deal when it comes to website performance. You might be wondering if you’re covering all the bases by simply keeping file size in check. In fact, there’s a lot to consider if you truly want to optimize your site’s images.
当涉及到网站性能时，图像优化非常重要。 您可能想知道是否通过仅检查文件大小来覆盖所有基础。 实际上，如果您真的想优化站点的图像，则有很多考虑。
Fortunately, there are image processing tools and content delivery networks (CDNs) available that can handle all the complexities of image optimization. Ultimately, these services can save you time and resources, while also covering more than one aspect of optimization.
幸运的是，有可用的图像处理工具和内容交付网络(CDN)可以处理图像优化的所有复杂性。 最终，这些服务可以节省您的时间和资源，同时还涵盖了多个方面的优化。
In this article, we’ll take a look at the impact image optimization can have on site performance. We’ll also go over some standard approaches to the problem, and explore some more advanced image processing options. Let’s get started!
在本文中，我们将研究图像优化对网站性能的影响。 我们还将介绍解决该问题的一些标准方法，并探索一些更高级的图像处理选项。 让我们开始吧！
If you decide not to optimize your images, you’re essentially tying a very heavy weight to all of your media elements. All that extra weight can drag your site down a lot. Fortunately, optimizing your images trims away the unnecessary data your images might be carrying around.
如果您决定不优化图像，则实际上是在对所有媒体元素施加很大的负担。 所有这些额外的重量可能会严重拖累您的网站。 幸运的是，优化图像可以消除图像可能携带的不必要数据。
If you’re not sure how your website is currently performing, you can use an online tool to get an overview.
如果不确定网站当前的运行状况，可以使用在线工具进行概述。
Once you have a better picture of what elements on your website are lagging or dragging you down, there are a number of ways you can tackle image optimization specifically, including:
一旦您更好地了解了网站上哪些元素滞后或拖累了您，就可以通过多种方法专门解决图像优化，包括：
Choosing appropriate image formats. There are a number of image formats to choose from, and they each have their strengths and weaknesses. In general, it’s best to stick with JPEGs for photographic images. For graphic design elements, on the other hand, PNGs are typically superior to GIFs. Additionally, new image formats such as Google’s WebP have promising applications, which we’ll discuss in more detail later on.
选择适当的图像格式 。 有多种图像格式可供选择，每种都有其优点和缺点。 通常，最好使用JPEG来拍摄照片。 另一方面，对于图形设计元素，PNG通常优于GIF。 此外，新的图像格式(例如Google的WebP)也有希望的应用程序，我们将在后面详细讨论。
Maximizing compression type. When it comes to compression, the goal is to get each image to its smallest “weight” without losing too much quality. There are two kinds of compression that can do that: “lossy” and “lossless”. A lossy image will look similar to the original, but with some decrease in quality, whereas a lossless image is nearly indistinguishable from the original but also heavier.
最大化压缩类型 。 在压缩方面，目标是使每个图像达到最小的“权重”，而不会损失太多的质量。 可以执行两种压缩方式： “有损”和“无损” 。 有损图像看起来与原始图像相似，但是质量有所下降，而无损图像几乎与原始图像没有区别，但也较重。
Designing with the image size in mind. If you’re working with images that need to display in a variety of sizes, it’s best to provide all the sizes you’ll need. If your site has to resize them on the fly, that can negatively impact speeds.
设计时要考虑图像大小 。 如果要处理需要以各种尺寸显示的图像，最好提供所需的所有尺寸。 如果您的站点必须即时调整它们的大小，则可能会对速度产生负面影响。
Exploring delivery networks. CDNs can be a solution to more resource-heavy approaches for managing media files. A CDN can handle all of your image content, and respond to a variety of situations to deliver the best and most optimized files.
探索交付网络 。 CDN可以是用于管理媒体文件的更多资源密集型方法的解决方案。 CDN可以处理您所有的图像内容，并响应各种情况以提供最佳和最优化的文件。
As with any technical solution, you’ll have to weigh the pros and cons of each approach. However, it’s also worth noting that these more traditional approaches aren’t the only options you have available to you.
与任何技术解决方案一样，您必须权衡每种方法的利弊。 但是，还值得注意的是，这些更传统的方法并不是您可以使用的唯一选择。
As we mentioned above, CDNs are one possible way to solve image performance conundrums on your website. One example of the services a CDN can provide is found in KeyCDN’s image processing.
如上所述，CDN是解决网站上图像性能难题的一种可能方法。 在KeyCDN的图像处理中可以找到CDN可以提供的服务的一个示例。
This particular service is a real-time image processing and delivery option. This means it can detect how a user is viewing your site, and provide the optimal image type for that use case. Let’s look at four reasons this can be a very effective feature.
此特定服务是实时图像处理和交付选项。 这意味着它可以检测用户如何查看您的网站，并为该用例提供最佳图像类型。 让我们看一下这可能是一个非常有效的功能的四个原因。
We’ve already discussed how PNG and JPEG are the most common and recommended formats for graphic and photographic elements respectively. You might not know, however, that there’s a new file format available that might be beneficial when you’re looking to boost your site’s performance.
我们已经讨论了PNG和JPEG如何分别是图形和摄影元素的最常见和推荐格式。 但是，您可能不知道有一种新的文件格式，当您希望提高网站的性能时可能会有所帮助。
We’re talking about WebP, which is Google’s new, modern image file format.
我们正在谈论WebP，这是Google的新的现代图像文件格式 。
The WebP logo. Source: WebP徽标。 资料来源： WikiMedia Commons WikiMedia CommonsThe WebP format can work with both lossy and lossless compression, and supports transparency. Plus, the files themselves hold a lot of potential when it comes to optimization and performance.
WebP格式可以同时进行有损和无损压缩，并支持透明性。 此外，文件本身在优化和性能方面具有很大的潜力。
This is because WebP lossless files are up to 26% smaller than PNGs of equivalent quality. In fact, KeyCDN did a study to compare just how much of an impact the WebP format can have. It found an overall 77 percent decrease in page size when converting from JPG to WebP.
这是因为WebP无损文件比同等质量的PNG小26％。 实际上，KeyCDN进行了一项研究，以比较WebP格式可能产生的影响。 从JPG转换为WebP时，页面大小总体减少了77％ 。
Consequently, KeyCDN offers conversion to WebP. This feature uses lossless compression, and the most appropriate image can then be served up to each user based on browser specifications and compatibility.
因此，KeyCDN提供了到WebP的转换。 此功能使用无损压缩，然后可以根据浏览器规格和兼容性为每个用户提供最合适的图像。
In addition to conversion, there’s also a WebP Caching feature that offers a one-click solution for existing users. Without changing anything else, KeyCDN users can easily take advantage of WebP images via this option.
除转换外，还有一个WebP缓存功能，可为现有用户提供一键式解决方案。 无需更改其他任何内容，KeyCDN用户就可以通过此选项轻松利用WebP图像。
When you scale images with CSS or HTML attributes, you’re manipulating one image to serve several purposes. This has its downsides in terms of quality and performance. That’s why KeyCDN offers real-time delivery of scaled images through its image processing services.
当使用CSS或HTML属性缩放图像时，您正在处理一个图像以达到多种目的。 这在质量和性能方面都有其缺点。 这就是KeyCDN通过其图像处理服务实时提供缩放图像的原因。
One of the main benefits of using a CDN is that images will be delivered from the server location that is closest to the person accessing your website. When this is coupled with the flexibility of your scaled images, you’ll be able to deliver the best file for a wide variety of screen sizes at high speeds.
使用CDN的主要好处之一是，图像将从最接近访问您网站的人的服务器位置传送。 结合缩放图像的灵活性，您将能够为各种屏幕尺寸高速提供最佳文件。
When images are loaded through your website’s server, page speeds can be negatively impacted because your server is trying to answer all the requests it receives. When you add in a CDN, you allow your web server to focus on managing the dynamic requests, while the network carries the load of making sure your images and static content are in place.
通过网站的服务器加载图像时，页面速度可能会受到负面影响，因为您的服务器正在尝试回答它收到的所有请求。 当您添加CDN时，您的Web服务器将专注于管理动态请求，而网络则承担着确保图像和静态内容就位的负担。
Essentially, CDNs enable your web server to outsource the burden of loading media items. By using a CDN you can free up your web server storage, and your website visitors will receive media from the closest physical CND data center. This results in a lot less latency between web users and your content.
本质上，CDN使您的Web服务器可以外包加载媒体项目的负担。 通过使用CDN，您可以释放Web服务器的存储空间，您的网站访问者将从最近的物理CND数据中心接收媒体。 这样可以减少Web用户和您的内容之间的延迟。
Using a CDN also gives you a very real-time solution to image processing challenges. For example, you can set up image processing to deliver a specific compression rate for various parameters. This means your site’s users will always get the right media for their devices, without any page slowdowns.
使用CDN还可以为您提供非常实时的解决方案，以应对图像处理难题。 例如，您可以设置图像处理以为各种参数提供特定的压缩率。 这意味着您网站的用户将始终获得适合其设备的媒体，而不会出现任何页面速度变慢的情况。
Essentially, the more efficient the compression rate is, the fewer bytes of information have to be transmitted. Ultimately, you’ll need to decide if you’re better off using lossy or lossless compression.
本质上，压缩率越有效，必须传输的信息字节越少。 最终，您需要确定使用有损压缩还是无损压缩效果更好。
If you’re just looking for the best reduction in file size, you’re probably fine to go with lossy compression. Alternatively, if you’re operating a photography website, you might want the benefit of the new WebP file format and lossless compression. This will enable the images to be returned to their original compression format later if needed.
如果您只是想最大程度地减小文件大小，则可以选择有损压缩。 另外，如果您经营的是摄影网站，则可能希望获得新的WebP文件格式和无损压缩的好处。 如果需要，这将使图像在以后返回到其原始压缩格式。
Regardless of the compression you choose, a CDN enables you to set parameters for the delivery of content, without impacting the speed or functionality of your website’s server. Those parameters include aspects such as cropping, trimming, and setting the width, height, fit, and position of the image.
不管选择哪种压缩方式，CDN都使您能够设置内容传递的参数 ，而不会影响网站服务器的速度或功能。 这些参数包括裁切，修剪和设置图像的宽度，高度，适合度和位置等方面。
For example, you can use query strings to achieve certain image effects. The following string will create a blur effect on an image:
例如，您可以使用查询字符串来实现某些图像效果。 以下字符串将在图像上创建模糊效果：
https://ip.keycdn.com/example.jpg?blur=5The resulting image should look something like this:
生成的图像应如下所示：
On the other hand, a query string to sharpen the same image would use the sharpen parameter:
另一方面，用于锐化同一图像的查询字符串将使用sharpen参数：
https://ip.keycdn.com/example.jpg?sharpen=10This would result in an image that displays a sharpened effect:
这将导致图像显示清晰的效果：
Ultimately, there are a wide variety of parameters you can use with a CDN, in order to display images on your website with greater flexibility and impact than through other methods.
最终，CDN可以使用各种各样的参数，以比其他方法更大的灵活性和影响力在网站上显示图像。
You can start managing your images with a service like KeyCDN pretty quickly. You’ll be charged based on how many calls the delivery network has to answer. KeyCDN tallies this by location and GBs, up to the first 10 TBs of activity per month.
您可以使用KeyCDN之类的服务开始快速管理图像。 您将根据投放网络必须接听的电话数量向您收费。 KeyCDN会根据位置和GB来统计，每月最多活动10 TB。
The busier your website is, the less you pay, depending on the tier of TBs used. Once you create a KeyCDN account, you’ll be able to set up a “Pull Zone”. This means you’ll identify the origin server for your website’s content.
您的网站越忙，您支付的费用就越少，具体取决于所使用的TB级别 。 创建KeyCDN帐户后 ，您将可以设置“ 拉区 ”。 这意味着您将标识网站内容的原始服务器。
This is where KeyCDN will pull static content from, in order to cache that data on its edge servers. When visitors access your website, requests will be routed to the nearest edge server and the content will be delivered. It’s important to note that you will need to enable Image Processing for this particular pull zone to work.
这是KeyCDN从中提取静态内容的地方，以便将数据缓存在其边缘服务器上。 当访问者访问您的网站时，请求将被路由到最近的边缘服务器，并且内容将被传递。 重要的是要注意，您将需要启用“图像处理”才能使此特定的拉动区域正常工作。
“Push Zones”, on the other hand, are recommended and sometimes required for larger file sizes. If you’re caching files larger than 100 MBs, you’ll need to use a push zone.
另一方面，建议使用“ Push Zones ”，对于较大的文件大小，有时需要使用“ Push Zones ”。 如果要缓存大于100 MB的文件，则需要使用推送区域。
Once you set up your zones, you’ll want to verify that the CDN is recognizing your assets and that they’re accessible via the network. There are a number of ways you can then integrate KeyCDN seamlessly into your website workflow. Depending on your host or platform, you’ll want to check out the appropriate support documentation to complete the integration process.
设置区域后，您将需要验证 CDN是否可以识别您的资产，并且可以通过网络访问它们。 然后，您可以通过多种方式将KeyCDN无缝集成到网站工作流程中。 根据主机或平台的不同，您将需要查看适当的支持文档以完成集成过程。
Image processing can take your optimization efforts to a whole new level, with real-time content delivery tools. This can be a big point of differentiation between you and your competition, and enable you to maximize your website’s resources and boost page loading speeds.
图像处理可以使用实时内容交付工具将您的优化工作提高到一个全新的水平。 这可能是您与竞争对手之间的最大区别，并使您能够最大程度地利用网站资源并提高页面加载速度。
KeyCDN image processing services can help you reach your content delivery goals because you can:
KeyCDN图像处理服务可以帮助您实现内容交付目标，因为您可以：
choose from advanced file format conversions 从高级文件格式转换中选择 deliver dynamically-scaled images to site visitors through custom parameter settings 通过自定义参数设置向站点访问者提供动态缩放的图像 free up your website’s server by offloading static content delivery 通过卸载静态内容交付来释放网站的服务器 get the best of both lossy and lossless compression in real-time. 实时获得有损和无损压缩的最佳效果。Regardless of your website’s purpose, using image processing through CDNs can take your media delivery to the next level!
无论您的网站是什么目的，通过CDN使用图像处理都可以使您的媒体交付达到更高的水平！
翻译自: https://www.sitepoint.com/4-reasons-to-use-image-processing-to-optimize-website-media/
图像处理的凸优化
相关资源：图像上采样——凸优化方法（cvx）.rar