首页
技术博客
PHP教程
数据库技术
前端开发
HTML5
Nginx
php论坛
新用户注册
|
会员登录
PHP教程
技术博客
编程问答
PNG素材
编程语言
前端技术
Android
PHP教程
HTML5教程
数据库
Linux技术
Nginx技术
PHP安全
WebSerer
职场攻略
JavaScript
开放平台
业界资讯
大话程序猿
登录
极速注册
取消
热门标签 | HotTags
cmd
httpclient
js
cpython
replace
split
version
regex
usb
cSharp
yaml
dockerfile
hashtable
join
runtime
vba
email
request
heap
text
spring
python3
hashcode
fetch
get
char
c语言
copy
controller
select
eval
io
list
header
lua
integer
python
scala
window
erlang
ascii
process
datetime
php
flutter
timezone
chat
jsp
node.js
search
sum
java
bit
less
audio
const
input
actionscrip
import
typescript
bitmap
buffer
httprequest
plugins
string
random
testing
post
shell
frameworks
install
emoji
format
md5
bash
php5
match
uri
bytecode
当前位置:
开发笔记
>
编程语言
> 正文
你所不知道的html5与html中的那些事(五)——web图像
作者:书友56183408 | 来源:互联网 | 2023-08-21 18:36
文章简介:现在的页面,一般都离不开图像,而怎么做才能让我们的页面中的图像加载的又快又好呢?在优化页面速度的时候还有什么事是你所不知道的呢?下面看看今天我为大家带来了哪些关于web
文章简介:
现在的页面,一般都离不开图像,而怎么做才能让我们的页面中的图像加载的又快又好呢?在优化页面速度的时候还有什么事是你所不知道的呢?
下面看看今天我为大家带来了哪些关于web图像的你所平时不一定关心的事与一些有建设性的建议吧:
1)关于web页面中的图像你需要关注的关键点有那些?
2)web页面中图像的格式选择需要注意什么?
3)
标签的用法细节小结?
第一个问题
关于web页面中的图像你需要关注的关键点有那些?
示例图
像示例图中的图片一样,平时我们写页面都会用到图片,而你在看图片的时候看的是图片的什么呢(不要说只看到上图中的S型曲线的美女哦)?你在用图片的时候是不是怎么去考虑它的用法呢?有没有想过这个图片对你的页面来说是不是最优的状态?
而当你选择一些图片的时候你是从那几个方面去考虑的呢?
下面我们就说一下关于运用图片的时候你应该需要注意的一些关键点:
1.图片的格式
这个可能大家都知道但是不一定知道什么时候去用什么样的格式最优,下一个问题中会详细说明;
2.图片的颜色
这个大家可能也了解一些,就是关于图片的颜色值显示的问题,计算机的显示屏可以显示数以个百万计的颜色,但是图片的颜色的会根据它的格式不同而所可以表示的颜色值也有不同;例如:PNG-8只拥有256种颜色;
3.图片的尺寸和分辨率
这个在纸上是没有的分辨率的概念的,想要多大的图像就用多大的尺寸,而在显示屏幕上尺寸的因素就不是一个了,还与屏幕的分辨率有关;
4.图片的加载速度
这个对用户来说真的是太重要了,如果说一个页面点开超过三秒还没有图片显示的话,用户对这个网站的体验评价就会大的将低;
面加载的速度对直接的要素就是图片的大小了,赿大加载的时间赿长;
5.图片的透明度
一般的在给用户一个好的用户交互体验的时候有一个有透明度的图片要比没有透明度的好,比如:一些图标大多时候用的都是有透明度的
;
6.图片的动画
这个效果是在纸上你就远看不见的(小时候的那种翻页的就不说了),这一类的图像可以是gif格式的图片,但是现在为了提升速度一般都用flash,css,Javascript来创建动画,但是最近用flash的也赿来赿少了(苹果对HTML的推动的问题),所以现在主要对动画的创建主要就是css与Javascript;
第二个问题
web页面中图像的格式选择需要注意什么?
关于web页面中的图片的格式现在大多数的浏览器或者是屏幕阅读器都支持一下三种格式:png\jpg\gif;
这三个格式的选择可是大有门道的,要学会正确选择这三个格式,就需要先了解这个三个格式的特点;
png :常用的png格式的图片分为png-8与png-24,通常这个格式用来保存大量纯色的图案或是标志类的文件,对于连续重复的图案他的压缩效果好一些,而且他支持图片的透明度(alpha)见上面的图标;png的压缩为无损的压缩;
jpg:适用于彩色的照片,因为他包含大量的颜色并进行了合理的压缩,使文件变得比较小,但是他是有损心事的压缩,一些像素点压缩之后不能够被还原;但是对于页面来说牺牲一些像素点是值得的因为可以提升速度;
如:示例图中的美女,他就是用的jpg格式的图片,进行的合理的压缩,加载的速度很快,效果也还是可以接受的;
gif:他的最大的特点就是可以做成动态的图片,就是小动画,示例图中的左右箭头就是gif格式的;他也支持透明,但是不像png一样支持半透明;所以在一些比较复杂的图的时候就需要用png来做透明效果而不是gif,以免产生锯齿的效果;
知道了他们的特性之后就可以因地制宜的选择合理的格式来封装图片文件了,这里你可以用ps来做一下简单的处理;
对了,还有一个非常重要的来较快浏览器图片加载速度的方法;就是可以把一个图片分成几个部分来保存之后用css在组装起来,而保存的那几个部分可以根据图片文件的内容来选择对应的文件的格式保存,以达到在可控范围内,速度最优;
第三个问题
标签的用法细节小结?
只要做过页面开发的人都知道只要是向页面中加载图片,标准的用法就是用
标签(现在做一些效果用的都是css+div);关于img的用法在这里我就不说了,下面就是简单的说总结一下在用这个标签的时候我们需要注意的问题:
1.通过IMG来加载的图片一定不要太大,那样会非常的影响你的页面的速度以及用户的体验所以将图片进行必要的压缩是必须的(需要访问的图片一定要放在服务器上这样访问者才可以访问的到;)
2.为你的img标签提供文本解释,因为一些网速不好的地方会用浏览器选择关掉图像显示的功能,如果你不做文本解释那么在不显示图像的时候你的网站就没有意义了;文本提示标准的用法就是用alt属性;理论上说解释的文字没有长度的限制,但是一般的浏览器不会自动换行,所以呢为了用户体验最好控制在50个字符以内;
3.在HTML5规定IMG标签一定要用ALT属性,这个一定要记住哦,不习惯给IMG标签加ALT属性的需要注意了;
4.关于图像的尺寸的问题,虽然可以制定IMG标签的宽高来修改原图片的显示大小,但是在浏览器请求的时候图像的大小不会变,所以建议就是页面需要多大的图片就给多大的图片不要通过IMG标签中的宽高属性来修改;
好了今天就说到这里吧,不知道对读到这篇文章的您有什么帮助没有?相信通过这篇文章您对web页面的图像选择一定有了一个新的认识;
下篇文章我会讲一些HTML5 与链接相关的东西哦,相信一定会有你不知道的事情。
感谢您的阅读,期待下次与您见面;
身为一名IT技术人员磨练自己的技术是必不可少的,关注微信号coder_online,程序员互动联盟,可以与大牛在线随时讨论
自己感兴趣的话题,让自己用最少的时间学到最多的东西,我在程序员互动联盟期待您的加入
html
html5
web
图片
css
java
ip
文件
压缩
写下你的评论吧 !
吐个槽吧,看都看了
会员登录
|
用户注册
推荐阅读
copy
手机移动端HTML5和JavaScript如何实现视频上传和压缩视频质量?
本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量,或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频,只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量,只有使用JAVA编写Android客户端才能实现压缩。此外,作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因,并提供了解决方法。最后,作者还介绍了一个用于处理图片的类,可以实现图片剪裁处理和生成缩略图的功能。 ...
[详细]
蜡笔小新 2023-12-12 15:58:44
request
如何实现织梦DedeCms全站伪静态
本文介绍了如何通过修改织梦DedeCms源代码来实现全站伪静态,以提高管理和SEO效果。全站伪静态可以避免重复URL的问题,同时通过使用mod_rewrite伪静态模块和.htaccess正则表达式,可以更好地适应搜索引擎的需求。文章还提到了一些相关的技术和工具,如Ubuntu、qt编程、tomcat端口、爬虫、php request根目录等。 ...
[详细]
蜡笔小新 2023-12-14 19:45:47
request
HTML学习02 图像标签的使用和属性
本文介绍了HTML中图像标签的使用和属性,包括定义图像、定义图像地图、使用源属性和替换文本属性。同时提供了相关实例和注意事项,帮助读者更好地理解和应用图像标签。 ...
[详细]
蜡笔小新 2023-12-13 11:31:26
js
前端人员必须知道的三个问题及其发展阶段
本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ...
[详细]
蜡笔小新 2023-12-12 12:45:59
js
Nginx使用AWStats日志分析的步骤及注意事项
本文介绍了在Centos7操作系统上使用Nginx和AWStats进行日志分析的步骤和注意事项。通过AWStats可以统计网站的访问量、IP地址、操作系统、浏览器等信息,并提供精确到每月、每日、每小时的数据。在部署AWStats之前需要确认服务器上已经安装了Perl环境,并进行DNS解析。 ...
[详细]
蜡笔小新 2023-12-14 19:42:01
js
Python高级之网络编程及TCP/IP协议簇的OSI七层模型介绍
本文介绍了Python高级网络编程及TCP/IP协议簇的OSI七层模型。首先简单介绍了七层模型的各层及其封装解封装过程。然后讨论了程序开发中涉及到的网络通信内容,主要包括TCP协议、UDP协议和IPV4协议。最后还介绍了socket编程、聊天socket实现、远程执行命令、上传文件、socketserver及其源码分析等相关内容。 ...
[详细]
蜡笔小新 2023-12-14 18:16:27
char
VScode格式化文档换行或不换行的设置方法
本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ...
[详细]
蜡笔小新 2023-12-14 17:15:38
char
Android 新闻App的本地服务器搭建教程
本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ...
[详细]
蜡笔小新 2023-12-14 17:15:19
request
AJAX的POST请求及实现数据修改功能的方法
本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ...
[详细]
蜡笔小新 2023-12-14 16:12:01
request
Android中高级面试必知必会,积累总结
本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ...
[详细]
蜡笔小新 2023-12-14 14:53:02
request
Java工具类库Hutool介绍及功能概述
本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ...
[详细]
蜡笔小新 2023-12-14 14:29:36
spring
SpringBoot yml 配置 多配置文件,开发环境,生产环境配置文件分开
原文地址:https:www.cnblogs.combaoyipSpringBoot_YML.html1.在springboot中,有两种配置文件,一种 ...
[详细]
蜡笔小新 2023-12-14 12:39:13
js
高校天文共享平台开发过程中的思考与规划
本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ...
[详细]
蜡笔小新 2023-12-13 18:08:58
request
Python瓦片图下载、合并、绘图、标记的代码示例
本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ...
[详细]
蜡笔小新 2023-12-13 12:14:55
request
突破MIUI14限制,自定义胶囊图标、大图标样式,支持任意APP
本文介绍了如何突破MIUI14的限制,实现自定义胶囊图标和大图标样式,并支持任意APP。需要一定的动手能力和主题设计师账号权限或者会主题pojie。详细步骤包括应用包名获取、素材制作和封包获取等。 ...
[详细]
蜡笔小新 2023-12-12 12:07:16
书友56183408
这个家伙很懒,什么也没留下!
Tags | 热门标签
cmd
httpclient
js
cpython
replace
split
version
regex
usb
cSharp
yaml
dockerfile
hashtable
join
runtime
vba
email
request
heap
text
spring
python3
hashcode
fetch
get
char
c语言
copy
controller
select
RankList | 热门文章
1
C语言初学者,在电脑性能足够的情况下,VS2017,codeblocks,devcpp如何选择?
2
layui 上传图片文件到钉钉服务器
3
CURRENT_TIMESTAMP的数据库不可知SQL
4
This element has no attached Javadoc and the Javadoc could not be found in the attached source
5
unity保存运行时的操作_Unity 记录运行状态下的Transform信息
6
java方法写的是什么_java方法具体该怎么写
7
PID控制理論(2)-P control
8
Java集合之Map总结
9
网页表格导入excel(表格属性)
10
时钟分频原理
11
Task扩展方法取消操作
12
非线性回归——非线性函数最小二乘拟合
13
echarts画工作流(流程图)
14
spring mvc 4.1 返回json报406错误的解决办法
15
如何能让EditBox显示背景图?任何方法都行!分不是问题
PHP1.CN | 中国最专业的PHP中文社区 |
DevBox开发工具箱
|
json解析格式化
|
PHP资讯
|
PHP教程
|
数据库技术
|
服务器技术
|
前端开发技术
|
PHP框架
|
开发工具
|
在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |
京公网安备 11010802041100号
|
京ICP备19059560号-4
| PHP1.CN 第一PHP社区 版权所有