我正在尝试为自己创建一个个人主页,以了解有关网页设计(JavaScript,使用Photo Shop等)的更多信息.我打算在左边有一个图形菜单,在顶部有一个横幅,还有一个"照片"部分,在那里我可以显示我拍摄的各种照片的照片.
但是,当我查看其他类似的网站时,我看到一些使用GIF,有些使用JPG,有些甚至使用PNG.这些之间有什么区别吗?我应该使用GIF用于网站上使用的图形图像和JPG用于我的照片吗?我应该制作一切PNG吗?
完全重复:
PNG与GIF对比JPEG与SVG - 何时使用?
网站图像格式:为正确的任务选择正确的格式.
小网站图片的格式是什么?GIF还是PNG?
GvS.. 23
解释它的XKCD风格漫画:
http://lbrandy.com/blog/2008/10/my-first-and-last-webcomic/
解释它的XKCD风格漫画:
http://lbrandy.com/blog/2008/10/my-first-and-last-webcomic/
在以下情况下应使用PNG:
您需要透明度(1位或Alpha透明度)
无损压缩效果很好(例如图表或徽标,或计算机生成的图像)
在以下情况下应使用JPEG:
无损压缩效果不佳(例如照片)
GIF应该在以下时间:
PNG不可用,例如在非常旧的软件或浏览器上
动画是必要的
尽管有相反的神话,但PNG在大多数方面都优于GIF.除了动画之外,PNG能够实现GIF的每种图像模式,并且当使用相同的图像模式时,由于其优于DEZATE算法,与LZW相比,PNG将具有更好的压缩.PNG还能够提供GIF无法做到的其他模式,例如24位颜色和Alpha透明度,但这是您需要注意的地方:如果您忘记转换为调色板模式,您的PNG图像可能会以24位颜色保存这将占用更多空间.
PNG模式包括(这只是一小部分)
调色板颜色为2至256色(如GIF)
调色板颜色为2至256色,透明色(如GIF)
真彩色(24位色)
带alpha通道的真彩色(24位色+ 8位Alpha透明度)
要在Web上使用PNG进行最佳压缩,请使用调色板模式.如果您发现PNG文件大于等效的GIF文件,那么您将以24位颜色保存PNG并在调色板模式下保存GIF(因为GIF始终处于调色板模式).首先尝试转换为调色板模式.
PNG还有其他模式,如调色板颜色和alpha透明度.此类模式无法在Photoshop中创建,但其他应用程序可以创建它们.
编辑2013:删除了一堆关于IE6兼容性的东西.
使用JPG照片和PNG照片以外的所有照片.GIF实际上并不是一个非常好的格式,PNG可以在大多数应用程序中完全替换它的压缩和质量,但有时会出现兼容性问题,不确定这些是否已经在所有当前的webbrowsers中解决了.基本上所有东西都可以读取GIF,所以当它非常有用时.
对于按钮,图标,徽标使用PNG.仅在需要小动画图像时才使用GIF.
PNG可以完成GIF所能做的所有事情(除了动画,甚至是APNG中的那个),并且应该几乎总是更小.如果PNG不小于GIF,那么您的软件可能会将其保存得很差 - 寻找PNG优化程序,如PNGOUT和pngnq.