CN106126760A - 一种web网页图片优化的方法 - Google Patents

一种web网页图片优化的方法 Download PDF

Info

Publication number
CN106126760A
CN106126760A CN201610810311.3A CN201610810311A CN106126760A CN 106126760 A CN106126760 A CN 106126760A CN 201610810311 A CN201610810311 A CN 201610810311A CN 106126760 A CN106126760 A CN 106126760A
Authority
CN
China
Prior art keywords
picture
web page
select
show
optimizes
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201610810311.3A
Other languages
English (en)
Inventor
沈文策
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Fujian Cnfol Information Technology Co Ltd
Original Assignee
Fujian Cnfol Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Fujian Cnfol Information Technology Co Ltd filed Critical Fujian Cnfol Information Technology Co Ltd
Priority to CN201610810311.3A priority Critical patent/CN106126760A/zh
Publication of CN106126760A publication Critical patent/CN106126760A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明提供一种web网页图片优化的方法，所述方法为：根据不同设备的web网页选择不同格式的图片和不同文件大小的图片进行显示，且对图片响应和图片显示进行优化。本发明保证在各个web网页浏览器下图片的正常显示，减少图片加载的时间，在较低像素的移动端设备下加快加载速度、节省流量。

Description

一种web网页图片优化的方法
技术领域
本发明涉及网页优化技术领域，尤其涉及一种web网页图片优化的方法。
背景技术
图片内容已经占到了互联网内容量的62％，因而对于web性能优化来说，图片是优化的热点和重点。图片的格式选择不正确，在浏览器上的兼容性不好；不同的设备下，图片的尺寸没有相应改变，导致显示不清晰，用户体验不好的问题。
发明内容
本发明要解决的技术问题，在于提供一种web网页图片优化的方法，保证在各个web网页浏览器下图片的正常显示，减少图片加载的时间，在较低像素的移动端设备下加快加载速度、节省流量。
本发明是这样实现的：一种web网页图片优化的方法，所述方法为：根据不同设备的web网页选择不同格式的图片和不同文件大小的图片进行显示，且对图片响应和图片显示进行优化。
进一步的，所述方法进一步具体为：web网页判断是否需要显示动态图片，是显示动态图片，则判断web网页是否只兼容OSX和IOS系统即可，是，则选择APNG格式的图片进行显示；否，则选择GIF格式的图片进行显示；不显示动态图片，则判断是否需要精确保留图片细节，否，则选择JPEG格式的图片进行显示，是，判断要选择的图片是否大于256色位图，是，则选择PNG-8格式的图片进行显示，否，则判断是否需要多阶透明显示，是，则选择PNG-32格式的图片进行显示，否，则选择PNG-24格式的图片进行显示。
进一步的，所述图片响应优化具体为：对网页图片的标签仍然使用img标签；
通过javascript脚本语言获取设备屏幕的视口viewport的尺寸，并将图片的信息存储在网页cookie中，传给一服务器；
服务器根据图片的信息，改变网页代码中img标签的src属性，从而对图片响应进行优化。
进一步的，所述图形显示优化具体为：使用CSS代替图片，
用CSS的设置元素的背景颜色background-image和设置背景图像的起始位置background-position属性，将多个页面上用到的背景图片合并成一个大的图片，将资源内嵌于CSS或HTML中，而不必单独请求，也不用加载多个图片，从而对图片显示进行优化。
本发明具有如下优点：本发明根据不同设备的web网页选择不同格式的图片和不同文件大小的图片进行显示，且对图片响应和图片显示进行优化，从而保证在各个web网页浏览器下图片的正常显示，减少图片加载的时间，在较低像素的移动端设备下加快加载速度、节省流量。
附图说明
下面参照附图结合实施例对本发明作进一步的说明。
图1为本发明方法流程示意图。
具体实施方式
请参阅图1所示，一种web网页图片优化的方法，所述方法为：根据不同设备的web网页选择不同格式的图片和不同文件大小的图片进行显示，且对图片响应和图片显示进行优化。
根据各种图片格式的特点(如下表格1)：
表格1
各个图片格式的特点
颜色丰富的照片，JPG是通用的选择：人眼的结构很适合查看JPG压缩后的照片，可以充分的忽略并在脑中补齐细节。
如果需要较通用的动画，GIF是唯一可用的选择：GIF支持的颜色范围为256色，而且仅支持完全透明/完全不透明；GIF在显示颜色丰富的动画时可能出现颜色不全、边缘锯齿等问题。
如果图片由标准的几何图形组成，或需要使用程序动态控制其显示特效，可以考虑SVG格式：SVG是使用XML定义的矢量图形，生成的图片在各种分辨率下均可自由放缩；SVG中可以通过JavaScript等接口自由变换图片特效，可以完成其中部分元素的自由旋转、移动、变换颜色等
如果需要清晰的显示颜色丰富的图片，PNG比较好：PNG-8能够显示256种颜色，但能够同时支持256阶透明，因此颜色数较少但需要半透明的情景(如微信动画大表情)可以考虑PNG-8；PNG-24可以显示真彩色，但不支持透明，颜色丰富的图片推荐使用(如屏幕截图、界面设计图)；PNG-32可以显示真彩色，同时支持256阶透明，效果最好但尺寸也最大。
其中，所述方法进一步具体为：web网页判断是否需要显示动态图片，是显示动态图片，则判断web网页是否只兼容OSX和IOS系统即可，是，则选择APNG格式的图片进行显示；否，则选择GIF格式的图片进行显示；不显示动态图片，则判断是否需要精确保留图片细节，否，则选择JPEG格式的图片进行显示，是，判断要选择的图片是否大于256色位图，是，则选择PNG-8格式的图片进行显示，否，则判断是否需要多阶透明显示，是，则选择PNG-32格式的图片进行显示，否，则选择PNG-24格式的图片进行显示。
在本发明中，图片尺寸的选择，这里的图片尺寸的选择，是一种响应式图片的实现方法。关于响应式图片的实现原因和必要：在不同的移动设备中一个CSS像素包含的设备像素是不同的；在高DPI(每英寸的像素)上需要使用分辨率高的图片；这使得图片在低DPI下造成不必要的浪费，用户要付出额外的带宽和等待时间。所述图片响应优化具体为：对网页图片的标签仍然使用img标签；
通过javascript脚本语言获取设备屏幕的视口viewport的尺寸，并将图片的信息存储在网页cookie中，传给一服务器；
服务器根据图片的信息，改变网页代码中img标签的src属性，从而对图片响应进行优化。
所述图形显示优化具体为：使用CSS代替图片，
用CSS的设置元素的背景颜色background-image和设置背景图像的起始位置background-position属性，将多个页面上用到的背景图片合并成一个大的图片，将资源内嵌于CSS或HTML中，而不必单独请求，也不用加载多个图片，从而对图片显示进行优化。
总之，本发明根据不同设备的web网页选择不同格式的图片和不同文件大小的图片进行显示，且对图片响应和图片显示进行优化，从而保证在各个web网页浏览器下图片的正常显示，减少图片加载的时间，在较低像素的移动端设备下加快加载速度、节省流量。
虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。

Claims (4)

1.一种web网页图片优化的方法，其特征在于：所述方法为：根据不同设备的web网页选择不同格式的图片和不同文件大小的图片进行显示，且对图片响应和图片显示进行优化。
2.根据权利要求1所述的一种web网页图片优化的方法，其特征在于：所述方法进一步具体为：web网页判断是否需要显示动态图片，是显示动态图片，则判断web网页是否只兼容OSX和IOS系统即可，是，则选择APNG格式的图片进行显示；否，则选择GIF格式的图片进行显示；不显示动态图片，则判断是否需要精确保留图片细节，否，则选择JPEG格式的图片进行显示，是，判断要选择的图片是否大于256色位图，是，则选择PNG-8格式的图片进行显示，否，则判断是否需要多阶透明显示，是，则选择PNG-32格式的图片进行显示，否，则选择PNG-24格式的图片进行显示。
3.根据权利要求1所述的一种web网页图片优化的方法，其特征在于：所述图片响应优化具体为：对网页图片的标签仍然使用img标签；
通过javascript脚本语言获取设备屏幕的视口viewport的尺寸，并将图片的信息存储在网页cookie中，传给一服务器；
服务器根据图片的信息，改变网页代码中img标签的src属性，从而对图片响应进行优化。
4.根据权利要求1所述的一种web网页图片优化的方法，其特征在于：所述图形显示优化具体为：使用CSS代替图片，
用CSS的设置元素的背景颜色background-image和设置背景图像的起始位置background-position属性，将多个页面上用到的背景图片合并成一个大的图片，将资源内嵌于CSS或HTML中，而不必单独请求，也不用加载多个图片，从而对图片显示进行优化。
CN201610810311.3A 2016-09-08 2016-09-08 一种web网页图片优化的方法 Pending CN106126760A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610810311.3A CN106126760A (zh) 2016-09-08 2016-09-08 一种web网页图片优化的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610810311.3A CN106126760A (zh) 2016-09-08 2016-09-08 一种web网页图片优化的方法

Publications (1)

Publication Number Publication Date
CN106126760A true CN106126760A (zh) 2016-11-16

Family

ID=57271617

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610810311.3A Pending CN106126760A (zh) 2016-09-08 2016-09-08 一种web网页图片优化的方法

Country Status (1)

Country Link
CN (1) CN106126760A (zh)

Cited By (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106991162A (zh) * 2017-03-22 2017-07-28 未来电视有限公司 一种网页上的节省网络资源的动画效果的实现方法
CN107194975A (zh) * 2017-02-09 2017-09-22 北京诸葛找房信息技术有限公司 提高手机app下载图片的速度的方法
CN107229717A (zh) * 2017-05-31 2017-10-03 福建中金在线信息科技有限公司 一种信息展示方法、装置及电子设备
CN107679190A (zh) * 2017-09-30 2018-02-09 冯贵良 一种大数据三维显示方法及显示系统
CN109361574A (zh) * 2018-12-17 2019-02-19 广州天懋信息系统股份有限公司 基于JavaScript脚本的NAT检测方法、系统、介质和设备
CN109933740A (zh) * 2019-03-29 2019-06-25 珠海豹好玩科技有限公司 动画处理方法、装置、终端及计算机可读存储介质
CN111930356A (zh) * 2020-08-19 2020-11-13 百度(中国)有限公司 用于确定图片格式的方法和装置
CN113836456A (zh) * 2021-09-23 2021-12-24 桂林长海发展有限责任公司 一种对web前端网页进行性能优化的方法、装置和存储介质
CN114124919A (zh) * 2021-11-29 2022-03-01 中国平安人寿保险股份有限公司 网络状况的检测方法、装置、计算机设备和存储介质
WO2022262560A1 (zh) * 2021-06-17 2022-12-22 北京字跳网络技术有限公司 图像显示方法、装置、设备及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102065106A (zh) * 2009-11-16 2011-05-18 中国电信股份有限公司 Web流量梳理器和终端访问Web网页的方法及系统
CN102737067A (zh) * 2011-04-15 2012-10-17 阿里巴巴集团控股有限公司 输出网页的方法和系统
CN103412928A (zh) * 2013-08-16 2013-11-27 北京乐动卓越科技有限公司 一种在移动终端实现浏览器页面智能响应式布局的方法与装置
CN103500166A (zh) * 2013-08-22 2014-01-08 合一网络技术(北京)有限公司 一种渐进增强的响应式网页设计方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102065106A (zh) * 2009-11-16 2011-05-18 中国电信股份有限公司 Web流量梳理器和终端访问Web网页的方法及系统
CN102737067A (zh) * 2011-04-15 2012-10-17 阿里巴巴集团控股有限公司 输出网页的方法和系统
CN103412928A (zh) * 2013-08-16 2013-11-27 北京乐动卓越科技有限公司 一种在移动终端实现浏览器页面智能响应式布局的方法与装置
CN103500166A (zh) * 2013-08-22 2014-01-08 合一网络技术(北京)有限公司 一种渐进增强的响应式网页设计方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
STEVEN BRADLEY: "《3 Types Of Solutions To Work With Responsive Images》", 13 September 2012 *

Cited By (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107194975A (zh) * 2017-02-09 2017-09-22 北京诸葛找房信息技术有限公司 提高手机app下载图片的速度的方法
CN106991162A (zh) * 2017-03-22 2017-07-28 未来电视有限公司 一种网页上的节省网络资源的动画效果的实现方法
CN107229717A (zh) * 2017-05-31 2017-10-03 福建中金在线信息科技有限公司 一种信息展示方法、装置及电子设备
CN107679190A (zh) * 2017-09-30 2018-02-09 冯贵良 一种大数据三维显示方法及显示系统
CN107679190B (zh) * 2017-09-30 2019-03-15 冯贵良 一种大数据三维显示方法及显示系统
CN109361574B (zh) * 2018-12-17 2021-02-26 广州天懋信息系统股份有限公司 基于JavaScript脚本的NAT检测方法、系统、介质和设备
CN109361574A (zh) * 2018-12-17 2019-02-19 广州天懋信息系统股份有限公司 基于JavaScript脚本的NAT检测方法、系统、介质和设备
CN109933740A (zh) * 2019-03-29 2019-06-25 珠海豹好玩科技有限公司 动画处理方法、装置、终端及计算机可读存储介质
CN111930356A (zh) * 2020-08-19 2020-11-13 百度(中国)有限公司 用于确定图片格式的方法和装置
CN111930356B (zh) * 2020-08-19 2024-03-26 百度(中国)有限公司 用于确定图片格式的方法和装置
WO2022262560A1 (zh) * 2021-06-17 2022-12-22 北京字跳网络技术有限公司 图像显示方法、装置、设备及存储介质
CN113836456A (zh) * 2021-09-23 2021-12-24 桂林长海发展有限责任公司 一种对web前端网页进行性能优化的方法、装置和存储介质
CN114124919A (zh) * 2021-11-29 2022-03-01 中国平安人寿保险股份有限公司 网络状况的检测方法、装置、计算机设备和存储介质

Similar Documents

Publication Publication Date Title
CN106126760A (zh) 一种web网页图片优化的方法
US10445914B2 (en) Method and apparatus for contextually varying imagery on a map
US10540744B2 (en) Flexible control in resizing of visual displays
US9195637B2 (en) Proportional font scaling
US10185702B1 (en) Publisher formatting controls
US7219309B2 (en) Innovations for the display of web pages
CN105335445B (zh) 布局显示方法和装置
CN101699426A (zh) 文档格式转化系统及方法
US20150074518A1 (en) Dynamic simulation of a responsive web page
CN110310226B (zh) 图片的拼接显示方法及系统
US20150103092A1 (en) Continuous Image Optimization for Responsive Pages
CN106095437A (zh) 用户界面从右到左rtl的布局方式的实现方法及装置
US9489757B2 (en) Resizable text backing shapes for digital images
CN104050238A (zh) 一种地图标注方法和装置
CN107707965A (zh) 一种弹幕的生成方法和装置
CN104572967A (zh) 一种在页面绘制图形的方法和装置
CN111309671A (zh) 一种web报表导出PDF的方法、装置及存储介质
CN111190519A (zh) 一种文件及其控件的处理方法、装置、设备和存储介质
CN106445320A (zh) 一种制作和展示电子书内容的方法及装置
CN111399788B (zh) 媒体文件播放方法和媒体文件播放装置
CN116049599A (zh) 一种数据可视化页面的自适应渲染方法、系统及存储介质
US20110055258A1 (en) Method and apparatus for the page-by-page provision of an electronic document as a computer graphic
CN103514616A (zh) 一种降低移动电子杂志文件尺寸的方法
US10831855B2 (en) Adaptive images
CN113703761A (zh) 基于canvas实现office文档在浏览器中预览的方法

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20161116