Skip to content

图片

图片

常见图片格式

jpg 格式

概述:扩展名为 .jpg 或 .jpeg ,是一种有损的压缩格式(把肉眼不容易观察出来的细节丢弃了)。

主要特点:支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。

使用场景:对图片细节没有极高要求的场景,例如:网站的产品宣传图等 。—— 该格式网页中很常见。

png 格式

概述:扩展名为 .png ,是一种无损的压缩格式,能够更高质量的保存图片。

主要特点:支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。

使用场景:①想让图片有透明背景;②想更高质量的呈现图片;例如 :公司logo图、重要配图等。

bmp 格式

概述:扩展名为 .bmp ,不进行压缩的一种格式,在最大程度上保留图片更多的细节。

主要特点:支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。

使用场景:对图片细节要求极高的场景,例如:一些大型游戏中的图片 。(网页中很少使用)

gif 格式

概述:扩展名为 .gif ,仅支持256种颜色,色彩呈现不是很完整

主要特点:支持的颜色较少、支持简单透明背景、支持动态图

使用场景:网页中的动态图片。

webp 格式

(未来是这个的天下)

概述:扩展名为 .webp ,谷歌推出的一种格式,专门用来在网页中呈现图片

主要特点:具备上述几种格式的优点,但兼容性不太好,一旦使用务必要解决兼容性问题。

使用场景:网页中的各种图片。

WebP 是一种开源文件类型,它使用预测压缩来创建适合网页和移动应用程序的图像。WebP 图像比JPEG (JPG)便携式网络图形 (PNG)文件小 30%,但视觉质量相似。WebP 图像在网页和移动应用程序上的加载速度很快。

base64 格式

  1. 本质:一串特殊的文本,要通过浏览器打开,传统看图应用通常无法打开。
  2. 原理:把图片进行 base64 编码,形成一串文本。
  3. 如何生成:靠一些工具或网站。
  4. 如何使用:直接作为 img 标签的 src 属性的值即可,并且不受文件位置的影响。
  5. 使用场景:一些较小的图片,或者需要和网页一起加载的图片

.ico格式

.ico是什么格式的图片?

.ico 是一种图像文件格式,主要用于存储图标(icons),特别是在 Windows 操作系统中。ICO 文件可以包含多个不同尺寸和颜色的图标图像,这使得它们能够适应不同的显示需求,例如在桌面、文件浏览器、开始菜单或网页中显示。

ICO 文件的特点包括:

  1. 多尺寸支持:一个 ICO 文件可以包含多个不同尺寸的图标,例如 16x16、32x32、48x48 等。
  2. 多颜色深度支持:ICO 文件可以包含不同颜色深度的图标,例如 16 色、256 色、真彩色(24 位或 32 位)。
  3. 透明度支持:ICO 文件支持透明像素,这使得图标可以有更好的视觉效果。

ICO 文件通常用于以下场景:

  • 应用程序图标:在 Windows 操作系统中,应用程序的图标通常以 ICO 格式存储。
  • 网站图标:网站的 Favicon(网站图标)通常也是 ICO 格式,以便在浏览器标签页、书签栏等位置显示。
  • 文件类型图标:特定文件类型的图标也可以是 ICO 格式。

要创建或编辑 ICO 文件,可以使用多种图像编辑软件,如 Adobe Photoshop、GIMP、IcoFX 等。此外,也有在线工具可以帮助你将其他格式的图像转换为 ICO 格式。

image-20240727133244663

图片的格式非常多,上面这些,只是一些常见的、我们前端人员常接触到的。

图片压缩工具

无损压缩软件:JPG-C

image-20240531141145243

由于近几天上传图片数量过多,导致访问流量直接飙升100GB+,流量包直接耗尽。 现在对上传图片做以下调整

  • 上传大小限制 4MB
  • 图片压缩至1080p
  • 对已上传图片进行重新压缩处理

对于大图请自行使用压缩工具压缩后上传。 这里推荐一款无损压缩软件: http:forfile in*.heic;doheif-convert"$file""output/${file%.heic}.jpg"done

方法 2:使用 ImageMagick

ImageMagick是一个强大的图像处理工具,支持多种格式,包括 HEIC。

  1. 安装 ImageMagick:

    • Ubuntu/Debian:

      bash
      sudoapt-getinstallimagemagick
    • macOS(使用 Homebrew):

      bash
      brewinstallimagemagick
  2. 批量转换:在终端中运行以下命令:

    bash
    mkdiroutputmogrify-pathoutput-formatjpg*.heic

方法 3:使用图像处理软件

一些图像处理软件也支持批量转换,比如:

  • GIMP:支持 HEIC 格式,可以通过其批处理插件进行转换。
  • IrfanView(Windows):支持批量转换,需先安装 HEIC 插件。
  • XnConvert:跨平台的批量图像转换工具,支持多种格式。

方法 4:使用在线转换工具

如果你不想安装软件,可以使用一些在线转换工具,如:

你只需上传 .heic文件,然后选择输出格式即可。

注意事项

  • 批量转换时,请确保输出目录存在,以避免文件覆盖或错误。
  • 大文件或大量文件转换时,请留意系统的性能。
  • 选择合适的输出格式(JPEG 或 PNG)根据你的需求(JPEG 压缩,PNG 无损)。

以上是将 .heic图片批量转换为 .png.jpg格式的几种方法,可以根据你的实际需求选择合适的方法。

如何把.livp图片批量转成png或者jpg格式呢?

待测试。

.livp图片批量转换为 .png.jpg格式可以通过一些工具和方法来实现。以下是几种常见的方法:

方法 1:使用 ImageMagick

ImageMagick是一个功能强大的图像处理工具,可以处理多种图像格式。

  1. 安装 ImageMagick

    • Ubuntu/Debian:

      bash
      sudoapt-getinstallimagemagick
    • macOS(使用 Homebrew):

      bash
      brewinstallimagemagick
  2. 批量转换: 在终端中运行以下命令:

    bash
    mkdiroutputmogrify-pathoutput-formatjpg*.livp

    或者如果你想将其转换为 .png格式:

    bash
    mogrify-pathoutput-formatpng*.livp

方法 2:使用 Python 脚本

如果你熟悉 Python,可以使用 PIL(Pillow)库来批量转换。

  1. 安装 Pillow

    bash
    pipinstallPillow
  2. 使用以下 Python 脚本

    python
    fromPILimportImageimportosinput_folder ='path/to/livp/files'# 替换为你的 .livp 文件夹路径output_folder ='output'# 输出文件夹os.makedirs(output_folder,exist_ok=True)forfilename inos.listdir(input_folder):iffilename.endswith('.livp'):img =Image.open(os.path.join(input_folder,filename))img.save(os.path.join(output_folder,filename.replace('.livp','.jpg'))) # 转换为 .jpg# img.save(os.path.join(output_folder,filename.replace('.livp','.png'))) # 转换为 .pngprint("转换完成")

方法 3:使用图像处理软件

一些图像处理软件如 GIMP 或 Photoshop 也可以处理 .livp文件并支持批处理功能。

方法 4:使用在线转换工具

如果你不想安装软件,可以使用一些在线转换工具,尽管对特定格式的支持可能有限。搜索 "online image converter"找到合适的服务。

注意事项

  • 确保你有正确的软件和库来处理 .livp格式。
  • 在转换过程中,请注意保存路径和文件名,避免文件覆盖。

以上是将 .livp图片批量转换为 .png.jpg格式的几种方法,可以根据你的需求选择合适的方法。

需求:如何把图片裁剪成圆形图片呢?

image-20241226092023148

  • 利用wps图像查看器

image-20241226114018968

image-20241226114050151

需求:如何将图片背景设置为透明?

2024年12月26日

测试成功

https:t="1711730357270" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4392" width="16" height="16" >打赏支持