《响应式Web图形设计》一7.4 减小文件尺寸

简介:

本节书摘来异步社区《响应式Web图形设计》一书中的第7章,第7.4节,作者: 【美】Christopher Schmitt 译者: 曾斌 责编: 赵轩,更多章节内容可以访问云栖社区“异步社区”公众号查看。

7.4 减小文件尺寸

响应式Web图形设计
尽管Photoshop可以导出用于网络的不同格式的优秀图像,但它通常并不能让文件变得尽可能小。

7.4.1 压缩光栅图像

Mac系统中用来最大限度优化图像的工具是 ImageOptim(见图7.24)。

你只需要把图像文件拖曳到ImageOptim的窗口中,8种不同的压缩工具就会开始自动处理它们(见图7.25)。用不着担心,这一压缩过程既不会有损画质,也不会削弱图像的视觉整体性。

压缩后,ImageOptim不会创建元图像的新副本。而是自动将老图像替换为最新优化过的图像(但是不要担心,它只会处理你导出的图像,不会影响你的设计源文件)。


24_25

批处理

如果你需要将大量图像转换为另一种格式,那么就能利用到Photoshop中的一个伟大的特性——动作。

为此,你要录制下自己想要Photoshop自动执行的一系列操作,然后将该动作应用到一个图像文件夹上,单击开始。如果顺利的话,你的图像就会被自动处理好了。

如果事情不顺,出了点小意外,也不要沮丧。这是一个自动化的过程,计算机需要你提供非常准确的指令。
Windows系统的用户可以使用PNGGauntlet(http://pnggauntlet.com),但这款软件不仅仅只能处理PNG格式图像(见图7.26)。


26

PHP、HTML和GZIP

如果你的网站使用的是PHP语言,把这一行代码加入到你的PHP文件顶部:

<? ob_start("ob_gzhandle"); ?>

这将会压缩HTML文件,加快网络传输速度。

7.4.2 使用HTTP压缩

尽可能地压缩图像文件大小,有助于为网站访客提供更快、更好的访问体验。因此,采取HTTP压缩是非常值得的,这是一种更高级的压缩技术。通过使用这种技术,在文件被服务器通过网络上发送到用户的计算机之前,服务器端会使用gzip工具,尽可能地对文件进行压缩。随后,在文件被浏览器打开之前,再被解压出来。

1.检查gzip
或许你已经在使用gzip了,也可能你的同事或者合作者已经安装了它。为了确认是否启用了gzip,请访问http://gzipwtf.com,并输入你的网址(见图7.27)。


27


2.设置gzip
如果你还没有开始使用gzip,那么应该先去读一读网站所在的网络托管服务器的技术支持文档,或者咨询一下技术支持人员,找到开启gzip的最好方法。他们很有可能已经按步骤将指导文档写好了。

**你的网站可以抓住“零耐心”的访客么?

**

Akamai是一家致力于帮助客户更快地把页面传送给访客(无论用户身在何处)的公司,其客户包括Facebook和Twitter。据Akamai所言,网页完全加载完毕的标准时间应当是2秒钟。

如果没有技术支持的话,你也可以按照以下6个步骤自己开启gzip。

① 访问 HTML5 Boilerplate(http://html5boilerplate.com.)。

② 单击页面顶部的资源代码链接,打开https://github.com/h5bp/html5-boilerplate

③ 选择文件列表里的.htaccess文件(https://github.com/h5bp/html5-boilerplate/blob/
master/.htaccess)。


q1

④ 选择并复制文件中和gzip压缩相关的所有文本。在本例中相关的代码块从第152行开始。拖动滚动条,直到找到你需要的文本段落。


q2


⑤ 将内容粘贴到你自己网站的.htaccess文件末尾。

⑥ 将编辑好的.htacess文件上传到你的Web服务器,放在根目录下面。好!这样就完成了!


q3

相关文章
|
13天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
1月前
|
前端开发 开发者 UED
构建响应式Web界面:Flexbox的力量
【2月更文挑战第25天】 在现代网页设计中,创建能够适应不同屏幕尺寸的布局是至关重要的。Flexbox,一种CSS布局模式,提供了强大的工具来轻松地设计和调整灵活的响应式界面。本文将深入探讨Flexbox的核心概念,并通过实例展示如何使用它来构建美观、灵活且易于维护的响应式Web界面。
|
1月前
|
Web App开发 前端开发 JavaScript
构建响应式Web界面:现代前端开发的最佳实践
【2月更文挑战第15天】 在多设备浏览时代,响应式Web设计成为前端开发者的必备技能。本文将深入探讨实现响应式界面的核心概念、技术栈以及工具,帮助读者掌握从布局到交互的全方位解决方案。通过灵活运用CSS框架、媒体查询及JavaScript,开发者可以创建出适应不同屏幕尺寸和分辨率的网站。文章不仅涵盖理论分析,还包含实际案例,确保读者能够将知识应用于实际项目中。
|
19天前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox与Grid布局的深度对比
【4月更文挑战第4天】 在现代前端开发中,构建灵活且响应式的用户界面是至关重要的。随着移动设备浏览量的增加,能够适应不同屏幕尺寸和分辨率的布局技术变得必不可少。Flexbox和Grid是CSS提供的两种强大的布局机制,它们各自以独特的方式解决了响应式设计的挑战。本文将深入探讨Flexbox和Grid的核心概念、使用场景和性能考量,为开发者提供在面对不同布局需求时做出明智选择的依据。
|
1月前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox的力量
【2月更文挑战第28天】 在现代网页设计中,创建能在不同设备上保持一致性和功能性的响应式界面是至关重要的。Flexbox,一个CSS布局模块,为前端开发者提供了强大工具来轻松实现灵活的布局设计。本文将深入探讨Flexbox的核心概念、使用场景以及如何通过它来优化响应式设计流程。
|
1月前
|
前端开发 开发者 UED
构建响应式Web界面:Flexbox与Grid布局的深度解析
【2月更文挑战第28天】 在现代前端开发中,打造灵活且适应不同屏幕尺寸的用户界面是至关重要的。随着移动设备的普及,响应式设计已经成为网页制作不可或缺的一部分。本文将深入探讨两种强大的CSS布局模块——Flexbox和Grid,它们如何简化布局创建过程,并赋予设计师更大的灵活性去构建动态和流畅的响应式界面。通过对这两种技术的比较、使用场景分析以及代码示例,读者将能够更好地理解何时以及如何使用这些工具来提升前端项目的质量和效率。
16 0
|
1月前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox布局的全面指南
【2月更文挑战第28天】 在当今多变的设备屏幕尺寸和分辨率中,创建一个能够适应不同视口的响应式Web界面至关重要。本文深入探讨了CSS Flexbox布局模块,它是一种设计灵活且强大的方式来创建复杂的响应式布局。我们将透过概念解析、关键属性讲解以及实际案例分析,帮助前端开发者掌握Flexbox的核心原理和应用技巧,以实现流畅的页面布局调整和优化用户体验。
|
1月前
|
前端开发 测试技术 开发者
构建响应式Web界面:Flexbox布局的力量
【2月更文挑战第24天】在现代Web开发中,创建能够适应不同屏幕尺寸的响应式界面已成为一项标准实践。Flexbox,一个CSS模块,因其灵活性和强大功能在前端开发者中广受欢迎。本文将深入探讨Flexbox的核心概念、常见用例以及如何利用它来构建美观、灵活且易于维护的响应式布局。通过实例演示,读者将学会如何有效地应用Flexbox技术,提升前端项目的质量和用户体验。
|
1月前
|
开发框架 Dart 前端开发
构建响应式Web界面:Flutter的跨界前端技术
【2月更文挑战第23天】随着移动互联网的飞速发展,响应式Web设计成为现代前端开发的重要趋势。在众多框架中,Google推出的Flutter以其高效的渲染性能、跨平台能力及丰富的组件生态,为前端开发者带来了新的选择。本文将深入探讨如何利用Flutter进行高效、美观的响应式界面构建,同时剖析其与传统前端技术的差异和优势。
|
1月前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox的力量
【2月更文挑战第22天】 在当今多变的互联网景观中,创建一个能够适应不同屏幕尺寸和设备类型的响应式Web界面已成为前端开发者的核心任务。本文将深入探讨Flexbox——一个强大的CSS布局模式,它为构建灵活且易于管理的响应式设计提供了坚实的基础。通过详细解读Flexbox的关键特性及其在实际项目中的应用,我们将揭示如何有效地使用这一工具来提升用户界面的质量和性能。