前端vs图片：1 图片放在哪里？一个好的图片oss能带来什么提升？

最新推荐文章于 2024-01-05 14:47:45 发布
最新推荐文章于 2024-01-05 14:47:45 发布
阅读量2k 收藏 4
点赞数 1
分类专栏： 前端 vs 图片 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/loulanyijian/article/details/121982990
版权

首先给出第一个问题的答案：所有的图片，包括前端切图使用的图片，以及接口返回的业务图片，都应当放专门的图片oss服务器上。好处有如下一堆。

减少项目的大小

普通的toB/toC项目

如果在项目中有一堆图片文件，每次打包的时候，都会重新拷贝、拉取、上线一遍，多少会影响发版效率

小程序类项目

这个对项目包大小要求更加苛刻，小程序不分包的话，限制2M，而一个图片，很可能比一堆js+css都要大

小程序项目包的大小，直接影响了小程序启动的白屏时间

减少使用项目内图片的复杂性

如果图片是在项目内部的，使用的话要么是通过import、require引入，要么是通过相对路径去引用。

import defaultPic from '@/theme/assets/noDataImg.png';

这两种方法，都会带来一定的复杂性

  • coding的时候需要注意路径的引入
  • webpack等构建工具打包的时候，会多花时间来处理这些引入文件
  • 而且使用不同框架的时候，会有不同的处理方式，某些比较复杂的场景，还会造成发布到线上之后，图片地址丢失的问题。

而使用了图片oss之后，图片都是返回的绝对地址，这个时候，你就可以直接在项目中一把梭了

借助oss的cdn节点能力

对于普通的toB/toC项目，前端服务器可能就是2、4、6、8台不等，基本上能到8台服务器的，已经是算不小的前端项目了。而oss服务器，都配置了基本的cdn的内容分发，全国多个节点可以加速访问，从这点来看，图片加载效率可以获得极大的提升。

基本上来说，图片oss都非常高效+稳定，图片放上去之后，可以放心的访问

图片oss设置的缓存时间

前端的项目服务器，通常也会通过Nginx来设置静态资源的缓存时间，但是为了在发版的时候能够快速更新，这个缓存的时间，也就是5分钟或者10分钟。

这个时候，图片oss的缓存就大不相同了，之前用过的两个图片oss，一个缓存时间是365天，另外一个的缓存时间略短，30天。这种按月/年级别的缓存时间，对比按分钟级别的缓存，差异很明显。

不过这里的图片oss缓存时间过长，对前端更新图片稍微带来点问题

  • 如果是上传之后自动生成不同名称的图片oss，则需要前端项目中替换图片链接
  • 如果是上传之后覆盖原始图片链接的那种oss，需要先将本地图片修改一下名字，然后再行上传图片，获取新的图片链接，前端进行替换

图片oss的多域名处理

大家都知道，浏览器加载同一域名的资源，会有并发的限制。因此，图片oss，通常不只一个域名；但考虑到dns解析的时间，域名也不会过多，据观察，域名大多在4-6个。

而且，网站在请求相同域名静态资源的时候，也会把cookie带上去，这种携带是多余的，会造成客户端+服务端流量的浪费，因此，图片oss的域名，是与主站不同的，减少了cookie的额外传输。

某东的PC端首页抓包
在这里插入图片描述
某没落视频网站
在这里插入图片描述

图片oss对图片的url参数处理

图片服务器，会直接在图片url上添加参数，进行压缩、转换、降质等一系列处理，此处及其重要！！！

图片缩放

我们经常遇到这种场景，一个图片，在列表中需要缩略图（比如需要展示为80x80），点击之后需要展示原始图片（比如1280x960）。

这个时候，如果在列表中均按原始图片返回的话，性能+流量上，都会有问题。

让后端接口返回两个地址？这个倒是可行，不过比较麻烦，如果哪天你的列表缩略图尺寸修改了呢？

这个时候，如果你的图片oss支持图片缩放，那就再简单不过。

还是以某东为例，如下三张图片，分别是首页、list页、商详页里面的图片，内容完全一致，但尺寸不一样。
100x100
我们抓包看一下此三张图片地址：
https://img11.360buyimg.com/babel/s100x100_jfs/t1/119581/20/16562/153554/5f6429c1Edb18bfdd/71bcaa1e46916c14.jpg
https://img10.360buyimg.com/babel/s200x200_jfs/t1/119581/20/16562/153554/5f6429c1Edb18bfdd/71bcaa1e46916c14.jpg
https://img11.360buyimg.com/babel/jfs/t1/119581/20/16562/153554/5f6429c1Edb18bfdd/71bcaa1e46916c14.jpg

可以看到，图片名称相同，只是在地址上有处理，分别为： /s100x100_jfs/ /s200x200_jfs/ /jfs/，意思是将同一张图片，按不同的尺寸返回，前两者是返回了对应的尺寸，第三种是直接返回了原图。

图片大小对比也很明显：8.2kb vs 21.9kb vs 154kb

格式转换

图片最近几年有一种流行的图片格式——webp，该格式质量好、压缩比高，是个性能优化的利器，后面文章也会讲到webp。

但是webp格式不像jpg、png那样普遍，需要经过转换或者处理才能是webp格式。

之前看过一些webp的实践文章，不少的文章篇幅是讲如何使用node等工具，将原来的jpg/png图片，转换成webp格式的。殊不知现在主流的图片oss，早已经支持了webp格式的参数转换。

以上面大图片为例，https://img11.360buyimg.com/babel/jfs/t1/119581/20/16562/153554/5f6429c1Edb18bfdd/71bcaa1e46916c14.jpg，如果需要转换成webp格式的话，十分简单，在url后面添加上 .webp即可，地址为：https://img11.360buyimg.com/babel/jfs/t1/119581/20/16562/153554/5f6429c1Edb18bfdd/71bcaa1e46916c14.jpg.webp

大家可以抓包看一下图片大小的对比： jpg vs webp ：154kb vs 89.8kb，也是比较明显的对比

降低质量加载

大家都知道jpg图片是有损压缩，是以一部分图片质量的损耗来换取图片大小的降低。为此，图片oss通常也会支持jpg图片格式的降质

还是以上面大图片为例，https://img11.360buyimg.com/babel/jfs/t1/119581/20/16562/153554/5f6429c1Edb18bfdd/71bcaa1e46916c14.jpg，现在把它的质量降低为80%，在url后面添加上!q80就可以，地址为：https://img11.360buyimg.com/babel/jfs/t1/119581/20/16562/153554/5f6429c1Edb18bfdd/71bcaa1e46916c14.jpg!q80。

图片大小的对比： 原始jpg vs 80%质量jpg ：154kb vs 120kb，压缩成果也比较明显。

不过这个是靠损失质量来达到的压缩图片目的，质量降低越多，图片会越模糊，因此不能将质量压到太低

其余url参数处理
  • 图片水印
  • 矩形、圆形裁剪
  • 旋转
  • 获取图片信息，宽高、大小、格式等
  • 模糊、亮度/对比度处理等

如上的一些处理，平常业务开发可能遇到比较少，但如果真的遇到的话，相对比其余的前后端处理方式，直接通过url上挂载参数来处理图片，简直不要高效的太多！

看看大厂们的做法

目前很多大厂，都有自己的云，基本上都会自己做图片服务器，不同厂家的图片oss，基本上都实现了上面的那几个核心的图片处理。

比较知名的云服务商，对图片处理更是标配，如下图的阿里云、七牛云。
在这里插入图片描述
在这里插入图片描述

结尾

图片oss的使用，完全是好处没有坏处么？

也有，因为图片上了云端了，本地可能不会存储，因此对图片的管理、复用，比图片放在前端项目中要麻烦一些。

但是，也仅有这个问题而且，跟oss的好处相比，这点还是微不足道的。

因此，大力使用吧！

loulanyijian
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
阿里云团队畅谈图片服务架构演进
流浪的虾壳
07-22 5217
现在几乎任何一个网站、Web App以及移动APP等应用都需要有图片展示的功能，对于图片功能从下至上都是很重要的。必须要具有前瞻性的规划好图片服务器，图片的上传和下载速度至关重要，当然这并不是说一上来就搞很NB的架构，至少具备一定扩展性和稳定性。虽然各种架构设计都有，在这里我只是谈谈我的一些个人想法。 对于图片服务器来说IO无疑是消耗资源最为严重的，对于web应用来说需要将图片服
前端压缩裁剪图片并上传阿里oss.zip
03-24
根据公司业务需求在前端裁剪对应的图片，并压缩图片，然后上传到阿里云OSS存储！ 找了很久的资料，并没有发现合适的整合dome，于是自己花了一下时间整合了一下， 其中包括了对应的裁剪，压缩，上传有对应的注释...
前端项目图片放项目内和服务器的区别
weixin_38984030的博客
06-21 1040
1、放本地会增加包，增加资源加载时间、白屏时间 2、图片服务器会提供各种功能和优化，有针对性的缓存方案，减少带宽成本，提高访问速度 3、上传图片服务器后在项目内引入方便，放本地weekpack打包后路径会改变有风险 4、分担web服务器的负载，提高服务的稳定性总的来说，放在专门的图片服务器好处还是很多的，但如果是小而不多的图片放本地也无妨。......
图片上传（oss）
多喝凉白开
08-10 184
第一次写，不作为技术讨论，只是想记录一下代码。 不会描述，直接贴代码。 好了，就这样，第一次写，不足之处，大家多多指教！
OSS存储图片
纵横江湖二十年的博客
06-06 1502
1，html的form表单 <form action="/oss" id="oss"> <input type="hidden" name="UPhoto1" id="headImg"> <input type="file" name="mfile1" id="upload" accept="image/*" class="input-file" multiple="multiple"> &lt
图片存储阿里云oss
qq_39095899的博客
12-29 1923
阿里云oss存储 在开发中我们很经常遇见需要上传图片的功能，图片上传功能开发简单，但问题是我们一般把图片存在到哪里呢？ 有下面几种解决方案 1.直接将图片保存到服务的硬盘 优点：开发简捷，成本低 缺点：扩容难 2.使用分布式文件系统进行存储（比如fastDfs） 优点：容易实现扩容 缺点：开发复杂度稍大（尤其是开发复杂的功能） 3.使用nfs做存储（没操作过） 优点：开发较为便捷 缺点：需要有一定的运维知识进行部署和维护 4.使用第三方的存储服务 优点：开发简单，拥有强大功能，免维护 缺点
前端js获取阿里云oss私有图片加参数及生成签名signature的sdk
08-30
前端js获取阿里云oss私有图片加参数及生成签名signature的sdk
java获取网络图片上传到OSS的方法
08-26
首先，我们需要将下载好的图片上传到OSS，然后使用OSS的SDK来生成图片的URL。 完整代码 以下是完整的代码： ```java public class OSSUpload { public static String getTomcatPath() { String nowpath; String...
阿里云实验录屏：使用OSS对图片进行基本处理
08-23
阿里云实验录屏：使用OSS对图片进行基本处理
Java微信小程序oss图片上传的实现方法
08-25
微信小程序图片上传是微信小程序开发中一个基本的功能，通过wx.uploadFile()方法可以将图片上传到服务器，以下是微信小程序图片上传的示例代码： ```java wx.uploadFile({ url: '*',//上传的路径（Java后台路径） ...
图片存储解决方案--阿里云OSS
那就这样吧~
04-03 7078
图片存储解决方案 实现图片上传服务，需要有存储的支持，那么我们的解决方案将以下几种： 直接将图片保存到服务的硬盘 优点：开发便捷，成本低 缺点：扩容困难 使用分布式文件系统进行存储 优点：容易实现扩容 缺点：开发复杂度稍大（有成熟的产品可以使用，比如：FastDFS） 使用nfs做存储 优点：开发较为便捷 缺点：需要有一定的运维知识进行部署和维护 使用第三方的存储服务 优点：开发简单，拥有强大功能，免维护 缺点：付费 阿里云OSS存储 1
阿里云对象存储OSS与文件存储NAS的区别
weixin_33966365的博客
07-20 2927
一、简介 应用场景：选择一款存储产品，面向文档数据的存取，不会涉及到数据处理。 产品选型主要从OSS和NAS中选择一款，满足文档存储的需求。 二、NAS优缺点 NAS 是一种采用直接与网络介质相连的特殊设备实现数据存储的机制。由于这些设备都分配有 IP 地址，所以客户机通过充当数据网关的服务器可以对其进行存取访问，甚至在某些情况下，不需要任何中间介质客户机也可以直接访...
【Mysql】把图片存在阿里云oss上，然后mysql数据库上只存上存图片的绝对路径url的好处
AloneYueCSDN
11-29 1581
文章目录1.mysql直接存图片优缺点(1)优点：(2)缺点：2.二者实现方式 1.mysql直接存图片优缺点 (1)优点： 1.比较容易做取重,就是相同的图片只存一份. 2.最重要备份使用数据库的备份方式简单. 3.容易管理,去掉无用的图片等 (2)缺点： 1.不适合超大量存储,数据的存储越大,恢复越麻烦 2.当然一般还是需要前端做更多的物理缓存,而不是靠mysql来直接输出. 2.二者实现方式 1.图片直接存进数据库字段选择longblob类型，这样存进去的是二进制码 2.存路径和图片名
OSS存储静态资源(直接上手使用)
keyila
10-27 660
5、创建成功用户后,我们需要将我们的用户对bucket进行管理,第一个读写权限你可以设置为私有,也可以设置为公共读写,可以根据它的介绍修改。然后就是Bucket授权策略,我们点击新增权限时,选择我们刚刚创建的用户就可以了,然后进行权限设置,可以设置读写,也可以设置完全控制。4、最重要的一步,我们需要一个用户来操作这个bucket。我们需要点击浏览器右上角我们的用户头像,然后列表下有一个AccessKey管理点进去,然后我们就可以创建用户并且创建时需要勾选OpneAi调用访问,创建成功后最好把文件下载下来。
阿里云OSS图片的上传与展示:案例
weixin_52591234的博客
04-10 2539
src="'https://【Bucket名称】.oss-cn-beijing.aliyuncs.com/'+scope.row.img"endpoint ， accessKeyId ， accessKeySecret ，bucketName根据自己的OSS信息填写。通过图片的绝对路径上传，但是浏览器为了安全考虑，无法获得本地图片的绝对路径【也可以，但没必要】第一：uploadHttpRequest() 覆盖默认的上传行为，可以自定义上传的实现。第二：图片转为Base64格式解决图片的跨域问题，加上。
h5学习笔记：picture标签和webp组合
夏天的树人的专栏
03-28 1119
在日常网站的图片使用中，webp格式的优点要比同尺寸的jpg和png小一些，可以提升网站加载的速度。不过在大规模使用还是少见，主要还是兼容性的问题比较突出。前一段时间好奇查看了B站中的M站使用的图片格式，发现了B站采取picture标签呈现图片。什么是picture标签？我们查看一下文档的解释。 1. 什么是picture标签？ HTML 元素通过包含零或多个 元素和一个 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 元素，如果没有匹配的，就选择 元素的 src 属性中的UR
使用阿里云oss图片处理实现大尺寸图片加载优化
最新发布
天心天地生的博客
01-05 565
使用阿里云oss图片处理实现大尺寸图片加载优化； 为方便客户减少图片的处理，h5端需要加载20m的大尺寸图片。
图片：前端展示图像(img 、picture、svg、canvas )及常用图片格式(PNG、JPG、JPEG、WebP、GIF、SVG、AVIF、JFIF等)
snowball的博客
06-30 8621
与其他图像格式相比，TIFF格式可以存储更大的文件大小，具有更多的细节和更高的分辨率，使得用户可以更准确地保留和传输高质量的图像和照片。原因是同样大小的jpg和png图片下载的时间是相同的,但是jpg图片是有RGB三种描述的, 而png是有ARGB四种描述的,带有透明度,所以浏览器解码png图片要花更多的时间,因此jpg格式比png加载的快。是的，BMP格式图片可以用于浏览器。总之，DDS格式是一种高效、灵活和功能强大的图像格式，可以提供高质量的图像，并在游戏和应用程序中提高性能和速度。
前端上传图片springboot后端上传到oss
09-12
### 回答1： 前端使用HTML5的File API获取用户选择的图片，然后将图片转成二进制流，通过Ajax请求发送给后端。 后端使用阿里云OSS SDK，上传图片到OSS。具体步骤如下： 1. 引入阿里云OSS SDK依赖： ``` <dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> <version>3.10.2</version> </dependency> ``` 2. 在Springboot配置文件中配置OSS相关参数： ``` oss.endpoint=oss-cn-hangzhou.aliyuncs.com oss.accessKeyId=your_access_key_id oss.accessKeySecret=your_access_key_secret oss.bucketName=your_bucket_name ``` 3. 在Controller中编写上传图片的接口： ``` @PostMapping("/upload") public String upload(@RequestParam("file") MultipartFile file) throws IOException { // 获取文件名 String fileName = file.getOriginalFilename(); // 上传到OSS OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret); ossClient.putObject(bucketName, fileName, file.getInputStream()); // 关闭OSS客户端 ossClient.shutdown(); // 返回图片URL return "https://" + bucketName + "." + endpoint + "/" + fileName; } ``` 4. 前端通过Ajax请求上传图片： ``` function uploadImage() { var file = document.getElementById("file").files[0]; var formData = new FormData(); formData.append("file", file); $.ajax({ url: "/upload", type: "POST", data: formData, processData: false, contentType: false, success: function(data) { console.log(data); } }); } ``` 需要注意的是，前端上传的文件大小可能比较大，需要在后端进行文件大小和类型的校验，防止恶意攻击和服务器压力过大。 ### 回答2： 前端上传图片到Spring Boot后端，然后后端将图片上传到OSS（Object Storage Service）中。 首先，前端需要通过一个表单页面或者其他方式选择要上传的图片。当用户选择完成后，前端可以使用一个AJAX请求将图片发送给后端。 在后端，我们需要配置一个用于接收图片并上传到OSS的路由或API接口。这个接口需要处理用户上传的图片文件，并将其保存到本地的临时文件夹中。 然后，我们需要引入相应的OSS客户端库，比如阿里云的OSS SDK。在后端中，我们需要配置OSS的相关信息，比如Access Key ID（访问密钥ID）、Access Key Secret（访问密钥密码）、OSS域名等。 接下来，我们需要将保存在本地的临时文件上传到OSS。首先，我们需要创建一个OSSClient对象，使用OSSClient的构造函数传入配置的OSS相关信息。 然后，我们可以调用OSSClient对象的putObject方法来上传图片。在putObject方法中，我们需要指定要上传的目标Bucket（OSS存储空间），以及目标图片的存储路径和文件名。同时，我们也需要指定要上传的文件的本地路径。 上传完成后，我们可以在OSS中看到上传的图片。 最后，在后端中，我们可以返回一个上传成功的消息或者其他相应的数据给前端，以表示图片上传到OSS的状态。 总结而言，前端上传图片到Spring Boot后端，后端将图片上传到OSS步骤包括：前端选择图片并上传至后端，后端保存图片到本地临时文件夹，配置OSS并引入相关OSS客户端库，创建OSSClient对象并使用putObject方法将图片上传至OSS，返回上传成功的消息给前端。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值