在制作网页时, 为什么要将多个图标放在一个图片文件里面呢?
经常在网上搜罗资源的朋友可能会发现, 很多网站喜欢将小图标拼在一个图片文件里. 然后在 CSS 中通过 background-position 定位访问图标, 访问量大的网站尤是如此. 为什么呢? 分开管理不是更加灵活吗?
大家都这么做当然有它的优点, 但这同样存在缺点.
优点:
1. 1 + 1 < 2
图标放在一起, 可以令图标的总容量稍小一点. 这不是最重要的, 但我可以告诉你, 很多程序员都是完美主义者.
2. 让连接次数大量减少
用过 Opera 的朋友可能会对它那个显示图片下载的进度条印象很深, 它会显示 "已下载图片/图片总数". 对于 Web 服务器上的每个独立资源, 都需要去连接和获取的. 所以大家都设法将很多图标放在一个图片上, 连接一次就全部取回来. 这也许是一图多标的主要目的.
3. 让浏览器将图标预先下载
浏览器为了尽快地显示页面, 一般只是将打开页面时用到的图片下载到本地, 而一些可能用到, 但没有立刻被用到的图片需要在应用的时候再进行下载. 最经典的例子可能是导航菜单的 Tab 图标, 如果普通状态的 Tab 图标和鼠标悬停时的图标都是独立放置的, 那么当你鼠标移动到 Tab 按钮时, 图标才开始下载, 这样会带给用户很不好的视觉效果. 所以我觉得遇到这种情况时, 将多个图标合并在一起的处理是必须的.
缺点:
1. 图片难以管理, 难以定位
如果你要更换一个图标, 那么你需要编辑整个大图片. 如果你要改变一个图标的大小, 很可能你需要重新计算它的位置, 甚至无从下手, 只能在别的位置再添加一个图标.
2. 2 > 1
两个图标合成的图片是肯定比其中一个图标独占的图片大的, 也就是说, 下载这个图片所需的时间将比单独一个图标用的时间长. 浏览器显示图片一般都是下载完则显示或者边下载边显示的, 如果你那几个图标组成的图片容量比较大, 那么它们不能逐个显示予用户, 会造成很不好的用户体验.
应用:
1. 让图标尽量排列得有规律
有规律地排放的图标跟容易定位和维护, 这里的间隔可以使用 16, 32, 48, 96 等标准尺寸.
2. 将背景颜色一致的图标放置在一起
如果背景颜色不一样, 最好分为两个或多个图片放置, 特别是背景颜色相近的, 很容易混淆.
3. 将相同栏目的图标放置在一起
这样可以少写一些 CSS 代码. 设置一个 background, 再在每个项设置 background-position 就行了.
4. 不要将大图绑在一块
大部分用户都不会耐心地等待页面的所以文件被下载完毕再进行阅读, "不耐烦" 会驱使他们去点 close.
关于图片定位, 可以看看这里: CSS 中背景图片定位
拓展:
万物都是相通的, 软件和互联网技术也一样. 如果图片作为网络资源需要每个进行连接来获取, 那么 .js 文件和 .css 文件也是如此. 我们应该将可能放在一起的资源绑起来. 这样可以为你省下一些资源, 也可以满足你追求完美的虚荣.
但切忌过度. 并不是所有东西都可以绑一块的, 没有人会将洗衣粉和饼干缠在一起的. 将有相关性的, 或者特别零碎的放在一起都是可以的, 我相信聪明的你一定会有自己的一套分类方法.
相关推荐
总结来说,这款“能将多种格式的图片转换成ICO的图标转换工具”是一个专为Windows用户设计的图像处理软件,它允许用户将各种常见的图像格式转换为ICO图标格式,以满足个性化或专业设计需求。其易用性和功能丰富性...
在网页设计中,CSS(Cascading Style Sheets)图片定位是一项关键技能,它能帮助开发者高效地管理和展示网站上的图像,尤其是当需要将多个图标整合到一张图片(通常称为雪碧图或精灵图)上时。这种方法可以显著提高...
启动图标需考虑多个密度(ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)的适配,确保在不同设备上显示清晰。状态栏和动作图标则需要遵循Android的矢量图支持,以便在不同屏幕尺寸下自动缩放不失真。 对于iOS,图标...
8. **提取和转换**:如果在网上找到一个喜欢的ICO图标,可以使用在线工具或软件将其提取出来,或者转换为其他常见的图像格式,如JPEG、PNG等。 9. **显示问题**:尽管ICO格式具有很好的兼容性,但在某些情况下,如...
4. **images**:这是存放原始PNG图片的目录,用户可能需要将待转换的PNG图标放在这里。 5. **favicon**:这个目录可能包含了已经生成的ICO图标,供用户下载或直接应用到网站中。 在实际使用这个PHP脚本时,开发者...
每个图标都需要按照相应的密度目录放置,例如,72x72像素的hdpi图标应放在项目的res/drawable-hdpi/目录下。这样,系统会根据设备的屏幕密度自动选择最合适的图标,确保显示效果一致。 图标设计也有其原则,包括易...
在Android应用开发中,UI设计是至关重要的一个环节,而菜单图标则是用户界面的重要组成部分。"android菜单图标 UC菜单图标"这个主题涉及到的是为Android应用设计的精美菜单图标,它们与UC浏览器(UC Browser)的菜单...
例如,一个“+”号在购物车中可能表示添加商品,而在聊天应用中可能代表发送消息。因此,设计师需要根据具体情境选择合适的图标。 图标可以分为多种类型,包括线性图标、填充图标、扁平化图标和3D图标等。线性图标...
启动图标通常由两部分组成:一个“白色背景”的图标(用于深色背景)和一个“透明背景”的图标(用于浅色背景)。这些图标需要放在对应的mipmap目录下,例如mipmap-hdpi、mipmap-xhdpi等。 在编码层面,你需要在...
在本文中,我们将深入探讨如何使用Ant Design库中的Upload组件,特别是当`listType`属性设置为`"picture-card"`时,实现一个功能完善的多图上传及预览功能。Ant Design是一个广泛使用的React UI框架,它提供了丰富的...
”暗示了一个为Mac用户解决图片上传问题的高效工具。描述进一步指出,这个工具名为iPic,它能够置于Mac的状态栏中,允许用户通过简单的拖拽操作实现图片的自动上传。这极大地简化了上传流程,尤其对频繁进行图片分享...
6. **优化加载**:为了提高页面加载速度,可以考虑使用 CSS Sprite 技术将多个图标合并到一张大图中,然后通过 CSS 背景定位显示所需图标,减少HTTP请求次数。 7. **可访问性**:对于无障碍性(Accessibility),...
在编程世界中,界面设计的重要性不言而喻。一个美观且直观的用户界面可以极大地...通过这些图标,你可以创造出更专业、更具有吸引力的软件,同时节省自己设计图标的时间和精力,将更多关注点放在功能实现和用户体验上。
这是一款及其强悍的图标转化工具,将自己喜欢的图片转换成图标格式,就可以随心所欲 ****************************************************** 首先声明,本人在原作者cmd基础上新加了2个辅助程序 使用起来更方便...
1. ICO图标格式:ICO是Windows操作系统中的图标文件格式,它可以包含多个不同尺寸和颜色深度的图像,以便在不同的显示环境中使用。这种格式支持从16色到32位真彩色的图像,还能包含透明区域,使得图标在各种背景下都...
"灰色小图标"这个主题暗示我们讨论的是一个包含多种灰度图标资源的集合,这些图标可能是以单色设计,即灰色调,以保持简洁和专业感。 在描述中提到,“多种图标样试,放在一张大图里了”,这通常指的是精灵图...
本项目实现的是一个带有图标的固定在右侧的导航栏,它包括了固定定位、响应式设计以及返回顶部等实用功能。下面将详细讲解相关知识点: 1. **固定定位(Fixed Positioning)**: 在CSS中,`position: fixed;`属性...
一个独特的favicon能增加网站的专业感和识别度,当用户将网站添加到书签或浏览器标签时,这个小图标就会显示出来。对于桌面应用程序,ico文件则是程序启动图标,出现在任务栏、开始菜单和桌面快捷方式上。 设计ico...
1. **创建基础图像**:首先,你需要设计一个基础的图像,这通常是一个PNG或JPEG格式的图片,包含多个尺寸,如16x16像素、32x32像素、48x48像素、64x64像素、128x128像素等。每个尺寸都应具有清晰的视觉效果,即使在...
HoverEx是一款基于jQuery的插件,专为网页中的图片设计,提供了一套丰富的鼠标悬停效果,以增强用户的交互体验。这款插件包含了多种不同风格的提示框和图片放大镜功能,以及一种随机特效的图片切换模式,使得网页中...