Issues with webp files & LFS

Support
, , , ,
#1

Hello, Need advice.

Having issues with webp files. Locally and on LFS they are valid, on netlify they look like squares. Here’s an example https://hazelops.com/images/about/laptop-open.webp This file I created myself and pushed to LFS.

Stock webp image looks fine https://hazelops.com/images/backgrounds/hero-area.webp

Build Log

5:32:52 PM: Build ready to start
5:32:56 PM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6
5:32:56 PM: build-image tag: v3.4.1
5:32:56 PM: buildbot version: cdc66b02d86506251d3343610a77385376c8c035
5:32:56 PM: Building without cache
5:32:56 PM: Starting to prepare the repo for build
5:32:56 PM: No cached dependencies found. Cloning fresh repo
5:32:56 PM: git clone https://github.com/AutomationD/hazelops.com
5:32:59 PM: Preparing Git Reference refs/heads/master
5:33:02 PM: Starting build script
5:33:02 PM: Installing dependencies
5:33:02 PM: Python version set to 2.7
5:33:04 PM: v12.18.0 is already installed.
5:33:05 PM: Now using node v12.18.0 (npm v6.14.4)
5:33:05 PM: Started restoring cached build plugins
5:33:05 PM: Finished restoring cached build plugins
5:33:05 PM: Attempting ruby version 2.7.1, read from environment
5:33:07 PM: Using ruby version 2.7.1
5:33:07 PM: Using PHP version 5.6
5:33:07 PM: 5.2 is already installed.
5:33:07 PM: Using Swift version 5.2
5:33:07 PM: Installing Hugo 0.67.1
5:33:09 PM: Hugo Static Site Generator v0.67.1-4F44227B/extended linux/amd64 BuildDate: 2020-03-15T19:39:16Z
5:33:09 PM: Started restoring cached go cache
5:33:09 PM: Finished restoring cached go cache
5:33:09 PM: go version go1.14.4 linux/amd64
5:33:09 PM: go version go1.14.4 linux/amd64
5:33:09 PM: Installing missing commands
5:33:09 PM: Verify run directory
5:33:10 PM: ​
5:33:10 PM: ┌─────────────────────────────┐
5:33:10 PM: │        Netlify Build        │
5:33:10 PM: └─────────────────────────────┘
5:33:10 PM: ​
5:33:10 PM: ❯ Version
5:33:10 PM:   @netlify/build 5.0.3
5:33:10 PM: ​
5:33:10 PM: ❯ Flags
5:33:10 PM:   deployId: 5f982f94f284f1a89fa96030
5:33:10 PM:   mode: buildbot
5:33:10 PM: ​
5:33:10 PM: ❯ Current directory
5:33:10 PM:   /opt/build/repo
5:33:10 PM: ​
5:33:10 PM: ❯ Config file
5:33:10 PM:   /opt/build/repo/netlify.toml
5:33:10 PM: ​
5:33:10 PM: ❯ Context
5:33:10 PM:   production
5:33:10 PM: ​
5:33:10 PM: ┌────────────────────────────────────┐
5:33:10 PM: │ 1. build.command from netlify.toml │
5:33:10 PM: └────────────────────────────────────┘
5:33:10 PM: ​
5:33:10 PM: $ hugo --gc --minify
5:33:11 PM: Building sites …
5:33:11 PM:                    | EN
5:33:11 PM: -------------------+------
5:33:11 PM:   Pages            |   7
5:33:11 PM:   Paginator pages  |   0
5:33:11 PM:   Non-page files   |   0
5:33:11 PM:   Static files     | 129
5:33:11 PM:   Processed images |   0
5:33:11 PM:   Aliases          |   2
5:33:11 PM:   Sitemaps         |   1
5:33:11 PM:   Cleaned          |   0
5:33:11 PM: Total in 89 ms
5:33:11 PM: ​
5:33:11 PM: (build.command completed in 142ms)
5:33:11 PM: ​
5:33:11 PM: ┌─────────────────────────────┐
5:33:11 PM: │   Netlify Build Complete    │
5:33:11 PM: └─────────────────────────────┘
5:33:11 PM: ​
5:33:11 PM: (Netlify Build completed in 209ms)
5:33:11 PM: Caching artifacts
5:33:11 PM: Started saving build plugins
5:33:11 PM: Finished saving build plugins
5:33:11 PM: Started saving pip cache
5:33:11 PM: Finished saving pip cache
5:33:11 PM: Started saving emacs cask dependencies
5:33:11 PM: Finished saving emacs cask dependencies
5:33:11 PM: Started saving maven dependencies
5:33:11 PM: Finished saving maven dependencies
5:33:11 PM: Started saving boot dependencies
5:33:11 PM: Finished saving boot dependencies
5:33:11 PM: Started saving go dependencies
5:33:11 PM: Finished saving go dependencies
5:33:14 PM: Build script success
5:33:14 PM: Starting to deploy site from 'public'
5:33:14 PM: Creating deploy tree 
5:33:14 PM: Creating deploy upload records
5:33:14 PM: 0 new files to upload
5:33:14 PM: 0 new functions to upload
5:33:14 PM: Starting post processing
5:33:14 PM: Post processing - HTML
5:33:15 PM: Post processing - header rules
5:33:15 PM: Post processing - redirect rules
5:33:15 PM: Post processing done
5:33:15 PM: Site is live ✨
5:33:33 PM: Finished processing build request in 37.078586243s

Netlify site: hazelops.com

Please advise.

#2

Could you check once by not publishing that file to LFS and rather using normal Git? It’s just to make sure that it’s not the LFS that’s creating a problem somewhere, because everything else is looking fine to me. The build is working just fine, no longs in browser console too, maybe, the image is getting corrupted somewhere in the transfer? I could have checked the website myself, but, your repository is private. It would be great if you can create a separate minimal reproduction or share the problematic image so others can have a look.

I’d have suggested you to check if you’re generating the WEBP properly, but, you say it’s all good locally, so, can’t say exactly where the train is derailing.

#3

I’m having a similar issue.

#4

Hi @swamidass,

Mind sharing the details after trying what’s suggested already?

EDIT: We’ll continue the discussion in your thread: Cloud Front or HTML Post-Proc Bug on Image?

1 Like