cPanel 的文件管理器提供了一套图像处理工具,可以帮助我们批量处理网站上的图片,提高网站的加载速度和用户体验。这些工具包括 Thumbnailer 缩略图生成器、Scaler 图片缩放器和 Converter 图片格式转换器。
这些工具提供了一些图片优化的便利,但是使用不当可能会导致很多麻烦,因此,建议在使用这些工具之前,先阅读本篇内容,充分了解这三个工具的功能,局限,使用方法,以及注意事项,然后再决定要不要使用这些工具对图片进行处理。
![图片[2]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-16.jpeg)
点击 cPanel – Files 板块的 Images,进入到图片处理工具页面
![图片[3]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-18.jpeg)
Thumbnailer (缩略图生成器)
Thumbnailer 用于为指定目录下的所有图像生成缩略图。
缩略图可以提高网页加载速度,改善用户体验,并且可以用于创建图像库或相册。
个人觉得这个功能对 WordPress 用户来说比较鸡肋,WordPress 媒体设置中可以设置自动生成缩略图的尺寸,WordPress 也会根据需要为上传的图片自动生成多个不同尺寸的图片,显示在网站不同位置,因此用不到 cPanel 的缩略图生成功能。
如果使用的不是 WordPress 或者其他本身支持生成缩略图功能的程序建站,则可以使用 Thumbnailer 批量生成缩略图,然后根据需要将缩略图添加到指定页面或者位置。
缩略图生成流程
![图片[4]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-8.jpeg)
进入到 Thumbnailer 工具页面,首先要选择需要生成缩略图的文件或者文件夹。
点击 Actions 列中的 ”THUMBNAIL“ 按钮,打开缩略图比例设置。
设置好比例之后点击按钮 ”Thumbnail Images“,系统开始进行缩略图生成操作。
![图片[5]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-19.jpeg)
在窗口中可以看到缩略图生成的进程。
![图片[6]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-3.jpeg)
缩略图生成器在生成缩略图的同时不会删除原来的图片。
生成器会使用“tn_”前缀和原图名称为新生成的缩略图命名。
并且生成器会在原图所在的文件夹中新建一个名为”thumbnails“的文件夹,
然后将生成的缩略图存放在这个文件夹中。
例如,我要为文件夹“public_html”中的图片“wpt-hotlinked-image-stub.png”生成缩略图,缩略图生成器生成后将缩略图命名为“tn_wpt-hotlinked-image-stub.png”,并将其存放在新建的 “public_html/thumbnails” 文件夹中。
Thumbnailing…/home/waimaobb/public_html/wpt-hotlinked-image-stub.png (200×200)…wrote…/home/waimaobb/public_html/thumbnails/tn_wpt-hotlinked-image-stub.png (100×100)…Done
根据这一缩略图命名和存储规则,我们可以在页面中使用固定链接快速调用某个图片的缩略图。
要特别注意的是,缩略图生成器只处理第一级文件夹中的图片,不会处理子文件夹中的图片。
例如,在 “public_html” 这个文件夹中,有1张png图片和1个存放了10000张图片的文件夹“media”,我们为 “public_html” 这个文件夹中的图片生成缩略图时,生成器只会为其中的那1张 png 图片生成缩略图,而不会打开子文件夹“media”,然后为那10000张图片生成缩略图。
也就是说,如果图片存储方式类似 WordPress 网站后台的媒体上传设置中,勾选“以年月形式存储媒体文件” 后的存储效果,那么是无法直接为文件夹“2024”中的所有子文件夹中的图片生成缩略图的。
![图片[7]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-17.jpeg)
我们需要打开“2024”这个文件夹,然后为以月为单位,在不同文件夹中存储的图片进行缩略图生成操作。
![图片[8]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-12.jpeg)
Scaler (图像缩放器)
Scaler 图像缩放器用于改变指定图片的尺寸。
通过缩放图片,可以减小图片文件的大小,从而提高网页加载速度。
不同于缩略图生成器,图像缩放器生成的图片会直接覆盖原图,并且缩放操作可能会导致图片的失真,所以建议在操作之前先备份要缩放的图片。
图像缩放器不支持针对文件夹下所有图片的批量操作,只能对某一个具体图片文件进行缩放操作。
![图片[9]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-14.jpeg)
找到要进行缩放操作的图片,点击 SCALE 进入图片缩放设置页面。
![图片[10]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-11.jpeg)
页面中,我们可以直接输入想要的缩放后的图片尺寸,或者输入缩放比例。
Keep Aspect Ratio 建议勾选,可以保持图片的长宽比例,防止图片显示内容变形。
Retain a copy of the old image as 建议勾选,相当于给原图做了一个备份。
原图和缩放图默认存放在同一个文件夹中,原图名称会添加“old-”前缀。
缩放操作后的图片会直接替换原图,建议缩放操作后在网站前台查看图片显示效果。
如下图,图片缩放前后,在网站页面中的现实效果:
![图片[11]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-5.jpeg)
![图片[12]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-6.jpeg)
如果缩放后的图片显示失真,可以在 cPanel 的 File Manager 中找到缩放后的图片删掉,并恢复备份的原件。
或者将“Retain a copy of the old image as”保留的原图重命名,删除掉前缀“old-”,然后删除网站和浏览器的缓存,恢复原图显示。
说实话,这个工具并不好用,建议使用 PS 或 Canva 制作修改图片,然后用 Tinypng 无损压缩。
Converter (图像格式转换器)
Converter 用于将指定目录下所有图片的格式批量转换为其他图片格式。
目前 Converter 支持的图片格式有限,只支持 PNG, JPG, GIF 和 BMP 4种格式的图片之间的相互转换。
需要注意的是,不同的图像格式具有不同的特点,转换过程中可能会影响图像质量。
Converter 支持对单个图片文件进行格式转换操作,也支持针对文件夹中所有图片文件进行批量格式转换操作。
找到要进行格式转换的文件或文件夹,点击“Convert”按钮。
![图片[13]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-13.jpeg)
选择要将图片转换成的图片格式,例如 JPG。
点击 Convert 按钮,开始转换。
![图片[14]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-20.jpeg)
新页面中可以查看图片转换的进度。
![图片[15]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-4.jpeg)
图片格式转换成功之后,会在原图所在文件夹中直接生成新文件格式的图片副本。
图片名称没有任何变化。
图片格式转换器不会帮我们把网站页面中已经引用或使用的原格式图片替换为新格式图片。 要
让页面中显示处理后的图片,我们需要手动更新这些图片的链接或路径。
![图片[16]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-10.jpeg)
生成的新格式的图片虽然和原图存放在同一个文件夹中,但是这些新生成的图片并未在网站数据库中建立索引,因此在 WordPress 网站后台的 Media 媒体管理器中,不会自动添加和显示新格式图片。
另外,Media 中只会显示原图,如 bg.png, 不会显示系统自动生成的各种大小的图片,如 bg-300×169.png, bg-150×150.png, bg-1024×576.png 等等。
![图片[17]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-9.jpeg)
我们需要借助插件,如 Media Sync,将这些已经存在的新格式图片,显示到网站后台的 Media 页面中。
安装插件进入插件的设置页面,取消勾选“Dry Run(test without making database change)”
然后选中要导入的文件夹或者图片文件,开始导入。
![图片[18]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-1.jpeg)
导入成功之后,图片格式转换器生成的图片也正常显示在 Media 页面中了。
![图片[19]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/waimaob2c-cpanel-file-image-7.jpeg)
最后,再次提醒使用以上工具时注意以下几点:
- 备份: 在进行批量操作前,务必备份重要的图像文件。
- 设置: 仔细配置工具的选项,以获得最佳的处理效果。
- 测试: 在对大量图像进行处理之前,建议先对少量图像进行测试。
常见问题解答
为什么生成的缩略图质量很差?
- 缩略图的质量与原始图像的质量、缩略图的大小和质量设置有关。
- 可以尝试提高原始图像的质量或调整缩略图的设置。
为什么缩放后的图像失真?
- 过度缩放可能会导致图像失真。
- 建议适当调整缩放比例。
为什么转换后的图像颜色发生了变化?
- 不同的图像格式具有不同的颜色空间,转换过程中可能会导致颜色发生变化。
如何批量处理多个目录下的图像?
- 可以使用cPanel的文件管理器中的“选择多个文件”功能,一次性选择多个目录,然后进行批量处理。
如何恢复被误删除的图像?
- 如果启用了cPanel的备份功能,可以尝试从备份中恢复被删除的图像。
![图片[20]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/ChemiCloud-WaimaoB2C-ArticleTop.png)
![图片[21]-CPanel 系统自带图片处理工具使用教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C](https://img.waimaob2c.com/wp-content/uploads/ChemiCloud-WaimaoB2C-Tutorial.png)
暂无评论内容