網頁設計對于圖片的運用有哪些特殊要求？

2016.09.23

导读：图片是页面設計中不缺少的元素，它于文字和色彩并称为网页三大语言。在网页設計中，选择适合的图片格式不但可起到美化和补充网页信息的效果，还可以节省网页的下载时间、有效的减少服務器的负担。网页上的图片例用主要与图片的格式和风格有关。

网页設計中常用的图片格式有JPG、GIF、PNG等格式，一般設計者都知道每种格式的具体概念，但很少有人深入的去了解为什么同一种格式可以用在这里，而在那里和却让输出结果看起来变得无法忍受。图片格式的使用除了影响页面的美观外和設計品质，还会直接影响页面的打开速度度和用户的浏览效果。想要解决“网页設計对于图片的运用有哪些特殊要求”的问题可以从不同图片格式的特点入手，然后根据网页設計的要求进行不同格式图片的使用。

標准網頁廣告尺寸規格

數據來源：分形科技整理

网页設計所需要的图片是需要上传到网站的，所以要弄清楚什么样的图片更适合Web页面非常必要。对于网页設計中常用图片格式JPG、GIF、PNG的说明如下：

JPEG格式圖片

JPEG格式，也就是我們最为常见的JPG格式。JPEG是一种很典型的使用破坏性压缩图像的的图片格式，意思就是每进行一次JPEG格式的存档动作，图片的内容都会遭到破坏，优点是在我們的肉眼是看不出来的情况下有效的降低图片文件。这样的特性使和JPEG格式的图片适合存像素色彩丰富的图片，而不适合用来储存线条图、图标或文字等等有清晰边缘的图片。

GIF格式圖片

Gif格式的圖片在許多特性與表現上都與JPEG有著相對的特性。GIF的圖片格式使用的是無損壓縮格式存儲。缺點是：限制了圖像的色彩表現能力、能夠有效地節省檔案尺寸。GIF格式只擁有256色，這就意味著當你的圖片中出現的色彩在256色以內時，使用GIF格式存儲可以得到相當好的輸出質量、同時兼顧了檔案大小。

所以，我們常用GIF格式来地蚝图标、UI接口、线条插画、文字等图像的存储和输出。此外，GIF格式还支持透明背景、以及动画图档格式，几乎100％的浏览器都支持GIF格式。

PNG格式圖片

PNG格式圖片是一种体积小，无损压缩的图片存储格式。PNG格式与GIF图像类似，采用8位调色板将RGB彩色图像转换为索引彩色图像。PNG格式图像在浏览器上采用流式浏览，允许连续读出和写入图像数据。PNG格式图像可以使彩色图像的边缘能与任何背景平滑地融合，从而彻底地消除锯齿边缘，这是PNG格式图像特有的功能。

JPEG格式和GIF格式圖片差异说明

大部分的情况下，設計师不仅要根据网页和图片的需求来选择最适合的格式，还需要根据用户浏览器的支持度情况来选择图片格式。这南需要具体情况具体分析，一般层次丰富且颜色较多的图像我們会采用JPG存储。颜色简单对比强烈的图像则采用PNG格式存储。当然，并不是所有的图片都适用这个原则，实际运用中还有一些特殊情况，如有些图像虽然色彩层次丰富，但图片尺寸很小，如果图像上包含的颜色数量是有限时，我們也可以尝试采用PNG格式进行存储。有些使用矢量工具绘制的图像，由于绘制时采用了较多的滤镜特效，所以形成了丰富的色彩层次，这种情况就需要采用JPG格式进行存储了。另外，用于页面结构的基本视觉元素，如网页中背景、按钮、导航的背景等尽量用PNG格式进行存储，这样可以更好的保证設計品质。

注重內容與形式相結合的視覺元素

在网页設計时要避免过多无意义的视觉元素堆砌，将産品的特点和受众的需求容入到設計中去。在选择图片时同样也需要与网页的整体风格相吻合，让图片融入到页面和内中去，只有这样才能让用户在视觉上产生美感。

图片設計风格的选择

试想一下，一个蓝色调整为主体风格的页面出现一张大黄色的图片会是什么样的效果。网页設計在选择图片时需要根据网页整体风格和産品的需求进行，如活动推广页面可以利用过大幅的背景图去进行意境的传达和气氛的渲染，这样做的一个好处就是能把需要用到图片的视觉元素进行集中的压缩优化，同时又不会由于图片太影响用户的访问速度)。

分形科技認爲

一个好的网页视觉設計最重要是意境的传达和气氛的渲染，这两点对于表达网站主题和提升客户体验起到平衡作用。使用高光、阴影等滤镜效果的可以达到质感上的统一，从而更好的去传达意境和渲染气氛，但一定要适度。当出现为了提升页面的加载速度达到更好的用户体验，不得不对設計进行优化时，可以利用我們对图片格式知识掌握就可以更有目的性的去进行优化。

400-7808-893 / 010-64913142 我想要個更針對我需求的方案

上一篇文章：快看！如何为动漫网站打造出酷炫的网页設計... 下一篇文章：如何運用心理學技巧提高網站體驗

看過此文章的人也看過

日韩一级一片