自适应网站好建们,百度搜索广告价格,服装设计软件app下载,网站建设目录结构doc首先#xff0c;为什么需要进行图片压缩#xff1a;
减少页面加载时间#xff1a;因为图片是页面中常见的资源之一#xff0c;较大的图片会增加页面的加载时间#xff0c;影响用户体验#xff0c;压缩图片可以减小图片的文件大小#xff0c;提升页面加载速度。节省网络…首先为什么需要进行图片压缩
减少页面加载时间因为图片是页面中常见的资源之一较大的图片会增加页面的加载时间影响用户体验压缩图片可以减小图片的文件大小提升页面加载速度。节省网络流量在移动设备或移动网络下加载大型图片可能会消耗大量的网络流量导致用户的流量费用增加压缩图片可以降低文件大小节省用户的流量费用。节约服务器带宽压缩图片可以减少服务器带宽流量当服务器响应客户端请求时如果返回的是压缩过的图片那么所需的传输时间和带宽流量都会比原始图片少这是因为压缩图片可以减小文件大小来减少所需的传输时间和带宽流量在一些大量传输图片的场景下压缩图片可以减少服务器的带宽流量从而减低服务器成本并提升用户体验。减少网络拥堵在网络拥堵的情况下下载大型图片可能会占用较多的带宽资源从而导致其他用户的访问速度变慢压缩图片可以减小图片的文件大小减少网络拥堵的情况。减少存储空间对于需要大量存储图片的应用程序如图片分享网站在线相册等。压缩图片可以减少存储空间的占用降低成本。保护隐私信息一些照片中可能包含了一些隐私信息如地理位置时间人脸等。如果不进行压缩这些信息可能会被黑客或者不法分子利用压缩图片可以消除或者减少这些信息保护隐私安全。增加搜索引擎排名搜索引擎越来越注重网站的速度和性能。压缩图片可以加快页面的加载速度提高用户体验。从而增加搜索引擎的排名。
在理解了项目中为什么要使用图片压缩后可以在vite环境中vue项目中先进行不同类型图片的引入与使用操作。
第一步在src的目录中assets文件夹下放置一些不同格式的图片.jpg.png.webp.svg
这些文件有大有小有的有86.9KB有的有540KB 第二步引入图片
templateimg src./assets/pig.webp /img src./assets/cat.jpg /img src./assets/cat.png /img src./assets/dog.png /img src./assets/vue.svg /
/template
运行
npm run dev
第三步打开调试工具Network面板
勾选Disable cache选项进行无缓存的页面请求测试以下则可以清楚的看到各个文件类型与尺寸的大小。 那么是否可以对assets中的图片资源进行自动的压缩处理呢
第一步在vue项目中安装以下插件
npm i vite-plugin-image-optimizer -D
第二步在vite.config.ts中引入模块并配置插件使用
import { defineConfig } from vite;
import vue from vitejs/plugin-vue;
import { ViteImageOptimizer } from vite-plugin-image-optimizer;export default defineConfig({plugins:[vue(),ViteImageOptimizer()],
});
vite-plugin-image-optimizer不支持开发环境图片压缩需要利用npm run build进行生产环境项目打包。
运行完毕以后在终端中会显示图片压缩的报表结果清晰的可以查看到如果原图可以进行压缩包括压缩后的文件大小尺寸都有所显示。如果插件尝试对原图压缩但压缩后的文件反而比原图大的话那么将会采用skip的跳过机制保留原图而不使用压缩操作。
如果觉得vite-plugin-image-optimizer默认配置不能够满足项目对图片优化的需求则可以考虑进行自定义属性的设置。
比如
对jpg进行压缩画质保留至90%。对png进行压缩画质保留至100%。
import { defineConfig } from vite;
import vue from vitejs/plugin-vue;
import { ViteImageOptimizer } from vite-plugin-image-optimizer;export default defineConfig({plugins:[vue(),ViteImageOptimizer({jpg:{quality:90,},png:{quality:100,}})],
});
执行npm run build打包命令以后则会看到与之前默认配置不同的压缩结果。
项目在打包以后会产生dist目录确保电脑环境中有类似serve这样的本地服务开启工具以后可以尝试在项目根目录运行serve ./dist
如果没有serve则可以进行下载
npm install serve -g 全局安装 那么以上则是压缩前和压缩后图片大小的对比那么在产品项目中的图片已经变得精简太多。
