`
qishuai
  • 浏览: 39345 次
  • 性别: Icon_minigender_1
  • 来自: 南通
社区版块
存档分类
最新评论

网页设计对图片的选择应用

阅读更多
最近在搞网站,自己做的话,对大小很敏感,太大了,增大服务器压力嘛,能省点就省点。
下面说下,前端开发中我们常用的几个图片格式jpg、gif、png
JPG格式特点
透明性
它并不支持透明。
动画
它也不支持动画。
损耗性
除了一些比如说旋转(仅仅是90、180、270度旋转),裁切,从标准类型到先进类型,编辑图片的原数据之外,所有其它操作对jpg图像的处理都会使得它的质量损失。所以我们在编辑过程一般用png作为过渡格式。
隔行渐进显示
它支持隔行渐进显示(但是ie浏览器并不支持这个属性,但是ie会在整个图像信息完全到达的时候显示)。
由上可以看出Jpeg是最适web上面的摄影图片和数字照相机中。
Gif格式特点
透明性
Gif是一种布尔透明类型,既它可以是全透明,也可以是全不透明,但是它并没有半透明(alpha 透明)。
动画
Gif这种格式支持动画。
无损耗性
Gif是一种无损耗的图像格式,这也意味着你可以对gif图片做任何操作也不会使  得图像质量产生损耗。
水平扫描
Gif是使用了一种叫作LZW的算法进行压缩的,当压缩gif的过程中,像素是由上到下水平压缩的,这也意味着同等条件下,横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*500的图片更加小
间隔渐进显示
Gif支持可选择性的间隔渐进显示
由以上特点看出只有256种颜色的gif图片不适合照片,但它适合对颜色要求不高的图形(比如说图标,图表等),它并不是最优的选择。
Png格式特点
类型
Png这种图片格式包括了许多子类,但是在实践中大致可以分为256色的png和全色的png,你完成可以用256色的png代替gif,用全色的png代替jpg
透明性
Png是完全支持alpha透明的(透明,半透明,不透明),尽管有两个怪异的现象在ie6(下面详细讨论)
动画
它不支持动画
无损耗性
png是一种无损耗的图像格式,这也意味着你可以对png图片做任何操作也不会使  得图像质量产生损耗。这也使得png可以作为jpeg编辑的过渡格式
水平扫描
像GIF一样,png也是水平扫描的,这样意味着水平重复颜色比垂直重复颜色的图片更小
间隔渐进显示
它支持间隔渐进显示,但是会造成图片大小变得更大

其它图片格式与PNG比较
众所周知GIF适合图形,JPEG适合照片,PNG系列两种都适合。
相比GIF
PNG 8除了不支持动画外,PNG8有GIF所有的特点,但是比GIF更加具有优势的是它支持alpha透明和更优的压缩。所以,大多数情况下,你都应该用PNG8不是GIF(除了非常小的图片GIF会有更好的压缩外)。
相比JPEG
JPEG比全色PNG具有更加好的压缩,因此也使得JPEG适合照片,但是编辑JPEG过程中容易造成质量的损失,所以全色PNG适合作为编辑JPEG的过渡格式.

更多关于PNG
PNG8
256色PNG的别名
PNG24
全色PNG的别名
PNG32
全色PNG的别名
Png8的在ie中的怪异表现:
半透明的png8在ie6以下的浏览器显示为全透明。
Alpha透明的全色PNG(png32)在ie6中会出现背景颜色(通常是灰色)。
由上面可以总结:
(a)全透明的png8可以在任一浏览器正常显示(就像gif一样)。半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明,其它浏 览器都能正常显示半透明。这个bug并不需要特殊对待,因为在不支持半透明的浏览器下只是显示为全透明,对用户体验影响不大,它反而是透明gif的加强 版。
(b)第二个bug没有什么好的方法解决,只能通过影响性能的方法AlphaImageLoader与需要加特殊标签(VML)。
因此得出结论就是:请使用PNG8。
Png8的软件问题:
Photoshop只能导出布尔透明的PNG8。
Fireworks既能导出布尔透明的PNG8,也能导出alpha透明的PNG8.
pngquant与pngnq这两个命令行软件可以转换全色png为256色的png8。
http://www.jqueryba.com/27.html
分享到:
评论

相关推荐

    网页设计规范(图片格式)

    网页设计规范是构建高效、美观且用户友好的网站的关键元素,它涵盖了多个方面,包括图片格式的选择和使用。本文将详细探讨网页设计中的图片格式规范,以及这些规范的重要性与实施标准。 1. 规范介绍 网页设计规范...

    网站开发与应用页面设计的图片

    1. **界面设计**:界面设计是网页设计的基础,涉及到网页的整体布局、颜色搭配、字体选择等。图片在界面设计中起到点缀和强化信息的作用,例如背景图、图标、按钮等,都能提升用户对网站的第一印象。 2. **用户体验...

    ASP动态网页设计应用教程

    动态网页设计的核心在于其“动态”属性,不仅能展示动态GIF图片,更重要的是它具备交互性,可以根据用户的输入和选择实时响应和变化。传统的静态HTML网页,内容固定,维护、查询和修改较为困难,而ASP结合数据库技术...

    _计算机图像处理技术在网页设计中的应用分析.pdf

    网页中信息的展现形式主要包括图像、文字、音视频等,而图像处理技术在提高网页设计质量和满足设计师对图像要求方面起到了至关重要的作用。本文将详细探讨计算机图像处理技术在网页设计中的具体应用,包括去除噪声...

    网页设计图片缩略 素材中国 网页设计大师

    在"网页设计图片缩略 素材中国 网页设计大师"这个主题中,我们可以深入探讨关于网页设计中的图片优化和素材选择的重要知识点。 首先,图片缩略图是网页设计中的关键元素。它们通常用于预览大图或者内容列表,可以...

    网页设计课件 网页设计1:网页设计入门 网页设计10:应用程序

    "网页设计1:网页设计入门"部分,我们将探讨网页设计的基本概念,包括网页的组成元素、颜色理论、字体选择、版面设计原则以及网页设计的目标与目的。了解这些基础知识是构建吸引人且用户友好的网站的前提。此外,...

    网页设计与制作代码

    在"网页设计与制作教学代码"中,案例源代码很可能是对这些概念的实际应用展示。学生可以通过分析和修改这些代码,理解如何将HTML和CSS结合,创建出功能完备、视觉吸引力强的网页。例如,一个简单的网页可能包含一个...

    web课程设计网页设计源代码

    在本资源中,"web课程设计网页设计源代码"是一个包含网页设计技术的项目,适合用于教学或自我学习,特别是对于课程设计来说非常有价值。这个压缩包提供的内容主要是基于HTML、CSS和JavaScript的网站开发源代码,同时...

    网页设计课程设计

    网页设计课程设计是一个涵盖多个领域的综合性项目,旨在让学生掌握网页设计的基本原理和技术,同时锻炼他们的实践能力和创新思维。在这个过程中,学生将学习如何利用HTML、CSS、JavaScript等核心技术来创建功能丰富...

    网页设计资料 网页设计模板

    本资源包“网页设计资料 网页设计模板”聚焦于网页设计模板,这是许多设计师和开发者快速创建网站时的重要工具。模板通常包含了预设的HTML结构、CSS样式和有时甚至包括JavaScript代码,使得非专业人员也能轻松搭建...

    820多张网页设计背景图片

    "820多张网页设计背景图片"这个资源提供了丰富的素材,使得设计师们在创作过程中能够有更多的选择。 首先,我们要明白背景图片在网页设计中的作用。它们可以作为页面的底纹,增强整体的视觉效果,比如使用渐变、...

    div+css网页设计案例图片资源

    本资源包“div+css网页设计案例图片资源”显然提供了与这种技术相关的图像素材,可能是为了帮助学习者或设计师理解如何将Div和CSS应用于实际的网页设计项目。 1. **Div元素的理解与应用**: - Div元素是一个通用...

    信息可视化在网页设计中的应用-网页设计-设计.pdf

    信息可视化在网页设计中的应用 信息可视化是指利用计算机支撑的、交互的、对抽象数据的可视化表示,来增强人们对这些抽象信息的认知的方法与技术。信息可视化的过程可以分为三个阶段:源数据处理、可视化图和视图...

    网页设计与制作实验报告.doc

    4. 选择合适的制作工具:选择合适的网页设计工具,例如 Dreamweaver、Photoshop 等。 5. 认识网页设计工具 Dreamweaver:了解 Dreamweaver 的启动、窗口组成和基本操作。 实验内容: 在实验中,我们使用 ...

    3D图片展示效果,网页设计常用

    结合上述信息,可以预见,将3D图片展示效果应用于网页设计,将为网站带来诸多益处。然而,设计师在实施此类技术时,也必须考虑到实际性能和兼容性问题。因为并不是所有用户的设备和浏览器都对3D技术提供完美支持,...

    _以HTML 5 CSS3 jQuery为基础的响应式布局网页设计探讨.pdf

    传统的网页设计虽然能够满足人们的基本应用要求,但在应用灵活性和适用性等方面存在着比较大的缺陷。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。 HTML5 是构建 Web 内容的一种语言描述...

    _JavaScript在动态网页设计中的应用研究.pdf

    JavaScript是一种在网页设计中广泛应用的脚本语言,尤其在动态网页设计中发挥着至关重要的作用。该语言由Netscape公司推出,最初基于LiveScript,后来融入Java的设计思想,但语法上仍然保持与Java的相似性,同时具备...

    APP应用设计网页模板

    在"APP应用设计网页模板"的压缩包中,虽然没有提供具体的文件列表(这里仅给出"chahua3338"这一名称,无法进一步解读),但通常这类资源会包含HTML文件、CSS样式表、JavaScript脚本、图片和其他媒体资源。...

    Dreamweaver CS5网页设计与制作教程

    此外,使用CSS样式美化网页(DW CS5 ch08-应用CSS样式美化网页.ppt)和应用CSS+Div进行复杂布局(DW CS5 ch09-应用CSS+Div灵活布局网页.ppt)的内容,使学习者能够理解并掌握CSS在网页设计中的重要性,从而提升网页...

Global site tag (gtag.js) - Google Analytics