网页设计上边界 第1篇
JPEG（Joint Photographic Experts Group）：
特点：支持有损压缩，适合存储照片和复杂图像，压缩率高，文件大小较小。 适用场景：用于网页上展示高质量的图片，如新闻图片、产品图片等。 PNG（Portable Network Graphics）：
特点：支持无损压缩，支持透明背景，适合图形和文字结合的图像。 适用场景：适合图标、按钮、徽标等需要透明背景的图像。 GIF（Graphics Interchange Format）：
特点：支持无损压缩，最多支持256色，支持动画效果。 适用场景：适合简单的动画或图标，如表情包、简单的动画广告等。
文件格式选择：如上所述，JPEG、PNG、GIF、SVG和WebP等格式各有优势，选择时应考虑图像的用途、质量需求、文件大小和兼容性。例如，JPEG适合照片和高分辨率图像，PNG适合需要透明背景的图像，SVG适合需要缩放而不失真的矢量图形。
优化图像大小：减少图像文件大小可以提高网页加载速度，同时保持足够的图像质量。使用图像压缩工具或服务（如TinyPNG、JPEGmini等）可以有效减小文件尺寸，而不会对图像质量产生显著影响。
使用响应式图像：使用HTML的
图像压缩：在不损失重要细节的情况下，通过调整图像质量参数或使用图像优化工具来压缩图像。高质量的图像可能占用大量空间，而低质量的图像可能影响视觉体验。
提供替代文本：为图像添加alt属性，提供替代文本，以帮助视觉障碍用户理解图像内容，同时也提高搜索引擎优化（SEO）。
图像的替代文本，通常称为alt属性，是HTML中用于描述图像内容的文本。当图像无法正确显示（例如，因为网络问题、图像文件损坏或浏览器不支持图像格式）时，替代文本会作为图像的文本描述显示出来。它对于提高网站的可访问性和搜索引擎优化（SEO）都非常重要。
在HTML中，你可以通过width和height属性来直接设置图像的大小。例如：
在CSS中，你可以通过border属性来设置图像的边框。这个属性可以设置边框的宽度、样式和颜色。基本语法如下：
其中：
网页设计上边界 第2篇
无论是数字、序号、角标、图标，甚至是视觉处理后的标题文字，都能提高页面的视觉度，并给用户留下活跃生动的印象。同时，图形作为一种更直观的传达信息的方式，也使人一眼就能快速获取信息，从效率上优于用 文字表达时的逐行扫描。
图标的设计让浏览和交互操作更加方便。图与文的搭配可以降低阅读的疲劳感，也增强了排版的设计节奏感。
对数字的视觉处理也能起到类似插图的装饰效果，成为页面上的视觉要素，同时增强页面的设计感。
网页设计上边界 第3篇
常用方式：图标、加大文案字号、序号、数字等来达到加强版式率的运用，提高视觉上的丰富性。
图标表达
人们越来越认同扁平化，一方面是因为扁平化的图标看上去清新简洁，用户理解快。另一方面，与图标搭配的背景更加单纯，要么留白，要么炫简，尽可能减少给用户在视觉上干扰。好的扁平化图标不是简单地删减细节，而是着重凸显有效的信息。
图标是最为直接的表达方式，简单明确的图形，能让用户通过对图标的认识快速找到想要的功能和需求点。图标与文案的搭配有效的降低了阅读时候的疲劳感。从而加强了界面内容的节奏。运用图标的设计条理清晰，功能明确。
信息化图标能给产品增色。有趣的图标设计不仅能很好的将功能点进行区分，也能好的将软件的特性和品牌展现出来。
把图形融入到界面中，可让内容更为丰富，层次更加的分明。