跳转到内容

处理网站图片时犯错吗

发回2013年,云中发布博客文章标题为 "十大错误处理网站图片.前十大错误仍属实, 我们还想出几分额外点数,我们认为你会发现兴趣

网站图像和视频数继续增长,减载时间并因此产生负用户体验,这对公司都越来越引起关注。文章今年夏天财政时报引用互联网数据测量公司HTTP归档时指出,平均网站目前规模为2.1MB,而两年前为1.5MB最大原因之一是添加视频和摄像头等内容,设计成驱动更多流量访问网站

财政时报-Web减速-图表

文章说明图片说明近63%字节中按内容类型平均页数(1,312KB共2,087KB)视频从远二分录入10%(208KB)。

图片对网站的冲击可大可大, 食用昂贵带宽并增加网站访问者等待图像加载的时间万分二分降低网站总体转换率并归根结底减少收入时,想要完全合情合理优化图像并尽可能多地交付

或多或多错图像, 无法提高网站性能和用户经验。并避免错误:

微软对JPEG-XR网际浏览器和Edge浏览器都同样支持,开发者可能不知道这些格式, 或可能太难向各种浏览器和设备提供不同图像格式结果,他们坚持JPG和PNG格式不变, 不利用现代格式优化网站

如何修复 :转换图像WebPJPEG-XL现代格式,同时调整压缩质量平衡格式并用检测特定浏览器访问每一图像并交付不同版本图像浏览器,可确保用户从视觉质量和文件尺寸优化方面接收最佳图像

PG图像
16.9kbJPG
WebP自动图像
6.9KBWEP

多数开发商依赖GIF图像格式在新闻网站、媒体网站和社会分享网站显示视频短片GIF格式很容易使用简单HTML图像标签嵌入视频剪片,但对抓取电影无效,因为文件大慢加载,特别是在移动设备上加载,结果带宽高成本和CPU高使用率

如何修复 :使用现代文件格式交付并嵌入相同剪片和动画有几种方法,如现代文件格式动画WEPChrome浏览器用户另一种方法应用损耗压缩GIF文件导致视觉质量微小下降,但文件大小大为下降GIF文件也可以转换成MP4或WBM视频格式嵌入剪片和HTML5视频标签多数现代浏览器运行顺利,网站看起来完全相同,但加载速度快得多通过采取这些步骤之一,你将能够大幅压缩文件大小,节省页加载时间,提高用户经验并降低带宽成本。

//www.aaaalireno.com/res/demo/image/upload/kitten_fighting.gif
6.3MBGIF
311KBMP4

现代移动设备与笔记本电脑高设备像素比网站所有者开发者希望网站在这些设备上美化, 嵌入双重分辨率图像多开发商往往向所有用户提供相同尺寸图像正则显示器用户(例如非Retina显示器)必须下载hi-res图像,而他们的显示器只从半分辨率中受益结果是浪费等待页面加载时间并不必要地增加带宽成本

如何修复 :创建对次DPR值的不同分辨率(如正则图像和双分辨率图像)自动检测DPR值网页当前用户浏览器这将使您能向带正则显示器和2x分辨率图像的用户提供正则图像

DPR1.0HTML缩略图

DPR2.0html缩略图

DPR1.0-100-4.6KBDR2.0-200-12.1KB

  1. 浪费浏览器侧重定位
  2. 不必要的高质量JPEGs
  3. 不正确的图像文件类型
  4. 非优化投影
  5. 忘带图像元数据
  6. 直接从服务器发送图像
  7. 逐个传递静态图标
  8. CSS3可用时使用图像
  9. 不正确的图像缓存设置
  10. 在所有交付媒体使用单图像尺寸

发现自己至少做这些错误之一 — — 如果不是更多的话 — — 并可以通过重新评估过程优化处理图像方式而受益吗?

云化能帮助上传存储转换优化交付免费签名并发现我们如何帮助你避免这些问题

回顶

特征邮箱

Baidu
map