当前位置: 首页 > news >正文

图像优化篇

目录

    • (1)矢量图
    • (2)位图
        • 2.1 分辨率
  • 2,图像格式
    • 格式选择建议:

(1)矢量图

被定义为一个对象,包括颜色,大小,形状,以及屏幕位置等属性,

矢量图的优点: 能够在任何缩放比例下呈现出细节同样清晰的展示效果。

矢量图的缺点:对细节的展示效果不够丰富,对足够复杂的图像来说, 比如要达到照片的效果,若通过svg进行矢量图绘制,所的的文件就会大得离谱。

(2)位图

是通过对一个矩阵的栅格进行编码来表示图像,每个栅格只能编码表示一个特定的颜色,对于一个照片,像素点越多,那这个照片就会越清晰。

但随着像素点越多,图像文件就会越大, 在一定网络速度的前提下,下载完一张图像就会更慢。

对于性能的考虑,在使用图像时,必须要考虑对图像进行压缩,采用什么样的图像格式,使用什么样的压缩算法以及压缩到何种程度。

2.1 分辨率

在代码css中,我们经常为图像设置显示所需的长度像素值,但在不同的设备屏幕上,有时候相同的图像以及相同的设置,其渲染出来的图像,清晰度会有所差别,产生这个现象的原因涉及到两种不同的分辨率: 屏幕分辨率和图像分辨率。

图像分辨率:表示该图像文件所包含的真是像素值信息,比如200px * 200px,就定义了长宽各200个像素点的信息。

设备分辨率:显示器屏幕所显示的最大像素值。

两者有何不同:

10px ** 10px 的图像分辨率,既可以使用10px ***10px的屏幕来显示,也可以使用20px ** 20px 的屏幕显示。

更高的设备分辨率有助于显示更加绚丽多彩的图像。

为了能在不同的分辨率下使项目中所包含的图像都能得到恰当的展示效果,可以利用picture标签和srcset属性提供图像的多个变体。

用于插入图像的img标签,有一个srcset属性可以用来针对不同设备,提供不同的分辨率的图像文件:

<img src="photo.jpg" srcset= "photo@2x.jpg 2x,photo@3x.jpg 3x,photo@4x.jpg 4x">

在srcset属性,可以设置多种分辨率的图像文件以及使用条件,浏览器在请求之前便会对其进行解析,只选择最合适的图像文件进行下载,如果浏览器不支持,那么就可以在src中包含默认的图像文件。

使用picture标签则会在多图像文件选择时,获得更多的控制维度,比如屏幕方向,设备大小,屏幕分辨率。

<picture>

<source media= '(min-width: 800px)' srcset='photo.jpg pthot@2x.jpg 2x'></source>

<source media= '(min-width: 400px)' srcset='photo-s.jpg pthot-s@2x.jpg 2x'></source>

</picture>

picture标签或许会有兼容性问题。

2,图像格式

不同的图像格式在于他们进行有损压缩和无损压缩过程中采用了不同的算法组合。

格式选择建议:

在这里插入图片描述

相关文章:

图像优化篇

目录&#xff08;1&#xff09;矢量图&#xff08;2&#xff09;位图 2.1 分辨率2&#xff0c;图像格式格式选择建议&#xff1a;&#xff08;1&#xff09;矢量图 被定义为一个对象&#xff0c;包括颜色&#xff0c;大小&#xff0c;形状&#xff0c;以及屏幕位置等属性&…...

在surface go 2上安装ubuntu 20.04

在surface go 2上安装ubuntu 20.04 1.制作安装盘 下载ubuntu系统的iso文件 使用Rufus软件将u盘制作为ubuntu系统的安装盘 2.在surface go 2上操作 禁用快速启动 在 Windows 中&#xff0c;禁用“电源选项”中的“快速启动”>选择电源按钮的功能 禁用 Bitlocker 在 Wi…...

Java:SpringMVC的使用(1)

目录第一章、SpringMVC基本了解1.1 概述1.2 SpringMVC处理请求原理简图第二章、SpringMVC搭建框架1、搭建SpringMVC框架1.1 创建工程【web工程】1.2 导入jar包1.3 编写配置文件(1) web.xml注册DispatcherServlet(2) springmvc.xml(3) index.html1.4 编写请求处理器【Controller…...

自动化测试岗位求职简历编写规范+注意事项,让你的简历脱颖而出

目录 前言 1.个人信息 2.教育背景(写最高学历) 3.个人技能(按精通/掌握/熟练/了解层次来写) 4.工作经历 5.工作经验/项目经历 6.自我评价 总结 前言 挑选一个阅读舒适度不错的模板 HR和面试官看的简历多&#xff0c;都是快速阅读&#xff0c;舒适度特别重要&#xff1b…...

C 字符串

在 C 语言中&#xff0c;字符串实际上是使用空字符 \0 结尾的一维字符数组。因此&#xff0c;\0 是用于标记字符串的结束。空字符&#xff08;Null character&#xff09;又称结束符&#xff0c;缩写 NUL&#xff0c;是一个数值为 0 的控制字符&#xff0c;\0 是转义字符&#…...

【每日一题Day115】LC2335装满杯子需要的最短总时长 | 贪心

装满杯子需要的最短总时长【LC2335】 You have a water dispenser that can dispense cold, warm, and hot water. Every second, you can either fill up 2 cups with different types of water, or 1 cup of any type of water. You are given a 0-indexed integer array amo…...

Flink流计算处理-旁路输出

使用Flink做流数据处理时&#xff0c;除了主流数据输出&#xff0c;还自定义侧流输出即旁路输出&#xff0c;以实现灵活的数据拆分。 定义旁路输出标签 首先需要定义一个OutputTag&#xff0c;代码如下&#xff1a; // 这需要是一个匿名的内部类&#xff0c;以便我们分析类型…...

nginx正向代理的配置和使用

nginx正向代理的配置和使用 nginx正向代理的配置和使用nginx正向代理的配置和使用安装包准备下载nginx安装包下载正向代理模块的包版本与模块对照表部署nginx服务上传nginx包和正向模块包解压,改名安装nginx配置正向代理创建nginx用户检查nginx配置并启动nginx服务所在服务器验…...

Oracle Trace File Analyzer 介绍及简单使用

一、什么是Oracle Trace File Analyzer Oracle Autonomous Health Framework(AHF) 包含 Oracle ORAchk, Oracle EXAchk, and Oracle Trace File Analyzer(TFA). AHF工具包包含了Oracle常用的多种诊断工具&#xff0c;如 ORAchk, Oracle EXAchk, and Oracle Trace File Analyzer…...

面试实战篇 | 快手本地生活,结合项目谈Redis实战项目场景?MySQL InnoDB存储引擎如何工作的?策略模式?

本期是【你好&#xff0c;面试官】系列文章的第21期&#xff0c;持续更新中…。 《你好&#xff0c;面试官》系列目前已经连载20篇了&#xff0c;据说看了这个系列的朋友都拿到了大厂offer~ 你好&#xff0c;面试官 | 你真的理解面向 “对象”&#xff1f;你好&#xff0c;面…...

Hadoop之——WordCount案例与执行本地jar包

目录 一、WordCount代码 (一)WordCount简介 1.wordcount.txt (二)WordCount的java代码 1.WordCountMapper 2.WordCountReduce 3.WordCountDriver (三)IDEA运行结果 (四)Hadoop运行wordcount 1.在HDFS上新建一个文件目录 2.新建一个文件&#xff0c;并上传至该目录下…...

利用git reflog 命令来查看历史提交记录,并使用提交记录恢复已经被删除掉的分支

一.问题描述 当我们在操作中手误删除了某个分支&#xff0c;那该分支中提交的内容也没有了&#xff0c;我们可以利用git reflog这个命令来查看历史提交的记录从而恢复被删除的分支和提交的内容 二.模拟问题 1.创建git仓库&#xff0c;并提交一个文件 [rootcentos7-temp /da…...

【软件测试】大厂测试开发你真的了解吗?测试开发养成记......

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 在一些大公司里&…...

Redis中的hash结构和扩容机制

1.rehash原理 hash包含两个数据结构为字典数组ht[0]和ht[1]。其中ht[0]用来存放数据&#xff0c;ht[1]在rehash时使用。 扩容时&#xff0c;ht[1]的大小为第一个大于等于ht[0].used*2的2的幂次方的数&#xff1b; 收缩时&#xff0c;ht[1]的大小为第一个大于等于ht[0].used的…...

【C++奇技淫巧】前置自增与后置自增的区别(++i,i++)【2023.02.08】

简介 先说i和i的区别&#xff0c;判断语句中if(i)是拿i的值先判断&#xff0c;而后自增&#xff1b;if(i)是先自增i再进行判断。涉及到左值与右值也有点区别&#xff0c;i返回的是右值&#xff0c;i返回的是左值。也就是下面的代码要解释的东西。 #include <iostream>i…...

实战打靶集锦-005-HL

**写在前面&#xff1a;**记录一次曲折的打靶经历。 目录1. 主机发现2. 端口扫描3. 服务枚举4. 服务探查4.1 浏览器访问4.2 目录枚举4.3 探查admin4.4 探查index4.5 探查login5 公共EXP搜索6. 再次目录枚举6.1 探查superadmin.php6.2 查看页面源代码6.3 base64绕过6.4 构建反弹…...

铁路系统各专业介绍(车机工电辆)

目录 1 车务段 1.1 职能简介 1.2 路段名单 1.3 岗位级别 2 机务段 2.1 职能简介 2.2 路段名单 2.3 岗位级别 3 工务段 3.1 职能简介 3.2 路段名单 3.3 岗位级别 4 电务段 4.1 职能简介 4.2 路段名单 4.3 岗位级别 5 车辆段 5.1 职能简介 5.2 路段名单 5.3 …...

2/11考试总结

时间安排 7:30–7:50 读题&#xff0c;T1貌似是个 dp &#xff0c;T2 数据结构&#xff0c;T3 可能是数据结构。 7:50–9:45 T1&#xff0c;点规模非常大&#xff0c;可以达到 1e18 级别&#xff0c;感觉应该没法直接做&#xff0c;考虑每条新增的边的贡献&#xff0c;想到用 …...

Java Set集合

7 Set集合 7.1 Set集合的概述和特点 Set集合的特点 不包含重复元素的集合没有带索引的方法&#xff0c;所以不能使用普通for循环 Set集合是接口通过实现类实例化&#xff08;多态的形式&#xff09; HashSet&#xff1a;添加的元素是无序&#xff0c;不重复&#xff0c;无索引…...

【手写 Vuex 源码】第七篇 - Vuex 的模块安装

一&#xff0c;前言 上一篇&#xff0c;主要介绍了 Vuex 模块收集的实现&#xff0c;主要涉及以下几个点&#xff1a; Vuex 模块的概念&#xff1b;Vuex 模块和命名空间的使用&#xff1b;Vuex 模块收集的实现-构建“模块树”&#xff1b; 本篇&#xff0c;继续介绍 Vuex 模…...

EOC第六章《块与中枢派发》

文章目录第37条&#xff1a;理解block这一概念第38条&#xff1a;为常用的块类型创建typedef第39条&#xff1a;用handler块降低代码分散程度第41条&#xff1a;多用派发队列&#xff0c;少用同步锁方案一&#xff1a;使用串行同步队列来将读写操作都安排到同一个队列里&#x…...

八、Git远程仓库操作——跨团队成员的协作

前言 前面一篇博文介绍了git团队成员之间的协作&#xff0c;现在在介绍下如果是跨团队成员的话&#xff0c;如何协作&#xff1f; 跨团队成员协作&#xff0c;其实就是你不属于那个项目的成员&#xff0c;你没有权限向那个仓库提交代码。但是github还有另一种 pull request&a…...

算法刷题打卡第88天:字母板上的路径

字母板上的路径 难度&#xff1a;中等 我们从一块字母板上的位置 (0, 0) 出发&#xff0c;该坐标对应的字符为 board[0][0]。 在本题里&#xff0c;字母板为board ["abcde", "fghij", "klmno", "pqrst", "uvwxy", "…...

UVa The Morning after Halloween 万圣节后的早晨 双向BFS

题目链接&#xff1a;The Morning after Halloween 题目描述&#xff1a; 给定一个二维矩阵&#xff0c;图中有障碍物和字母&#xff0c;你需要把小写字母移动到对应的大写字母位置&#xff0c;不同的小写字母可以同时移动&#xff08;上下左右四个方向或者保持不动 &#xff0…...

Connext DDS属性配置参考大全(3)

Transport传输dds.participant.logging.time_based_logging.process_received_messagedds.participant.logging.time_based_logging.process_received_message.timeout...

Docker-安装Jenkins-使用jenkins发版Java项目

文章目录0.前言环境背景1.操作流程1.1前期准备工作1.1.1环境变量的配置1.2使用流水线的方式进行发版1.2.1新建流水线任务1.2.2流水线操作工具tools步骤stages步骤1:拉取代码编译步骤2:发送文件并启动0.前言 学海无涯&#xff0c;旅“途”漫漫&#xff0c;“途”中小记&#xff…...

spring 中的 Bean 是否线程安全

文章目录结论1、spring中的Bean从哪里来&#xff1f;2、spring中什么样的Bean存在线程安全问题&#xff1f;3、如何处理spring Bean的线程安全问题&#xff1f;结论 其实&#xff0c;Spring 中的 Bean 是否线程安全&#xff0c;其实跟 Spring 容器本身无关。Spring框架中没有提…...

微电网两阶段鲁棒优化经济调度方法[3]【升级优化版本】(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️❤️&#x1f4a5;&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑…...

C++入门教程||C++ 数据类型||C++ 变量类型

C 数据类型 使用编程语言进行编程时&#xff0c;需要用到各种变量来存储各种信息。变量保留的是它所存储的值的内存位置。这意味着&#xff0c;当您创建一个变量时&#xff0c;就会在内存中保留一些空间。 您可能需要存储各种数据类型&#xff08;比如字符型、宽字符型、整型…...

【visio使用技巧】图片导出pdf时去掉多余空白

问题 在visio导出pdf格式的图片时&#xff0c;往往会存在多余的白边&#xff0c;如下图所示&#xff1a; 解决方法 依次点击&#xff1a;菜单栏→文件→选项→自定义功能区→勾选“开发工具”→确定。 依次点击菜单栏→开发工具→显示ShapeSheet→页→Print Properties→将…...

罗源网站建设/山东建站管理系统

&#xfeff;&#xfeff;近期最终把effectvie C细致的阅读了一边&#xff0c;非常惊叹C的威力与魅力。近期会把近期的读书心得与读书笔记记于此。必备查找使用&#xff0c;假设总结有什么不当之处&#xff0c;欢迎批评指正&#xff1a; 如今仅仅列出框架。近期会尽快填充完整&…...

如何注册公司营业执照/网站用户体验优化

TypeScript相比JavaScript&#xff0c;可以很好的享受类型标注带来的代码提示&#xff0c;可以在编码阶段就解决大部分语法错误&#xff0c;极大的提升代码阅读体验和编码体验 目录安装TypeScript使用tsconfig.jsonTypeScript使用示例使用webpack参考文档安装TypeScript $ nod…...

wordpress 多站点 合集/推广网站的方法有哪些

模板介绍 精美PPT模板设计&#xff0c;深红色组织结构图表合集PPT模板。一套可视图表幻灯片模板&#xff0c;内含红色多种配色&#xff0c;精美风格设计&#xff0c;动态播放效果&#xff0c;精美实用。 一份设计精美的PPT模板&#xff0c;可以让你在汇报演讲时脱颖而出。 希…...

wordpress文本自动分页/上海百度推广

Cuda安装 安装cuda是比较麻烦的一步&#xff0c;以下安装说明来自cuda的安装说明文件。遇到问题找官方解决方案&#xff0c;最便捷有效。Perform the following steps to install CUDA and verify the installation.Disable the Nouveau drivers:首先需要屏蔽ubuntu默认的显卡驱…...

手機如何做网站/cms自助建站系统

实验目录1.继承2.面向抽象编程13.面向抽象编程24.子类方法重写5.面向抽象编程6.接口本次作业共六题&#xff0c;一共五个包&#xff0c;包名即题号&#xff0c;其中第二题和第三题都写在第二题的包中。1.继承 在一个源程序中&#xff0c;定义四个类&#xff1a; 第一个类是图形…...

做融资的网站有哪些/如何制作网站最简单的方法

解决go编译报错&#xff1a;undefined:syscall.UTF16PtrFromString、undefined: syscall.SetFileAttributes 遇到个问题就是在windows设置文件隐藏所使用的库没办法在linux上编译 解决方法 在go文件开头设置标签 // build windows// 要空一行哦~可以设置文件只在Windows下编译…...