image-optimizer：图像上传前优化，节省存储空间

image-optimizer：图像上传前优化，节省存储空间

image-optimizer 🎨 Optimize your Filament images before they reach your database. 项目地址: https://gitcode.com/gh_mirrors/imageopt/image-optimizer

项目介绍

在现代的Web开发中，图像文件的上传与处理是常见需求。然而，未经优化的图像上传会占用大量存储空间，影响网站性能。image-optimizer 是一个专门为 Filament 框架设计的插件，能够在图像被上传至数据库之前进行压缩和格式转换，从而节省存储空间并提升用户体验。

项目技术分析

image-optimizer 利用 Filament 的 FileUpload 组件，在上传过程中对图像进行优化。它支持多种图像格式转换，如将图像转换为 WebP 格式，以及按比例调整图像大小，同时保持原始图像的宽高比。该插件依赖于 PHP 的 GD 库来进行图像处理。

项目与 Filament v3.x 兼容，并支持 Laravel 10 和 11。用户可以通过 Composer 进行安装，并轻松集成到现有的 Filament 项目中。

项目及技术应用场景

image-optimizer 适用于任何使用 Filament 框架开发的项目，尤其是那些需要用户上传大量图像的网站和应用。以下是几个典型的应用场景：

1. 电子商务平台：商家上传产品图片时，自动压缩和转换格式，减少存储成本。
2. 社交媒体应用：用户上传头像或图片时，优化图像以减少服务器负载。
3. 在线教育平台：讲师上传课程材料中的图像，确保图像质量同时减少存储需求。

项目特点

1. 格式转换：支持将上传的图像转换为 WebP、JPEG 等格式，降低文件大小。
2. 图像大小调整：可以按比例调整图像大小，减少存储空间的使用。
3. 保持宽高比：调整图像大小时，自动保持原始宽高比，避免图像变形。
4. 简便集成：与 Filament 框架无缝集成，无需复杂配置。
5. 性能优化：通过在服务器端优化图像，减少了客户端的处理负担，提升了页面加载速度。

以下是使用 image-optimizer 的具体方法：

安装

通过 Composer 安装 image-optimizer：

composer require joshembling/image-optimizer

使用

在 Filament 表单中使用 FileUpload 或 SpatieMediaLibraryFileUpload 组件时，可以添加 optimize 和 resize 方法来优化图像：

use Filament\Forms\Components\FileUpload;

FileUpload::make('attachment')
    ->image()
    ->optimize('webp')
    ->resize(50);

以上代码将图像转换为 WebP 格式，并按原始大小的50%进行压缩。

多图像处理

如果需要处理多个图像，可以使用 multiple 方法：

use Filament\Forms\Components\FileUpload;

FileUpload::make('attachments')
    ->image()
    ->multiple()
    ->optimize('jpg')
    ->resize(50);

以上示例将所有上传的图像转换为 JPEG 格式，并按50%压缩。

注意事项

在使用过程中，如果遇到方法找不到的错误，请确保已经执行 composer update 以同步依赖。同时，如果出现上传等待问题，可能是因为跨域资源共享（CORS）设置不当，请检查并调整相关配置。

最后，image-optimizer 是一个开源项目，遵循 MIT 许可。开发者可以根据需要灵活使用和修改，同时为开源社区贡献力量。

通过以上的介绍和分析，我们可以看到 image-optimizer 是一个功能强大且易于使用的图像优化工具，适合各种需要在服务器端处理图像的场景。通过集成这个插件，开发者可以提升应用的性能，降低存储成本，并为用户提供更好的使用体验。

image-optimizer 🎨 Optimize your Filament images before they reach your database. 项目地址: https://gitcode.com/gh_mirrors/imageopt/image-optimizer