I have an app that will display a bunch of images in a slideshow. Those images will be part of the bundle, thus distributed with the app.
我有一个应用程序可以在幻灯片中显示一堆图片。这些图像将成为捆绑包的一部分,因此与应用程序一起发布。
All the images are photographs or photographic, etc.
所有的图片都是照片或照片等。
I've read that it's preferred to use PNG as the image format, but seeing that the JPG version will be much smaller, I'd rather be using that.
我读过,它更喜欢使用PNG作为图像格式,但是看到JPG版本会更小,我宁愿使用它。
Are there any guidelines which format to use and in which case?
是否有使用哪种格式以及在哪种情况下使用的指导方针?
8 个解决方案
#1
129
PNG's are pixel perfect (non-lossy), and require very little extra CPU energy to display. However, large PNGs may take longer to read from storage than more compressed image formats, and thus be slower to display.
PNG是完美的像素(无损耗),并且几乎不需要额外的CPU能量来显示。但是,大型PNGs从存储中读取的时间可能比压缩后的图像格式要长,因此显示速度较慢。
JPG's are smaller to store, but lossy (amount depends on compression level), and to display them requires a much more complicated decoding algorithm. But the typical compression and image quality is usually quite sufficient for photos.
JPG的存储空间更小,但是有损(数量取决于压缩级别),要显示它们需要更复杂的解码算法。但是典型的压缩和图像质量对于照片来说通常是足够的。
Use JPG's for photos and for anything large, and PNG's for anything small and/or designed to be displayed "pixel perfect" (e.g. small icons) or as a part of a composited transparent overlay, etc.
使用JPG的图片和任何大的,PNG的任何小的和/或设计为显示“像素完美”(例如小图标)或作为合成透明覆盖的一部分,等等。
#2
19
Apple optimizes PNG images that are included in your iPhone app bundle. In fact, the iPhone uses a special encoding in which the color bytes are optimized for the hardware. XCode handles this special encoding for you when you build your project. So, you do see additional benefits to using PNG's on an iPhone other than their size consideration. For this reason it is definitely recommended to use PNG's for any images that appear as part of the interface (in a table view, labels, etc).
苹果优化了包含在iPhone应用程序包中的PNG图像。事实上,iPhone使用了一种特殊的编码,在这种编码中,颜色字节为硬件进行了优化。在构建项目时,XCode会为您处理这种特殊的编码。因此,你确实看到了在iPhone上使用PNG的额外好处,而不是考虑它们的大小。出于这个原因,绝对建议将PNG用于作为接口的一部分(在表视图、标签等中)的任何图像。
As for displaying a full screen image such as a photograph you may still reap benefits with PNG's since they are non-lossy and the visual quality should be better than a JPG not to mention resource usage with decoding the image. You may need to decrease the quality of your JPG's in order to see a real benefit in file size but then you are displaying non-optimal images.
至于显示全屏图像(如照片),你仍然可以从PNG中获得好处,因为它们是无损耗的,视觉质量应该比JPG更好,更不用说解码图像的资源使用了。您可能需要降低JPG的质量,以便在文件大小中看到真正的好处,但是您正在显示非最佳的图像。
File size is certainly a factor but there are other considerations at play as well when choosing an image format.
文件大小当然是一个因素,但在选择图像格式时也有其他考虑因素。
#3
11
There is one important thing to think about with PNGs. If a PNG is included in your Xcode build it will be optimized for iOS. This is called PNG crush. If your PNG is downloaded at run time it will not be crushed. Crushed PNGs run about the same as 100% JPGs. Lower quality JPGs run better than higher quality JPGs. So from a performance standpoint from fastest to slowest it would go low quality JPG, high quality JPG, PNG Crushed, PNG.
有一件很重要的事情需要考虑。如果您的Xcode构建中包含PNG,那么它将针对iOS进行优化。这就是PNG crush。如果您的PNG在运行时被下载,它将不会被压碎。压碎的PNGs与100% jpg相同。低质量的jpg比高质量的jpg运行得更好。所以从性能的角度来看,从最快到最慢的速度,它会变成低质量的JPG,高质量的JPG, PNG被压碎,PNG。
If you need to download PNGs you should consider crushing the PNGs on the server before the download.
如果您需要下载png,您应该考虑在下载之前在服务器上压碎PNGs。
http://www.cocoanetics.com/2011/10/avoiding-image-decompression-sickness/
http://www.cocoanetics.com/2011/10/avoiding-image-decompression-sickness/
#4
8
The Cocoanetics blog published a nice iOS performance benchmark of JPGs at various quality levels, and PNGs, with and without crushing.
Cocoanetics博客发布了一个不错的iOS性能基准,可以让各种各样的jpg和png在不同的质量水平上运行。
From his conclusion:
从他的结论:
If you absolutely need an alpha channel or have to go with PNGs then it is advisable to install the pngcrush tool on your web server and have it process all your PNGs. In almost all other cases high quality JPEGs combine smaller file sizes (i.e. faster transmission) with faster compression and rendering.
如果您绝对需要alpha通道,或者必须使用PNGs,那么建议在web服务器上安装pngcrush工具,并让它处理所有PNGs。在几乎所有其他情况下,高质量的jpeg结合了更小的文件大小(即更快的传输),压缩和渲染速度更快。
It turns out that PNGs are great for small images that you would use for UI elements, but they are not reasonable to use for any full screen applications like catalogues or magazines. There you would want to choose a compression quality between 60 and 80% depending on your source material.
事实证明,PNGs非常适合用于UI元素的小图像,但是对于目录或杂志这样的全屏应用程序来说,它们是不合理的。在这里,您需要根据您的源材料选择压缩质量在60到80%之间。
In terms of getting it all to display you will want to hang onto UIImage instances from which you have drawn once because those have a cached uncompressed version of the file in them. And where you don’t the visual pause for a large image to appear on screen you will have to force decompression for a couple of images in advance. But bear in mind that these will take large amounts of RAM and if you are overdoing it that might cause your app to be terminated. NSCache is a great place to place frequently used images because this automatically takes care of evicting the images when RAM becomes scarce.
为了让它显示出来你会想要挂在UIImage实例上你曾经画过一次因为它们有一个缓存的未压缩版本的文件。如果你没有在屏幕上显示一个大图像的视觉暂停,你就必须提前对一些图像进行解压。但要记住,这将占用大量的内存,如果你做得太过火,可能会导致你的应用程序被终止。NSCache是放置频繁使用的图像的好地方,因为当RAM变得稀缺时,它会自动地清除这些图像。
It is unfortunate that we don’t have any way to know whether or not an image still needs decompressing or not. Also an image might have evicted the uncompressed version without informing us as to this effect. That might be a good Radar to raise at Apple’s bug reporting site. But fortunately accessing the image as shown above takes no time if the image is already decompressed. So you could just do that not only “just in time” but also “just in case”.
不幸的是,我们无法知道一个图像是否还需要解压缩。同样,一个图像可能会在没有通知我们这个效果的情况下删除未压缩的版本。在苹果的bug报告网站上,这可能是一个很好的建议。但是幸运的是,如果图像已经解压缩,那么访问如上所示的图像不需要花费时间。所以你可以这样做,不仅“及时”而且“以防万一”。
#5
7
Just thought I'd share a bit of decompression performance data...
我只是想分享一些解压缩性能数据……
I'm doing some prototyping of a 360 degree viewer - a carousel where the user can spin through a series of photos taken from different angles, to give the impression of being able to smoothly rotate an object.
我正在做一个360度观看器的原型——一个旋转木马,用户可以旋转从不同角度拍摄的一系列照片,给人一种能够平稳旋转物体的感觉。
I have loaded the image data into an array of NSData's to take file i/o out of the equation, but create NSImage's on the fly. Testing at near max frame rate (~25 fps) and watching in Instruments I see the app is clearly CPU-bound and there's an approximately 10% increase in CPU load showing ~275 kb png's vs. ~75 kb jpg's.
我已经将图像数据加载到NSData的数组中,以便将文件I /o从等式中取出,但要动态创建NSImage。在接近最大帧速率(约25帧/秒)的测试和在仪器中观看时,我看到这个应用程序明显受到CPU限制,CPU负载增加了大约10%,显示大约275 kb的png和大约75 kb的jpg。
I can't say for sure but my guess is the CPU limit is just from general program execution and moving all the data around in memory, but that image decompression is done on the GPU. Either way and the JPG vs. PNG performance argument looks to favour JPG, especially when the smaller file sizes (and therefore smaller sizes of objects in memory at least in some parts of the chain) is taken into consideration.
我不能肯定地说,但是我猜CPU的限制是来自于一般的程序执行和在内存中移动所有的数据,但是图像解压是在GPU上完成的。无论哪种方式,JPG和PNG性能参数看起来都更支持JPG,特别是在考虑到较小的文件大小(因此,至少在链的某些部分中,内存中的对象的大小更小)时。
Of course every situation is different, there's no substitute for testing...
当然,每种情况都不一样,没有什么可以替代测试……
#6
5
I have found massive differences in animation performance when using jpegs vs png. For example placing three screen-sized jpegs side by side in a UIScrollView and scrolling horizontally on an iPhone4 results in lag and a thoroughly unpleasant jerky animation. With non-transparent pngs of the same dimensions the scrolling is smooth. I never use jpegs, even if the image is large.
在使用jpeg和png时,我发现它们在动画性能上有很大的差异。例如,将三个屏幕大小的jpeg并排放置在UIScrollView中,并在iPhone4上水平滚动,结果会有延迟,并且会产生一种非常令人讨厌的动画。对于相同尺寸的非透明pngs,滚动是平滑的。我从不使用jpeg,即使图像很大。
#7
1
I think if you want to use transparent, you have no choice except PNG. But, if your background is opaque already, then you may use JPG. That is the only difference I can see
我认为如果你想使用透明,除了PNG你别无选择。但是,如果您的背景已经不透明,那么您可以使用JPG。这是我能看到的唯一的不同
#8
0
'Use JPEG for photos' as mentioned in Human Interface Guidelines under section Produce artwork in the appropriate format.
“使用JPEG图片”,正如在《人类界面指南》中所提到的,以适当的格式制作艺术品。
#1
129
PNG's are pixel perfect (non-lossy), and require very little extra CPU energy to display. However, large PNGs may take longer to read from storage than more compressed image formats, and thus be slower to display.
PNG是完美的像素(无损耗),并且几乎不需要额外的CPU能量来显示。但是,大型PNGs从存储中读取的时间可能比压缩后的图像格式要长,因此显示速度较慢。
JPG's are smaller to store, but lossy (amount depends on compression level), and to display them requires a much more complicated decoding algorithm. But the typical compression and image quality is usually quite sufficient for photos.
JPG的存储空间更小,但是有损(数量取决于压缩级别),要显示它们需要更复杂的解码算法。但是典型的压缩和图像质量对于照片来说通常是足够的。
Use JPG's for photos and for anything large, and PNG's for anything small and/or designed to be displayed "pixel perfect" (e.g. small icons) or as a part of a composited transparent overlay, etc.
使用JPG的图片和任何大的,PNG的任何小的和/或设计为显示“像素完美”(例如小图标)或作为合成透明覆盖的一部分,等等。
#2
19
Apple optimizes PNG images that are included in your iPhone app bundle. In fact, the iPhone uses a special encoding in which the color bytes are optimized for the hardware. XCode handles this special encoding for you when you build your project. So, you do see additional benefits to using PNG's on an iPhone other than their size consideration. For this reason it is definitely recommended to use PNG's for any images that appear as part of the interface (in a table view, labels, etc).
苹果优化了包含在iPhone应用程序包中的PNG图像。事实上,iPhone使用了一种特殊的编码,在这种编码中,颜色字节为硬件进行了优化。在构建项目时,XCode会为您处理这种特殊的编码。因此,你确实看到了在iPhone上使用PNG的额外好处,而不是考虑它们的大小。出于这个原因,绝对建议将PNG用于作为接口的一部分(在表视图、标签等中)的任何图像。
As for displaying a full screen image such as a photograph you may still reap benefits with PNG's since they are non-lossy and the visual quality should be better than a JPG not to mention resource usage with decoding the image. You may need to decrease the quality of your JPG's in order to see a real benefit in file size but then you are displaying non-optimal images.
至于显示全屏图像(如照片),你仍然可以从PNG中获得好处,因为它们是无损耗的,视觉质量应该比JPG更好,更不用说解码图像的资源使用了。您可能需要降低JPG的质量,以便在文件大小中看到真正的好处,但是您正在显示非最佳的图像。
File size is certainly a factor but there are other considerations at play as well when choosing an image format.
文件大小当然是一个因素,但在选择图像格式时也有其他考虑因素。
#3
11
There is one important thing to think about with PNGs. If a PNG is included in your Xcode build it will be optimized for iOS. This is called PNG crush. If your PNG is downloaded at run time it will not be crushed. Crushed PNGs run about the same as 100% JPGs. Lower quality JPGs run better than higher quality JPGs. So from a performance standpoint from fastest to slowest it would go low quality JPG, high quality JPG, PNG Crushed, PNG.
有一件很重要的事情需要考虑。如果您的Xcode构建中包含PNG,那么它将针对iOS进行优化。这就是PNG crush。如果您的PNG在运行时被下载,它将不会被压碎。压碎的PNGs与100% jpg相同。低质量的jpg比高质量的jpg运行得更好。所以从性能的角度来看,从最快到最慢的速度,它会变成低质量的JPG,高质量的JPG, PNG被压碎,PNG。
If you need to download PNGs you should consider crushing the PNGs on the server before the download.
如果您需要下载png,您应该考虑在下载之前在服务器上压碎PNGs。
http://www.cocoanetics.com/2011/10/avoiding-image-decompression-sickness/
http://www.cocoanetics.com/2011/10/avoiding-image-decompression-sickness/
#4
8
The Cocoanetics blog published a nice iOS performance benchmark of JPGs at various quality levels, and PNGs, with and without crushing.
Cocoanetics博客发布了一个不错的iOS性能基准,可以让各种各样的jpg和png在不同的质量水平上运行。
From his conclusion:
从他的结论:
If you absolutely need an alpha channel or have to go with PNGs then it is advisable to install the pngcrush tool on your web server and have it process all your PNGs. In almost all other cases high quality JPEGs combine smaller file sizes (i.e. faster transmission) with faster compression and rendering.
如果您绝对需要alpha通道,或者必须使用PNGs,那么建议在web服务器上安装pngcrush工具,并让它处理所有PNGs。在几乎所有其他情况下,高质量的jpeg结合了更小的文件大小(即更快的传输),压缩和渲染速度更快。
It turns out that PNGs are great for small images that you would use for UI elements, but they are not reasonable to use for any full screen applications like catalogues or magazines. There you would want to choose a compression quality between 60 and 80% depending on your source material.
事实证明,PNGs非常适合用于UI元素的小图像,但是对于目录或杂志这样的全屏应用程序来说,它们是不合理的。在这里,您需要根据您的源材料选择压缩质量在60到80%之间。
In terms of getting it all to display you will want to hang onto UIImage instances from which you have drawn once because those have a cached uncompressed version of the file in them. And where you don’t the visual pause for a large image to appear on screen you will have to force decompression for a couple of images in advance. But bear in mind that these will take large amounts of RAM and if you are overdoing it that might cause your app to be terminated. NSCache is a great place to place frequently used images because this automatically takes care of evicting the images when RAM becomes scarce.
为了让它显示出来你会想要挂在UIImage实例上你曾经画过一次因为它们有一个缓存的未压缩版本的文件。如果你没有在屏幕上显示一个大图像的视觉暂停,你就必须提前对一些图像进行解压。但要记住,这将占用大量的内存,如果你做得太过火,可能会导致你的应用程序被终止。NSCache是放置频繁使用的图像的好地方,因为当RAM变得稀缺时,它会自动地清除这些图像。
It is unfortunate that we don’t have any way to know whether or not an image still needs decompressing or not. Also an image might have evicted the uncompressed version without informing us as to this effect. That might be a good Radar to raise at Apple’s bug reporting site. But fortunately accessing the image as shown above takes no time if the image is already decompressed. So you could just do that not only “just in time” but also “just in case”.
不幸的是,我们无法知道一个图像是否还需要解压缩。同样,一个图像可能会在没有通知我们这个效果的情况下删除未压缩的版本。在苹果的bug报告网站上,这可能是一个很好的建议。但是幸运的是,如果图像已经解压缩,那么访问如上所示的图像不需要花费时间。所以你可以这样做,不仅“及时”而且“以防万一”。
#5
7
Just thought I'd share a bit of decompression performance data...
我只是想分享一些解压缩性能数据……
I'm doing some prototyping of a 360 degree viewer - a carousel where the user can spin through a series of photos taken from different angles, to give the impression of being able to smoothly rotate an object.
我正在做一个360度观看器的原型——一个旋转木马,用户可以旋转从不同角度拍摄的一系列照片,给人一种能够平稳旋转物体的感觉。
I have loaded the image data into an array of NSData's to take file i/o out of the equation, but create NSImage's on the fly. Testing at near max frame rate (~25 fps) and watching in Instruments I see the app is clearly CPU-bound and there's an approximately 10% increase in CPU load showing ~275 kb png's vs. ~75 kb jpg's.
我已经将图像数据加载到NSData的数组中,以便将文件I /o从等式中取出,但要动态创建NSImage。在接近最大帧速率(约25帧/秒)的测试和在仪器中观看时,我看到这个应用程序明显受到CPU限制,CPU负载增加了大约10%,显示大约275 kb的png和大约75 kb的jpg。
I can't say for sure but my guess is the CPU limit is just from general program execution and moving all the data around in memory, but that image decompression is done on the GPU. Either way and the JPG vs. PNG performance argument looks to favour JPG, especially when the smaller file sizes (and therefore smaller sizes of objects in memory at least in some parts of the chain) is taken into consideration.
我不能肯定地说,但是我猜CPU的限制是来自于一般的程序执行和在内存中移动所有的数据,但是图像解压是在GPU上完成的。无论哪种方式,JPG和PNG性能参数看起来都更支持JPG,特别是在考虑到较小的文件大小(因此,至少在链的某些部分中,内存中的对象的大小更小)时。
Of course every situation is different, there's no substitute for testing...
当然,每种情况都不一样,没有什么可以替代测试……
#6
5
I have found massive differences in animation performance when using jpegs vs png. For example placing three screen-sized jpegs side by side in a UIScrollView and scrolling horizontally on an iPhone4 results in lag and a thoroughly unpleasant jerky animation. With non-transparent pngs of the same dimensions the scrolling is smooth. I never use jpegs, even if the image is large.
在使用jpeg和png时,我发现它们在动画性能上有很大的差异。例如,将三个屏幕大小的jpeg并排放置在UIScrollView中,并在iPhone4上水平滚动,结果会有延迟,并且会产生一种非常令人讨厌的动画。对于相同尺寸的非透明pngs,滚动是平滑的。我从不使用jpeg,即使图像很大。
#7
1
I think if you want to use transparent, you have no choice except PNG. But, if your background is opaque already, then you may use JPG. That is the only difference I can see
我认为如果你想使用透明,除了PNG你别无选择。但是,如果您的背景已经不透明,那么您可以使用JPG。这是我能看到的唯一的不同
#8
0
'Use JPEG for photos' as mentioned in Human Interface Guidelines under section Produce artwork in the appropriate format.
“使用JPEG图片”,正如在《人类界面指南》中所提到的,以适当的格式制作艺术品。