浦口高端网页设计公司:高级网站设计中的图像优化写作

浦口高端网页设计公司:高级网站设计中的图像优化写作

浦口高端网页设计公司:高级网站设计中的图像优化写作
  高级网站设计中的图像优化写作
  
  网站质量图像始终是使用尽可能小的文件大小和提供良好图像质量之间的平衡行为。直接从数码单反相机中嵌入照片可能看起来不错,但会降低网站的加载速度,而过度压缩的图像可能会提高网站的速度,但会损害设计和整体美观。
  
  文件类型和使用时间
  
  浦口高端网页设计公司我们在网站设计中使用三种图像文件类型:JPG。PNG和。SVG。
  
  JPG最适合拍摄风景、风景或人物的照片。对于内容中的图像,例如博客文章,我们的目标是20-70kb。大型背景照片可以达到500kb,但200kb是一个很好的平均值。
  
  JPG是有损的(每次导出时它们都会重新压缩并降低图像质量),而且它们不能很好地管理渐变。如果图像中存在渐变,则有时图像可以分为两个剪切,以便可以使用CSS渐变在单浦口高端网页设计公司独的背景中呈现渐变。
  
  PNG最适合于徽标和图标等资源,因为它们支持透明性,因为徽标和图标通常使用更有限的调色板-因为PNG通过减少颜色数量来实现压缩。
  
  PNG可能有损耗,但我们通常使用无损,这意味着每个像素都可以精确保存,而不会降低调色板的质量,从而获得浦口高端网页设计公司更高质量的图像。
  
  SVG具有最好的质量,并且由于其可扩展性而被用于矢量艺术。

浦口高端网页设计公司:高级网站设计中的图像优化写作

我们经常将它们与徽标一起使用,但是SVG确实为浏览器创建了更多的工作,并且在加载页面时会减慢速度,因此图像的质量应该始终与它们的复杂性保持平衡。
  
  优化技术
  
  优化JPG
  
  对于背景面板的图像,我们将大小设置为1600x1200px。对于内容照片,例如插入到博客文章中的图像,我们将大小限制为200-800px。
  
  调整到最终分辨率后,图像将以最佳质量输出到Photoshop。每次压缩一个图像,我们都会失去一些保真度,所以我们更喜欢单独使用图像优化进行压缩,而不是将其传输到Photoshop。photoshop的效率大大降低:它在65质量的“网络保存”下生成相同大小的图像文件,但其保真度比ImageOptim差85%。
  
  优化较大的PNG
  
  对于更复杂的图像,如果我们不能使用ImageOptim生成15kb到50kb之间的文件,我们使用ImageAlpha。ImageAlpha用于处理PNG从PNG 24(数百万种颜色)到PNG 8(最多256种颜色)。它将图像从非破坏性转变为有损性,最终以最少的颜色来定位PNG。
  
  这种格式的丢失主要意味着对调色板进行战略性的改进,消除最不重要的颜色,以生成看起来仍然很好的图像,同时降低其复杂性。
  
  优化SVG
  
  我们使用这个自动化脚本来简化在MacOS中的使用,允许您右键单击finder中的SVG文件,并通过服务菜单优化SVG。我们经常将字体文件用于单色矢量图形,并使用一个名为glyphs的程序。
  
  
  我们希望通过JPG、PNG和SVG文件类型、图像压缩和质量工具来探索我们的经验,因为我们不断改进自己的流程以改进网站设计。
  
  
  
相关案例
联系电话 400-6065-301

微信咨询 寒总监