Skip to content

[Core]: webp support images #37

Open

Description

@spacecabbie

Context


webp support images


Specific

As an administrator or user uploading images, I want the system to fully support WebP image format for all image uploads, including but not limited to product images, client logos, and user avatars.

Measurable

The success will be measured by the system seamlessly accepting, storing, displaying, and processing WebP images without conversion or errors, resulting in a 25% reduction in page load times for image-heavy sections due to smaller file sizes.

Achievable

This is achievable by updating the Laravel application's image handling libraries and validation rules to recognize and process WebP files, requiring minimal changes to existing storage and display logic.

Relevant

This feature is highly relevant as it improves website performance by reducing image file sizes, enhancing user experience through faster loading times, and optimizing bandwidth usage.

Time-bound

WebP image support should be fully implemented and deployed within the next sprint to immediately leverage its performance benefits and provide a more modern image handling solution.


Arrange

  • The user is logged in as an administrator.
  • A WebP image file (example.webp) is available on the user's local machine.
  • The system has an existing feature that allows image uploads (e.g., product image upload, client logo upload, user avatar upload).

Act

  • The user navigates to a section allowing image uploads (e.g., "Add New Product" or "Edit Client").
  • The user attempts to upload example.webp using the designated upload interface.
  • The user saves the record or completes the upload process.
  • The user then navigates to a page where the uploaded image should be displayed (e.g., product detail page, client profile page, invoice displaying product image).
  • The user inspects the loaded page and image using browser developer tools.

Assert

  • The WebP image file is successfully accepted by the system during upload without any validation errors.
  • The WebP image is correctly stored on the server without being converted to a different format (e.g., JPG, PNG).
  • The uploaded WebP image is displayed correctly on all relevant pages within the application (e.g., product list, quote, invoice, user profile) across different modern browsers.
  • The image's file size in the network tab of browser developer tools is significantly smaller than an equivalent quality JPEG or PNG.
  • Page load times for pages containing the WebP image are perceptibly faster compared to equivalent pages using other image formats.
  • The system correctly handles resizing or thumbnails generation for the WebP image if such functionalities exist.
  • No visual artifacts or quality degradation are observed with the WebP image.

@spacecabbie I'm assigning this one to you so you can keep an eye on it

Activity

  1. self-assigned this
    on Jul 15, 2025
  2. added this to the v2.0.0-alpha milestone on Dec 28, 2025
  3. nielsdrost7 commented on Jul 16, 2026

    @nielsdrost7
    Collaborator

    Test Suggestions

    Added to support future implementation of this request. The issue body is unchanged.

    Very few image-upload surfaces exist to test this against today: a repo-wide search finds only two FileUpload::make(...)->image() fields, both for company branding — settings.login_logo and settings.invoice_logo in Modules/Core/Filament/Admin/Pages/Settings.php — with no explicit ->acceptedFileTypes() override, so they rely on Filament/Laravel's default image validation rule (which does accept webp in current Laravel versions). The issue's other examples — product images, client logos, user avatars — don't exist as upload fields anywhere in the codebase yet: Modules\Products\Filament\Company\Resources\Products\Schemas has no FileUpload/image field at all (product images are explicitly out of scope per the Products epic, #8), and there is no client-logo or user-avatar upload field either (see #399 for the related avatar gap). So this request is really "confirm webp works on the two existing logo fields" plus "add image upload, with webp support, to surfaces that don't have image upload at all yet."

    • PHPUnit: it_accepts_a_webp_file_for_the_invoice_logo_setting()
    #[Test]
    public function it_accepts_a_webp_file_for_the_invoice_logo_setting(): void
    {
        /* Arrange */
        Storage::fake('public');
        $file = UploadedFile::fake()->image('logo.webp');
    
        /* Act */
        $component = Livewire::actingAs($this->superAdmin())
            ->test(Settings::class)
            ->fillForm(['settings.invoice_logo' => $file])
            ->call('save');
    
        /* Assert */
        $component->assertHasNoFormErrors();
    }
    • PHPUnit: it_stores_the_webp_file_without_converting_it_to_another_format()
    #[Test]
    public function it_stores_the_webp_file_without_converting_it_to_another_format(): void
    {
        /* Arrange */
        Storage::fake('public');
        $file = UploadedFile::fake()->image('logo.webp');
    
        /* Act */
        Livewire::actingAs($this->superAdmin())
            ->test(Settings::class)
            ->fillForm(['settings.invoice_logo' => $file])
            ->call('save');
    
        /* Assert */
        $stored = Setting::query()->where('setting_key', 'invoice_logo')->value('setting_value');
        $this->assertStringEndsWith('.webp', $stored);
    }
    • PHPUnit: it_rejects_a_webp_file_that_exceeds_the_configured_size_limit()
    #[Test]
    public function it_rejects_a_webp_file_that_exceeds_the_configured_size_limit(): void
    {
        /* Arrange */
        Storage::fake('public');
        $file = UploadedFile::fake()->image('huge.webp')->size(20000);
    
        /* Act */
        $component = Livewire::actingAs($this->superAdmin())
            ->test(Settings::class)
            ->fillForm(['settings.invoice_logo' => $file])
            ->call('save');
    
        /* Assert */
        $component->assertHasFormErrors(['settings.invoice_logo']);
    }

    Edge cases worth covering: this issue's own success criteria (25% page-load reduction, thumbnail/resize handling) assume image-processing infrastructure — thumbnail generation for uploaded images — that doesn't exist anywhere in the codebase today, so that part is a separate, larger effort from "accept webp on upload."; and product images specifically remain unimplemented (no upload field exists at all), so webp support for them can't be built until the base feature (#8, product images) lands.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

refinedRefined with SMART plan / test suggestions

Type

No type

Projects

No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions