如何在无损的情况下让图片变的更小 #1795
如何在无损的情况下让图片变的更小 #1795
Conversation
|
@sqrthree 初稿完成。 |
|
@sqrthree 申请校对 |
|
@meifans 好的呢 🍺 |
TODO/making-photos-smaller.md
Outdated
|
|
||
| Yelp has over 100 million user-generated photos ranging from pictures of dinners or haircuts, to one of our newest features, [#yelfies](https://www.yelpblog.com/2016/11/yelfie). These images account for a majority of the bandwidth for users of the app and website, and represent a significant cost to store and transfer. In our quest to give our users the best experience, we worked hard to optimize our photos and were able to achieve a 30% average size reduction. This saves our users time and bandwidth and reduces our cost to serve those images. Oh, and we did it all without reducing the quality of these images! | ||
| Yelp（美国最大点评网站）已经有超过 1 亿张用户上传的照片了，其中有他们的晚餐，发型，对于一个我们最新的特性，[#yelfies](https://www.yelpblog.com/2016/11/yelfie)。这些上传图片的账户占据了我们 app 和网站的主要带宽，同时也代表了主要的存储和传输成本。为了给我们的用户最好的用户体验，我们竭尽所能的优化我们的图片，最终达到图片大小平均减少 30%。这不仅节省了我们用户的时间和带宽，还减少了我们的服务器成本。对了，关键的是我们的这个过程是完全无损的！ |
There was a problem hiding this comment.
These images account for a majority of the bandwidth for users of the app and website, and represent a significant cost to store and transfer.
这些上传图片的账户占据了我们 app 和网站的主要带宽，同时也代表了主要的存储和传输成本。
->
这些图片占了用户app和网站的大多数带宽，也代表着储存和传输的巨大成本。
|
|
||
| Yelp has been storing user-uploaded photos for over 12 years. We save lossless formats (PNG, GIF) as PNGs and all other formats as JPEG. We use Python and [Pillow](https://python-pillow.org/) for saving images, and start our story of photo uploads with a snippet like this: | ||
| Yelp 保存用户上传的图片已经有 12 年了。我们将 PNG 和 GIF 保存为无损格式的 PNG，其他格式的保存为 JPEG。我们使用 Python 和 [Pillow](https://python-pillow.org/) 保存图片，让我们直接从上传图片开始吧： |
TODO/making-photos-smaller.md
Outdated
| @@ -26,102 +26,102 @@ if format == 'JPEG': | |||
| new_photo.save(thumbfile, **save_args) | |||
| ``` | |||
|
|
|||
| With this as a starting point, we began to investigate potential optimizations on file size that we could apply without a loss in quality. | |||
| 现在让我们开始研究研究有没有一种文件大小的优化方式可以以无损的形式进行。 | |||
There was a problem hiding this comment.
With this as a starting point, we began to investigate potential optimizations on file size that we could apply without a loss in quality.
+现在让我们开始研究研究有没有一种文件大小的优化方式可以以无损的形式进行。
->
以这个作为一个起点，我们开始研究可以无损质量应用的关于文件大小的潜在优化。
TODO/making-photos-smaller.md
Outdated
|
|
||
| First, we had to decide whether to handle this ourselves or let a CDN provider [magically change](https://www.fastly.com/io) our photos. With the priority we place on high quality content, it made sense to evaluate options and make potential size vs quality tradeoffs ourselves. We moved ahead with research on the current state of photo file size reduction – what changes could be made and how much size / quality reduction was associated with each. With this research completed, we decided to work on three primary categories. The rest of this post explains what we did and how much benefit we realized from each optimization. | ||
| 首先，我们要决定是选择我们自己，还是一个 CDN 提供商 [magically change](https://www.fastly.com/io) 来处理我们的图片。在高质量内容优先的情况下，评估如何在图片大小和质量之间做取舍就显得非常重要了。让我们来研究一下当前图片文件减小的一些方法，我们可以做哪些改变以及每种方法我们可以减少多少大小和质量。完成这项研究之后，我们决定 |
There was a problem hiding this comment.
With the priority we place on high quality content, it made sense to evaluate options and make potential size vs quality tradeoffs ourselves.
在高质量内容优先的情况下，评估如何在图片大小和质量之间做取舍就显得非常重要了。
-> 随着我们对高质量内容的重视，评估方案做出可能的大小与质量的权衡对我们来说是有意义的。
TODO/making-photos-smaller.md
Outdated
|
|
||
| First, we had to decide whether to handle this ourselves or let a CDN provider [magically change](https://www.fastly.com/io) our photos. With the priority we place on high quality content, it made sense to evaluate options and make potential size vs quality tradeoffs ourselves. We moved ahead with research on the current state of photo file size reduction – what changes could be made and how much size / quality reduction was associated with each. With this research completed, we decided to work on three primary categories. The rest of this post explains what we did and how much benefit we realized from each optimization. | ||
| 首先，我们要决定是选择我们自己，还是一个 CDN 提供商 [magically change](https://www.fastly.com/io) 来处理我们的图片。在高质量内容优先的情况下，评估如何在图片大小和质量之间做取舍就显得非常重要了。让我们来研究一下当前图片文件减小的一些方法，我们可以做哪些改变以及每种方法我们可以减少多少大小和质量。完成这项研究之后，我们决定 |
There was a problem hiding this comment.
With this research completed, we decided to work on three primary categories. The rest of this post explains what we did and how much benefit we realized from each optimization.
完成这项研究之后，我们决定
->
完成这项研究之后，我们决定了三个主要策略。
The rest of this post explains what we did and how much benefit we realized from each optimization.
->本文下面的部分解释了我们所做的工作，以及从每次优化中获得了多少好处。
TODO/making-photos-smaller.md
Outdated
|
|
||
| For JPEG, this flag instructs the encoder to find the optimal [Huffman coding](https://en.wikipedia.org/wiki/Huffman_coding) by making an additional pass over each image scan. Each first pass, instead of writing to file, calculates the occurrence statistics of each value, required information to compute the ideal coding. PNG internally uses zlib, so the optimize flag in that case effectively instructs the encoder to use `gzip -9` instead of `gzip -6`. | ||
| 对于 JPEG 来说，对个选项告诉编码器通过对每个图片进行一次额外的扫描以找到最佳的 [霍夫曼编码](https://en.wikipedia.org/wiki/Huffman_coding)。第一次，不写入文件，而是计算每个值出现的次数，以及可以计算出理想编码的必要信息。PNG 内部使用 zlib，所以优化 flag 就需要告诉编码器使用 `gzip -9` 而不是 `gzip -6`。 |
There was a problem hiding this comment.
PNG internally uses zlib, so the optimize flag in that case effectively instructs the encoder to use gzip -9 instead of gzip -6.
PNG 内部使用 zlib，所以优化 flag 就需要告诉编码器使用 gzip -9 而不是 gzip -6。
->
PNG内部使用zlib,所以在此情况下这个优化选项实际上命令编译器使用 gzip -9而不是gzip -6。
|
@sqrthree 申请校对~ |
|
@windmxf 妥妥哒 🍻 |
TODO/making-photos-smaller.md
Outdated
|
|
||
| This is one of the easiest changes we made: enabling the setting in Pillow responsible for additional file size savings at the cost of CPU time (`optimize=True`). Due to the nature of the tradeoff being made, this does not impact image quality at all. | ||
| 这是我们做的其中一个最简单的改变：启用 Pillow 中负责额外文件大小的设置来节约 CPU 耗时 (`optimize=True`)。由于本质没变，所有这对于图片质量丝毫没有影响。 |
There was a problem hiding this comment.
This is one of the easiest changes we made: enabling the setting in Pillow responsible for additional file size savings at the cost of CPU time (optimize=True).
这是我们做的其中一个最简单的改变：启用 Pillow 中负责额外文件大小的设置来节约 CPU 耗时 (optimize=True)。
-> 这是我们做出的最简单的改变之一：开启Pillow中负责以cpu时间为代价节省额外的文件大小的设置(optimize=True)。
TODO/making-photos-smaller.md
Outdated
|
|
||
| This is an easy change to make but it turns out that it is not a silver bullet, reducing file size by just a few percent. | ||
| 这是一个很简单的改变，但是事实证明它也不是银弹，只减少了百分之几。 |
There was a problem hiding this comment.
This is an easy change to make but it turns out that it is not a silver bullet, reducing file size by just a few percent.
+这是一个很简单的改变，但是事实证明它也不是银弹，只减少了百分之几。
->
这是一个很简单的改变，但事实证明它不是一个高招，文件大小只减少了百分之几。
|
|
||
| Yelp has been storing user-uploaded photos for over 12 years. We save lossless formats (PNG, GIF) as PNGs and all other formats as JPEG. We use Python and [Pillow](https://python-pillow.org/) for saving images, and start our story of photo uploads with a snippet like this: |
There was a problem hiding this comment.
start our story of photo uploads with a snippet like this ->
先来展示一段关于图片上传的代码片段：
| @@ -26,102 +26,102 @@ if format == 'JPEG': | |||
| new_photo.save(thumbfile, **save_args) | |||
| ``` | |||
|
|
|||
| With this as a starting point, we began to investigate potential optimizations on file size that we could apply without a loss in quality. | |||
There was a problem hiding this comment.
With this as a starting point, we began to investigate potential optimizations on file size that we could apply without a loss in quality->
上面这段代码可以作为我们研究的启点，研究如何在不损失图片质量的情况下，找到一种潜在的优化图片大小的方法。
|
|
||
| First, we had to decide whether to handle this ourselves or let a CDN provider [magically change](https://www.fastly.com/io) our photos. With the priority we place on high quality content, it made sense to evaluate options and make potential size vs quality tradeoffs ourselves. We moved ahead with research on the current state of photo file size reduction – what changes could be made and how much size / quality reduction was associated with each. With this research completed, we decided to work on three primary categories. The rest of this post explains what we did and how much benefit we realized from each optimization. |
There was a problem hiding this comment.
With the priority we place on high quality content, it made sense to evaluate options and make potential size vs quality tradeoffs ourselves.->
随着我们对高质量内容的重视,在我们的评估方案里，对于图片尺寸和图片质量的权衡就显得非常重要了。
|
|
||
| This is one of the easiest changes we made: enabling the setting in Pillow responsible for additional file size savings at the cost of CPU time (`optimize=True`). Due to the nature of the tradeoff being made, this does not impact image quality at all. |
There was a problem hiding this comment.
enabling the setting in Pillow responsible for additional file size savings at the cost of CPU time-》
启用Pillow中的一个设置，这个设置可以通过增加CPU的耗时来减小文件尺寸。
TODO/making-photos-smaller.md
Outdated
|
|
||
| For JPEG, this flag instructs the encoder to find the optimal [Huffman coding](https://en.wikipedia.org/wiki/Huffman_coding) by making an additional pass over each image scan. Each first pass, instead of writing to file, calculates the occurrence statistics of each value, required information to compute the ideal coding. PNG internally uses zlib, so the optimize flag in that case effectively instructs the encoder to use `gzip -9` instead of `gzip -6`. |
There was a problem hiding this comment.
For JPEG, this flag
对于 JPEG 来说，对个
->对于 JPEG 来说，这个
|
|
||
| - Baseline JPEG images load from top to bottom. |
|
|
||
| - Baseline JPEG images load from top to bottom. | ||
| - Progressive JPEG images load from more blurry to less blurry. The progressive option can easily be enabled in Pillow (`progressive=True`). As a result, there is a perceived performance increase (that is, it’s easier to notice when an image is partially absent than it is to tell it’s not fully sharp). |
|
|
||
| Yelp targets two image formats for serving user-generated content - JPEG and PNG. JPEG is a great format for photos but generally struggles with high-contrast design content (like logos). By contrast, PNG is fully-lossless, so great for graphics but too large for photos where small distortions are not visible. In the cases where users upload PNGs that are actually photographs, we can save a lot of space if we identify these files and save them as JPEG instead. Some common sources of PNG photos on Yelp are screenshots taken by mobile devices and apps that modify photos to add effects or borders. |
There was a problem hiding this comment.
In the cases where users upload PNGs that are actually photographs, we can save a lot of space if we identify these files and save them as JPEG instead.
->用户上传的PNG图片实际上是照片时，如果我们识别这些照片并将其保存为JPEG，就可以节省大量的空间
TODO/making-photos-smaller.md
Outdated
|
|
||
| Quality is somewhat of an abstraction. In fact, there are separate qualities for each of the color channels of a JPEG image. Quality levels 0 - 100 map to different [quantization tables](https://en.wikipedia.org/wiki/JPEG#JPEG_codec_example) for the color channels, determining how much data is lost (usually high frequency). Quantization in the signal domain is the one step in the JPEG encoding process that loses information. |
There was a problem hiding this comment.
Quantization in the signal domain is the one step in the JPEG encoding process that loses information.
->在信号域量化是JPEG编码中失去信息的一个步骤
|
|
||
| The first and most well-known way to reduce the size of JPEG files is a setting called `quality`. Many applications capable of saving to the JPEG format specify quality as a number. |
There was a problem hiding this comment.
The first and most well-known way to reduce the size of JPEG files is a setting called quality.
->第一也是最知名的减少JPEG文件大小的方式，是一个叫做画质的设置。
TODO/making-photos-smaller.md
Outdated
|
|
||
| We evaluated a bottom-up algorithm, which in our experience did not yield suitable results at the higher end of the quality range we wanted to use (though it seems like it may still have potential in the mid-range of image qualities, where an encoder can begin to be more adventurous with the bytes it discards). Many of the [scholarly](https://vision.arc.nasa.gov/publications/spie93abw/spie93abw.html.d/spie93.html)[papers](ftp://ftp.cs.wisc.edu/pub/techreports/1994/TR1257.pdf) on this strategy were published in the early 90s when computing power was at a premium and took shortcuts that option B addresses, such as not evaluating interactions across blocks. |
There was a problem hiding this comment.
TODO/making-photos-smaller.md
Outdated
|
|
||
| Additionally, the way progressive files are packed generally results in a small reduction to file size. As more fully explained by the [Wikipedia article](https://en.wikipedia.org/wiki/JPEG#Entropy_coding), JPEG format uses a zigzag pattern over the 8x8 blocks of pixels to do entropy coding. When the values of those blocks of pixels are unpacked and laid out in order, you generally have non-zero numbers first and then sequences of 0s, with that pattern repeating and interleaved for each 8x8 block in the image. With progressive encoding, the order of the unwound pixel blocks changes. The higher value numbers for each block come first in the file, (which gives the earliest scans of a progressive image its distinct blockiness), and the longer spans of small numbers, including more 0s, that add the finer details are towards the end. This reordering of the image data doesn’t change the image itself, but does increase the number of 0s that might be in a row (which can be more easily compressed). |
There was a problem hiding this comment.
JPEG format uses a zigzag pattern over the 8x8 blocks of pixels to do entropy coding.
->JPEG格式在8x8像素块上使用锯齿形图案进行熵编码。
TODO/making-photos-smaller.md
Outdated
|
|
||
| Additionally, the way progressive files are packed generally results in a small reduction to file size. As more fully explained by the [Wikipedia article](https://en.wikipedia.org/wiki/JPEG#Entropy_coding), JPEG format uses a zigzag pattern over the 8x8 blocks of pixels to do entropy coding. When the values of those blocks of pixels are unpacked and laid out in order, you generally have non-zero numbers first and then sequences of 0s, with that pattern repeating and interleaved for each 8x8 block in the image. With progressive encoding, the order of the unwound pixel blocks changes. The higher value numbers for each block come first in the file, (which gives the earliest scans of a progressive image its distinct blockiness), and the longer spans of small numbers, including more 0s, that add the finer details are towards the end. This reordering of the image data doesn’t change the image itself, but does increase the number of 0s that might be in a row (which can be more easily compressed). |
There was a problem hiding this comment.
JPEG format uses a zigzag pattern over the 8x8 blocks of pixels to do entropy coding.
->JPEG格式在8x8像素块上使用Zigzag模式进行熵编码。
TODO/making-photos-smaller.md
Outdated
|
|
||
| Additionally, the way progressive files are packed generally results in a small reduction to file size. As more fully explained by the [Wikipedia article](https://en.wikipedia.org/wiki/JPEG#Entropy_coding), JPEG format uses a zigzag pattern over the 8x8 blocks of pixels to do entropy coding. When the values of those blocks of pixels are unpacked and laid out in order, you generally have non-zero numbers first and then sequences of 0s, with that pattern repeating and interleaved for each 8x8 block in the image. With progressive encoding, the order of the unwound pixel blocks changes. The higher value numbers for each block come first in the file, (which gives the earliest scans of a progressive image its distinct blockiness), and the longer spans of small numbers, including more 0s, that add the finer details are towards the end. This reordering of the image data doesn’t change the image itself, but does increase the number of 0s that might be in a row (which can be more easily compressed). |
There was a problem hiding this comment.
you generally have non-zero numbers first and then sequences of 0s, with that pattern repeating and interleaved for each 8x8 block in the image. -》
你会发现非零数字优先出现，数字零靠后，图片中每个8x8像素块都会使用这个模式进行扫描。
TODO/making-photos-smaller.md
Outdated
|
|
||
| Additionally, the way progressive files are packed generally results in a small reduction to file size. As more fully explained by the [Wikipedia article](https://en.wikipedia.org/wiki/JPEG#Entropy_coding), JPEG format uses a zigzag pattern over the 8x8 blocks of pixels to do entropy coding. When the values of those blocks of pixels are unpacked and laid out in order, you generally have non-zero numbers first and then sequences of 0s, with that pattern repeating and interleaved for each 8x8 block in the image. With progressive encoding, the order of the unwound pixel blocks changes. The higher value numbers for each block come first in the file, (which gives the earliest scans of a progressive image its distinct blockiness), and the longer spans of small numbers, including more 0s, that add the finer details are towards the end. This reordering of the image data doesn’t change the image itself, but does increase the number of 0s that might be in a row (which can be more easily compressed). |
There was a problem hiding this comment.
With progressive encoding, the order of the unwound pixel blocks changes.-》使用渐进式编码时，被解压开的像素块的顺序会改变。
TODO/making-photos-smaller.md
Outdated
|
|
||
| Additionally, the way progressive files are packed generally results in a small reduction to file size. As more fully explained by the [Wikipedia article](https://en.wikipedia.org/wiki/JPEG#Entropy_coding), JPEG format uses a zigzag pattern over the 8x8 blocks of pixels to do entropy coding. When the values of those blocks of pixels are unpacked and laid out in order, you generally have non-zero numbers first and then sequences of 0s, with that pattern repeating and interleaved for each 8x8 block in the image. With progressive encoding, the order of the unwound pixel blocks changes. The higher value numbers for each block come first in the file, (which gives the earliest scans of a progressive image its distinct blockiness), and the longer spans of small numbers, including more 0s, that add the finer details are towards the end. This reordering of the image data doesn’t change the image itself, but does increase the number of 0s that might be in a row (which can be more easily compressed). |
There was a problem hiding this comment.
which gives the earliest scans of a progressive image its distinct blockiness-》
渐进模式加载的图片中区分度最高的区域将最早被扫描。
TODO/making-photos-smaller.md
Outdated
|
|
||
| Additionally, the way progressive files are packed generally results in a small reduction to file size. As more fully explained by the [Wikipedia article](https://en.wikipedia.org/wiki/JPEG#Entropy_coding), JPEG format uses a zigzag pattern over the 8x8 blocks of pixels to do entropy coding. When the values of those blocks of pixels are unpacked and laid out in order, you generally have non-zero numbers first and then sequences of 0s, with that pattern repeating and interleaved for each 8x8 block in the image. With progressive encoding, the order of the unwound pixel blocks changes. The higher value numbers for each block come first in the file, (which gives the earliest scans of a progressive image its distinct blockiness), and the longer spans of small numbers, including more 0s, that add the finer details are towards the end. This reordering of the image data doesn’t change the image itself, but does increase the number of 0s that might be in a row (which can be more easily compressed). |
There was a problem hiding this comment.
and the longer spans of small numbers, including more 0s, that add the finer details are towards the end.-》
而较长一段的小数字，包括许多数字零，将会在最末加载，用于填充细节。
TODO/making-photos-smaller.md
Outdated
|
|
||
| Additionally, the way progressive files are packed generally results in a small reduction to file size. As more fully explained by the [Wikipedia article](https://en.wikipedia.org/wiki/JPEG#Entropy_coding), JPEG format uses a zigzag pattern over the 8x8 blocks of pixels to do entropy coding. When the values of those blocks of pixels are unpacked and laid out in order, you generally have non-zero numbers first and then sequences of 0s, with that pattern repeating and interleaved for each 8x8 block in the image. With progressive encoding, the order of the unwound pixel blocks changes. The higher value numbers for each block come first in the file, (which gives the earliest scans of a progressive image its distinct blockiness), and the longer spans of small numbers, including more 0s, that add the finer details are towards the end. This reordering of the image data doesn’t change the image itself, but does increase the number of 0s that might be in a row (which can be more easily compressed). |
There was a problem hiding this comment.
but does increase the number of 0s that might be in a row (which can be more easily compressed).-》
但确实可能会增加每一行零的个数（这样的图片更容易压缩）。
|
|
||
| [](https://engineeringblog.yelp.com/images/posts/2017-05-31-making-images-smaller/baseline-large.gif) | ||
|
|
||
| A mock of how a baseline JPEG renders. |
There was a problem hiding this comment.
A mock of how a baseline JPEG renders-》
模拟标准JPEG图片的渲染效果。
TODO/making-photos-smaller.md
Outdated
|
|
||
| [](https://engineeringblog.yelp.com/images/posts/2017-05-31-making-images-smaller/progressive-large.gif) | ||
|
|
||
| A mock of how a progressive JPEG renders. |
There was a problem hiding this comment.
A mock of how a progressive JPEG renders.-》
模拟渐进式JPEG图片的渲染效果。
TODO/making-photos-smaller.md
Outdated
|
|
||
| So we took the second approach: use a bisection algorithm to generate candidate images at different quality levels, and evaluate each candidate image’s drop in quality by calculating its structural similarity metric ([SSIM](https://en.wikipedia.org/wiki/Structural_similarity)) using [pyssim](https://github.com/jterrace/pyssim/), until that value is at a configurable but static threshold. This enables us to selectively lower the average file size (and average quality) only for images which were above a perceivable decrease to begin with. |
There was a problem hiding this comment.
until that value is at a configurable but static threshold.
->直到这个值达到非静态可配置的阈值为止。
|
|
||
| One of mozjpeg’s differentiators is the use of an alternative quantization table. As mentioned above, quality is an abstraction of the quantization tables used for each color channel. All signs point to the default JPEG quantization tables as being pretty easy to beat. In the words of the [JPEG spec](https://www.w3.org/Graphics/JPEG/itu-t81.pdf): |
There was a problem hiding this comment.
All signs point to the default JPEG quantization tables as being pretty easy to beat.
->默认的JPEG量化表中所有的标志点都很容易在其中找到。
|
|
||
| Mozjpeg has gone through the trouble of benchmarking alternative tables for us, and uses the best performing general-purpose alternative for images it creates. |
There was a problem hiding this comment.
Mozjpeg has gone through the trouble of benchmarking alternative tables for us, and uses the best performing general-purpose alternative for images it creates.
->
Mozipeg已经替我们扫平了使用基准测试选择表的麻烦，并使用性能最好的通用替代方案创建图片。
TODO/making-photos-smaller.md
Outdated
| @@ -252,48 +252,58 @@ RUN pip install virtualenv \ | |||
| && /virtualenv_run/bin/pip install --no-binary=:all: Pillow==4.0.0 | |||
| ``` | |||
|
|
|||
| 这就 OK 了！编译它就就可以在你的图片工作流中使用支持 mozjpeg 的 Pillow 了。 | |||
| That’s it! Build it and you’ll be able to use Pillow backed by mozjpeg within your normal images workflow. | |||
There was a problem hiding this comment.
Build it and you’ll be able to use Pillow backed by mozjpeg within your normal images workflow.
->
构建它，然后就可以在你的自然图片处理流中使用基于mozipeg的Pillow库了。
TODO/making-photos-smaller.md
Outdated
| ## Dynamic content types | ||
|
|
||
| 支持更多的像 WebP，JPEG2k 这样的现代的图片类型正在计划中。即使这个项目我们运行了，因为用户请求的长尾效应，这些现在优化过的 JPEG 和 PNG 图片仍然是值得继续努力优化的。 | ||
| Support for more modern content types like WebP or JPEG2k is certainly on our radar. Even once that hypothetical project ships, there will be a long-tail of users requesting these now-optimized JPEG/PNG images which will continue to make this effort well worth it. |
There was a problem hiding this comment.
Even once that hypothetical project ships, there will be a long-tail of users requesting these now-optimized JPEG/PNG images which will continue to make this effort well worth it.
->
即使预定的项目运转了，用户使用优化过的JPEG/PNG图片的长尾效应也会继续发挥作用，使得这一优化是值得的。
TODO/making-photos-smaller.md
Outdated
| ## Vendor Magic | ||
|
|
||
| 市面上有很多的供应商可以提供图片的传输，改变大小，剪裁和转码服务。包括开源的 [thumbor](https://github.com/thumbor/thumbor)。或许未来对我们来说这是支持响应式图片，动态格式和保留边框最简单方法。但是目前来看我们的解决方案可以从容应对。 |
There was a problem hiding this comment.
或许未来对我们来说这是支持响应式图片，动态格式和保留边框最简单方法。但是目前来看我们的解决方案可以从容应对。
->
或许对我们来说这是未来支持响应式图片，动态格式和保留边框最简单方法。但是目前来讲我们的解决方案已经足够。
|
校对完了，这阵子有点忙，拖了很久，抱歉。@XatMassacrE |
|
@windmxf 校对完了吗？ |
|
@XatMassacrE 已经和 @windmxf 沟通过，今天能搞定。 |
|
@meifans 感谢校对。 |
|
|
||
| Yelp targets two image formats for serving user-generated content - JPEG and PNG. JPEG is a great format for photos but generally struggles with high-contrast design content (like logos). By contrast, PNG is fully-lossless, so great for graphics but too large for photos where small distortions are not visible. In the cases where users upload PNGs that are actually photographs, we can save a lot of space if we identify these files and save them as JPEG instead. Some common sources of PNG photos on Yelp are screenshots taken by mobile devices and apps that modify photos to add effects or borders. |
There was a problem hiding this comment.
too large for photos where small distortions are not visible->
对于差异不明显的图片又显得太大了。
|
|
||
| Yelp targets two image formats for serving user-generated content - JPEG and PNG. JPEG is a great format for photos but generally struggles with high-contrast design content (like logos). By contrast, PNG is fully-lossless, so great for graphics but too large for photos where small distortions are not visible. In the cases where users upload PNGs that are actually photographs, we can save a lot of space if we identify these files and save them as JPEG instead. Some common sources of PNG photos on Yelp are screenshots taken by mobile devices and apps that modify photos to add effects or borders. |
There was a problem hiding this comment.
apps that modify photos to add effects or borders-》“美图”APP
|
|
||
| We wanted to reduce the number of these unnecessary PNGs, but it was important to avoid overreaching and changing format or degrading quality of logos, graphics, etc. How can we tell if something is a photo? From the pixels? |
|
|
||
| We wanted to reduce the number of these unnecessary PNGs, but it was important to avoid overreaching and changing format or degrading quality of logos, graphics, etc. How can we tell if something is a photo? From the pixels? |
There was a problem hiding this comment.
How can we tell if something is a photo? From the pixels?-》
我们怎么来识别一张图片呢？通过像素吗？
TODO/making-photos-smaller.md
Outdated
|
|
||
| Using an experimental sample of 2,500 images, we found that a combination of file size and unique pixels worked well to detect photos. We generate a candidate thumbnail image at our largest resolution and see if the output PNG file is larger than 300KiB. If it is, we’ll also check the image contents to see if there are over 2^16 unique colors (Yelp converts RGBA image uploads to RGB, but if we didn’t, we would check that too). | ||
| 通过一组 2500 张图片的实验样本，我们发现文件大小和独立像素结合起来可以很好的帮助我们判断。我们在最大分辨率下生成我们的候选缩略图，然后看看输出的 PNG 文件是否大于 300KB。如果是，我们就检测图片内容是否有超过 2^16 个独立像素(Yelp 会将 RGBA 图片转化为 RGB，即使不转，我们也会做这个检测。) |
|
|
||
| After learning what we did about PNGs, choosing to preserve some of them as PNG but with a lossy encoder like [pngmini](https://pngmini.com/lossypng.html) could have made sense, but we chose to resave them as JPEG instead. This is an alternate option with reasonable results, 72-85% file size savings over unmodified PNGs according to the author. |
There was a problem hiding this comment.
This is an alternate option with reasonable results,72-85% file size savings over unmodified PNGs according to the author->这是另外一种不错的选择，文件在用户没有修改的情况下，大小降低了72-85%。
|
|
||
| Support for more modern content types like WebP or JPEG2k is certainly on our radar. Even once that hypothetical project ships, there will be a long-tail of users requesting these now-optimized JPEG/PNG images which will continue to make this effort well worth it. |
There was a problem hiding this comment.
Support for more modern content types like WebP or JPEG2k is certainly on our radar.->
我们在考虑支持更多的新图片类型，如WebP、JPEG2k。
|
|
||
| Support for more modern content types like WebP or JPEG2k is certainly on our radar. Even once that hypothetical project ships, there will be a long-tail of users requesting these now-optimized JPEG/PNG images which will continue to make this effort well worth it. |
There was a problem hiding this comment.
Even once that hypothetical project ships, there will be a long-tail of users requesting these now-optimized JPEG/PNG images which will continue to make this effort well worth it.->
即使理论上的方案都实施了，优化过JPEG和PNG图片持续积累还是慢慢产生副作用，所以还是应该尽量使用新图片类型。
TODO/making-photos-smaller.md
Outdated
|
|
||
| ## SVG | ||
|
|
||
| We use SVG in many places on our website, like the static assets created by our designers that go into our [styleguide](http://yelp.design). While this format and optimization tools like [svgo](https://github.com/svg/svgo) are useful to reduce website page weight, it isn’t related to what we did here. |
There was a problem hiding this comment.
like the static assets created by our designers that go into our styleguide.-》
比如我们styleguide上设计师设计的静态资源。
TODO/making-photos-smaller.md
Outdated
|
|
||
| ## SVG | ||
|
|
||
| We use SVG in many places on our website, like the static assets created by our designers that go into our [styleguide](http://yelp.design). While this format and optimization tools like [svgo](https://github.com/svg/svgo) are useful to reduce website page weight, it isn’t related to what we did here. |
|
@windmxf 感谢校对。 |
|
@sqrthree 已经按照两位校对者的校对意见修改完毕。 |
|
已经 merge 啦~ 快快麻溜发布到掘金专栏然后给我发下链接，方便及时添加积分哟。 |
原 Issue #1742