首页 > 其他分享 >2024-10-16 前端图片加载方式优化(webp)

2024-10-16 前端图片加载方式优化(webp)

时间:2024-10-16 15:44:36浏览次数:6  
标签:10 16 文件大小 2024 webp 格式 加载 优化 图片

把上传的图片文件格式转化为webp图片格式。

前置条件:图片文件存在阿里云oss。

阿里云的对象存储服务(OSS)支持在 URL 中直接指定图片处理参数,这样可以在不下载原始图片到服务器的情况下,直接由 OSS 服务端处理图片。

假设你有一张存在阿里云的图片链接,那么只需要在该链接的末尾加上?x-oss-process=image/format,webp即可优化加载速度。

注意:这个是不直接把图片文件转成webp格式的处理方式,如果后端直接把图片源文件转化成.webp格式则不需要前端处理。

使用webp格式的好处:与 JPEG 和 PNG 相比,WebP 可以在相同的视觉质量下提供更小的文件大小,或者在相同文件大小下提供更高的图像质量。

与webp类似的格式有JPEG XL、AVIF等,后者先比webp在压缩图片质量更强一点,但缺点就是支持的浏览器较少,而由google推出的webp兼容性较强,且为图片格式优化主流。

除了webp外,还有懒加载、预加载、图片算法压缩、图片转base64存CSS、CDN、img标签的现代属性、picture标签

标签:10,16,文件大小,2024,webp,格式,加载,优化,图片
From: https://www.cnblogs.com/iuniko/p/18470113

相关文章

  • 【PCIE738-0】基于PCIe总线架构的半高半长2路QSFP28 100G以太网光纤通道适配器
     板卡概述PCIE738-0是一款基于半高半长PCIE总线架构的2路QSFP28100G以太网光纤通道适配器,该产品为半高PCIe卡,适合于半高机箱的服务器或者工作站。板卡采用Xilinx16nmKintexUltraScale+系列FPGAXCKU5P作为主处理器,具有1组32位DDR4SDRAM作为高速数据缓存单元,板卡支持2路QS......
  • 2024.10.16总结
    本文于github博客同步更新。A:打表发现有决策单调性,考虑人类智慧,每次向后跳\(rand\%200\)个点,若更优则继续跳,然后就过了。正解是这样写的:设\(p[i\)]为当前层的最优决策点,把决策按顺序加入,同时更新\(p[i]\)把相同的\(p[i]\)合并成一个点,对这些点维护栈,每加入一个决策......
  • Oracle 19c OCP 认证考试 083 题库(第2题)- 2024年修正版
    【优技教育】Oracle19cOCP083题库(Q2题)-2024年修正版考试科目:1Z0-083考试题量:85道(线下)通过分数:57%以上考试时间:150min(线下)本文为(CUUG原创)整理并解析,转发请注明出处,禁止抄袭及未经注明出处的转载。原文地址:http://www.cuug.com.cn/ocp/083kaoshitiku/38531279872.ht......
  • (接上篇问题回答)OWASP Top 10 漏洞详解:基础知识、面试常问问题与实际应用
    1.SQL注入面试常见问题什么是SQL注入? SQL注入是一种网络安全漏洞,攻击者通过向SQL查询插入恶意代码,来干扰应用程序的数据库查询,导致未授权的数据访问或数据操纵。如何防止SQL注入? 防止SQL注入的方法包括:使用预编译的SQL语句(PreparedStatements)。使用ORM工具。严格验证和......
  • 10月报名 | 海克斯康ODYSSEE平台:AI/ML在仿真中的应用培训
    您好!感谢您长期以来对优飞迪科技与海克斯康的关注与支持。我们诚邀您参加10月24日-25日的海克斯康ODYSSEE平台:AI/ML在仿真中的应用培训培训,本次培训将为您带来ODYSSEE模块、功能及应用案例介绍,ODYSSEECAE功能培训等精彩内容,并辅以联合仿真实操帮助您更好了解ODYSSEE这款跨学......
  • 【LRC2024】桌面图像编辑和管理软件和安装步骤(附百度云安装包)
    目录一、软件简介1.软件概述2.主要功能二、系统要求1.最低系统要求2.推荐系统要求三、安装步骤1.获取安装包2.运行安装程序Windows系统Mac系统3.完成安装Windows系统Mac系统一、软件简介1.软件概述AdobeLightroomClassic(简称LRC)是一款专为数码摄......
  • 2024京东双十一每天三次红包入口在哪里
    京东APP首页‌:打开京东APP,进入首页即可看到双十一红包的入口。‌领取时间‌:从2023年10月23日20:00:00到2023年11月11日23:59:59,持续20天。‌红包面额‌:最高可达11111元,还有可能抽到‌品类东券、‌店铺券或‌京东支付券。2024淘宝双十一24888超级红包领取地址http://www.......
  • 跨店每满300元减50元怎么算 2024京东双11满减规则
    1、预售商品参加跨店满减的门槛=定金+尾款(尾款=预售价-定金-付定立减额度)。举个例子:商品的预售价格是250元,商品定金是50元,付定立减30元,则尾款价格为170元,参与跨店满减的凑单的金额为220元(50+170)。京东双十一超级红包领取地址http://www.adiannao.cn/82、跨店满减的凑单......
  • 2024年淘宝双十一活动时间安排表 淘宝双十一超级红包领取地址
    红包发放时间(第一阶段):10.14晚7点首发-10.24;红包使用时间:10.14晚8点-10.2119:59/10.21晚8点-10.24红包发放时间(第二阶段):10.24晚8点首发-11.11;红包使用时间:10.31晚8点-11.11淘宝双十一超级红包领取地址http://www.adiannao.cn/7京东双十一超级红包领取地址http://w......
  • 【西安理工大学主办,EI稳定检索】第三届航空航天与控制工程国际学术会议 (ICoACE 2024)
    会议目录1、会议重要信息2、会议论文出版3、会议征稿主题4、参会方式1、会议重要信息第三届航空航天与控制工程国际学术会议(ICoACE2024)20243rdInternationalConferenceonAerospaceandControlEngineering会议时间:2024年11月29日-12月1日会议地点:陕西......