24小时咨询电话:0571-8802321710年专业网络服务供应商

资讯中心

- 直击网站建设第一现场,掌握全球化的消息 -

当前位置 : 首页 > 新闻中心 > 建站知识 > 高端网页制作,优化图片的6个技巧

高端网页制作,优化图片的6个技巧

2021-05-31 分享 浏览次数:2244次

以下是高端网页制作时的处理图片的一些简单的小技巧。

1. 将图片保存成Web所用格式

在网页设计中,你必须确保你的图像大小越小越好。当然,当你想要图片完好显示时可以抛弃这条原则。在Photoshop中创建图像的完美方法便是平衡质量与文件大小。网页设计师经常犯的一个错误便是使用“另存为”命令,而不是使用“存储为Web所用格式”。

“存储为Web所用格式”可以将图像保存成基于网页设计优化过的格式,包括图像质量、图像分辨率、浏览器兼容性和文件大小。这一命令会有一个对话框,你可以用来微调你的图像。当你调整图像的设置时,它会显示出文件的大小和图像的质量。

相比之下,“另存为”对话框则不具有这么多选择,并且其往往会保存成较大的图像。

下面是相同的一幅图像使用“另存为”和“存储为Web所用格式”分别保存,请注意二者保存的文件大小有着明显的区别。

2. 考虑使用Web安全色

Web安全色在大多数浏览器和显示器上都能够正确显示,这确保了你的网页无论在哪里看起来都有相同的效果。

下面是确保你使用的颜色为Web安全色的两个简单方法。

“只有Web颜色”选项

在拾色器窗口的左下角勾选“只有Web颜色”选项。这将使窗口只显示出Web安全色。

将颜色转换为Web安全色

在拾色器窗口中点击小方块,可以将任何颜色转换成Web安全色。

3. 考虑使用JPG的“逐行扫描”选项

JPG文件格式是摄影和高分辨率图像的理想选择。根据你的目标受众,逐行扫描有时候是个不错的选择。在网站加载时,这种格式的图像会逐渐呈现(即使在现代宽带连接的互联网时代,这种等待时间的类型已不是问题了)。这使用户在图像完全加载之前便可快速预览到,令人感觉网页反应更快。

4. 将图像保存成透明的PNG格式

当你需要透明的图片时,PNG格式是你的最佳选择。

大部分主流浏览器均会支持透明的PNG格式,如果你不得不迎合IE6时,就需要注意了:PNG格式有些透明部分在IE6中会显示成灰色。也有办法来解决这个问题(如IE PNG修复 Javascript库),但是实现起来会比较麻烦。

5. 将动态图片保存成GIF格式

GIF图像格式虽然大多数情况下可以被PNG格式所取代,但有一点仍然很有用。虽然这种格式相对PNG和JPG来说显得粗糙,但GIF格式本身有个非常给力的功能,就是支持动画。

虽然有一个扩展名为APNG的PNG图片格式(其代表了便携网络图形动画),但很少有浏览器支持这种格式。如果你需要在PNG和GIF间选择,通常PNG是个更好的选择,除非你需要做成动态图片。

6. 请注意“下载时间”这一信息

确保一个站点快速加载并且看上去很漂亮,这是非常重要的。这也体现了保存和优化图片的重要性。如下图所示,看看在文件保存选项中一个简单的改变可以对图片大小产生怎样的影响。

比较好的方法就是:降低图像质量,直到你发现图像显示质量明显降低。当你在优化图像时,要时刻关注“下载时间”,这将会显示在“存储为Web所用格式”对话窗口的左下角。像下图那样,你可以看到,在当前设置下,你所保存的图片在DSL网络连接状态下下载时间大约为2秒。

以上就是有关高端网页制作的一些分享。

最新网站案例

洞悉市场趋势演变让传播回归社会

    免费获取网站建设与网络推广方案报价

    • 关于我们

      杭州帷拓科技有限公司,是一家新型的全案网络开发公司,作为以互联网高端网站建设、APP开发、小程序开发为核心的专业网络技术服务供应商,帷拓科技致力于全面分析市场环境、衡量与预测市场需求、整合区别于行业竞争对手的绝对优势,结合品牌理念深度挖掘项目优势和产品价值,提升客户品牌认知、认可度。

    • 我们的客户

      帷拓科技历经十年沉淀,与国内外上千家客户达成合作关系,其中稳定合作的公司有:浙江华为、浙江移动、浙江5G产业联盟、浙江省社科院、绿城足球俱乐部、娃哈哈双语学校、健康中国杭州峰会、科雷机电等,帷拓科技始终坚持“帷有专业,才能拓展无限”的服务理念,坚持“认真坚持细节”的优质服务理念,不断完善自身,成就企业,最终实现共赢。

    • 我们的业务

      帷拓科技主营业务范围包含互联网高端网站建设、APP开发、小程序开发、商城网站建设、公众号运营以及数字营销等,涵盖了服务、房产、数码、服装、物流贸易等行业,根据品牌现状,为每个客户量身定制项目整体服务方案,以敏锐的市场洞察力、创新的市场策划能力,全面把握市场变化,为客户实现从企业到消费者的价值转换。

    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur