Gif does not play on deployment

Support
,
1

Site: https://nifty-dijkstra-83a046.netlify.app/

When deploying a next js site, the 2x2 gifs do not loop. Instead they seem to be stuck on the first frame of the gif.

I have looked into Netlify Large Media, but each gif is about 10-12 MB and in the docs it states Netlify Large Media is intended for files above 100 MB.

Deploy logs:

3:16:32 PM: Build ready to start
3:16:35 PM: build-image version: 73def8bb10593b9b818f44989a75ea508018ccb7 (focal)
3:16:35 PM: build-image tag: v4.5.2
3:16:35 PM: buildbot version: e07f38cea73012d29c839c78dec87335277fe704
3:16:35 PM: Fetching cached dependencies
3:16:35 PM: Failed to fetch cache, continuing with build
3:16:35 PM: Starting to prepare the repo for build
3:16:36 PM: No cached dependencies found. Cloning fresh repo
3:16:36 PM: git clone https://github.com/jpilapil/chrome-web
3:16:47 PM: Preparing Git Reference refs/heads/development
3:16:48 PM: Parsing package.json dependencies
3:16:49 PM: Starting build script
3:16:50 PM: Installing dependencies
3:16:50 PM: Python version set to 2.7
3:16:50 PM: v16.13.1 is already installed.
3:16:51 PM: Now using node v16.13.1 (npm v8.1.2)
3:16:51 PM: Started restoring cached build plugins
3:16:51 PM: Finished restoring cached build plugins
3:16:51 PM: Attempting ruby version 2.7.2, read from environment
3:16:53 PM: Using ruby version 2.7.2
3:16:53 PM: Using PHP version 8.0
3:16:53 PM: Started restoring cached node modules
3:16:53 PM: Finished restoring cached node modules
3:16:54 PM: Installing NPM modules using NPM version 8.1.2
3:17:06 PM: npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
3:17:06 PM: npm WARN deprecated har-validator@5.1.5: this library is no longer supported
3:17:06 PM: npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
3:17:07 PM: npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
3:17:08 PM: npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
3:17:09 PM: npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
3:17:10 PM: npm WARN deprecated mkdirp-promise@5.0.1: This package is broken and no longer maintained. 'mkdirp' itself supports promises now, please switch to that.
3:17:15 PM: npm WARN deprecated @types/web3@1.2.2: This is a stub types definition. web3 provides its own type definitions, so you do not need this installed.
3:17:15 PM: npm WARN deprecated multibase@0.6.1: This module has been superseded by the multiformats module
3:17:16 PM: npm WARN deprecated multicodec@0.5.7: This module has been superseded by the multiformats module
3:17:17 PM: npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
3:17:18 PM: npm WARN deprecated uuid@3.3.2: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
3:17:18 PM: npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
3:17:19 PM: npm WARN deprecated multicodec@1.0.4: This module has been superseded by the multiformats module
3:17:19 PM: npm WARN deprecated multibase@0.7.0: This module has been superseded by the multiformats module
3:17:21 PM: npm WARN deprecated cids@0.7.5: This module has been superseded by the multiformats module
3:17:21 PM: npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
3:20:33 PM: added 1111 packages, and audited 1112 packages in 4m
3:20:33 PM: 107 packages are looking for funding
3:20:33 PM:   run `npm fund` for details
3:20:33 PM: 20 vulnerabilities (9 moderate, 11 high)
3:20:33 PM: To address issues that do not require attention, run:
3:20:33 PM:   npm audit fix
3:20:33 PM: To address all issues, run:
3:20:33 PM:   npm audit fix --force
3:20:33 PM: Run `npm audit` for details.
3:20:33 PM: NPM modules installed
3:20:34 PM: Started restoring cached go cache
3:20:34 PM: Finished restoring cached go cache
3:20:34 PM: go version go1.16.5 linux/amd64
3:20:34 PM: go version go1.16.5 linux/amd64
3:20:34 PM: Installing missing commands
3:20:34 PM: Verify run directory
3:20:36 PM: ​
3:20:36 PM: ────────────────────────────────────────────────────────────────
3:20:36 PM:   Netlify Build                                                 
3:20:36 PM: ────────────────────────────────────────────────────────────────
3:20:36 PM: ​
3:20:36 PM: ❯ Version
3:20:36 PM:   @netlify/build 26.0.2
3:20:36 PM: ​
3:20:36 PM: ❯ Flags
3:20:36 PM:   baseRelDir: true
3:20:36 PM:   buildId: 61ca495087cc5347e4ec355d
3:20:36 PM:   deployId: 61ca495087cc5347e4ec355f
3:20:36 PM: ​
3:20:36 PM: ❯ Current directory
3:20:36 PM:   /opt/build/repo
3:20:36 PM: ​
3:20:36 PM: ❯ Config file
3:20:36 PM:   No config file was defined: using default values.
3:20:36 PM: ​
3:20:36 PM: ❯ Context
3:20:36 PM:   production
3:20:36 PM: ​
3:20:36 PM: ❯ Installing plugins
3:20:36 PM:    - @netlify/plugin-nextjs@4.0.0
3:20:50 PM: ​
3:20:50 PM: ❯ Loading plugins
3:20:50 PM:    - @netlify/plugin-nextjs@4.0.0 from Netlify app
3:20:52 PM: ​
3:20:52 PM: ────────────────────────────────────────────────────────────────
3:20:52 PM:   1. @netlify/plugin-nextjs (onPreBuild event)                  
3:20:52 PM: ────────────────────────────────────────────────────────────────
3:20:52 PM: ​
3:20:52 PM: No Next.js cache to restore.
3:20:52 PM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
3:20:52 PM: ​
3:20:52 PM: (@netlify/plugin-nextjs onPreBuild completed in 35ms)
3:20:52 PM: ​
3:20:52 PM: ────────────────────────────────────────────────────────────────
3:20:52 PM:   2. Build command from Netlify app                             
3:20:52 PM: ────────────────────────────────────────────────────────────────
3:20:52 PM: ​
3:20:52 PM: $ npm run build
3:20:53 PM: > chrome-web@0.1.0 build
3:20:53 PM: > next build
3:20:54 PM: info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
3:20:54 PM: warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
3:20:54 PM: info  - Checking validity of types...
3:20:59 PM: info  - Creating an optimized production build...
3:21:33 PM: info  - Compiled successfully
3:21:33 PM: info  - Collecting page data...
3:21:34 PM: info  - Generating static pages (0/3)
3:21:35 PM: info  - Generating static pages (3/3)
3:21:35 PM: info  - Finalizing page optimization...
3:21:35 PM: Page                              Size     First Load JS
3:21:35 PM: β”Œ β—‹ /                             12.3 kB          79 kB
3:21:35 PM: β”œ   /_app                         0 B            66.7 kB
3:21:35 PM: β”œ β—‹ /404                          194 B          66.9 kB
3:21:35 PM: β”” Ξ» /api/hello                    0 B            66.7 kB
3:21:35 PM: + First Load JS shared by all     66.7 kB
3:21:35 PM:   β”œ chunks/framework.895f06.js    42 kB
3:21:35 PM:   β”œ chunks/main.62b8ca.js         23.3 kB
3:21:35 PM:   β”œ chunks/pages/_app.7beb69.js   554 B
3:21:35 PM:   β”œ chunks/webpack.f47d69.js      773 B
3:21:35 PM:   β”” css/dac5722ffa124e551aa7.css  33.3 kB
3:21:35 PM: Ξ»  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
3:21:35 PM: β—‹  (Static)  automatically rendered as static HTML (uses no initial props)
3:21:35 PM: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
3:21:35 PM:    (ISR)     incremental static regeneration (uses revalidate in getStaticProps)
3:21:35 PM: ​
3:21:35 PM: (build.command completed in 42.8s)
3:21:35 PM: ​
3:21:35 PM: ────────────────────────────────────────────────────────────────
3:21:35 PM:   3. @netlify/plugin-nextjs (onBuild event)                     
3:21:35 PM: ────────────────────────────────────────────────────────────────
3:21:35 PM: ​
3:21:35 PM: Moving static page files to serve from CDN...
3:21:35 PM: Moved 1 files
3:21:35 PM: Netlify configuration property "redirects" value changed to [
3:21:35 PM:   {
3:21:35 PM:     from: '/_next/image*',
3:21:35 PM:     query: { url: ':url', w: ':width', q: ':quality' },
3:21:35 PM:     to: '/_ipx/w_:width,q_:quality/:url',
3:21:35 PM:     status: 301
3:21:35 PM:   },
3:21:35 PM:   { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 },
3:21:35 PM:   { from: '/cache/*', to: '/404.html', status: 404, force: true },
3:21:35 PM:   { from: '/server/*', to: '/404.html', status: 404, force: true },
3:21:35 PM:   { from: '/serverless/*', to: '/404.html', status: 404, force: true },
3:21:35 PM:   { from: '/traces', to: '/404.html', status: 404, force: true },
3:21:35 PM:   {
3:21:35 PM:     from: '/routes-manifest.json',
3:21:35 PM:     to: '/404.html',
3:21:35 PM:     status: 404,
3:21:35 PM:     force: true
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/build-manifest.json',
3:21:35 PM:     to: '/404.html',
3:21:35 PM:     status: 404,
3:21:35 PM:     force: true
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/prerender-manifest.json',
3:21:35 PM:     to: '/404.html',
3:21:35 PM:     status: 404,
3:21:35 PM:     force: true
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/react-loadable-manifest.json',
3:21:35 PM:     to: '/404.html',
3:21:35 PM:     status: 404,
3:21:35 PM:     force: true
3:21:35 PM:   },
3:21:35 PM:   { from: '/BUILD_ID', to: '/404.html', status: 404, force: true },
3:21:35 PM:   { from: '/_next/static/*', to: '/static/:splat', status: 200 },
3:21:35 PM:   {
3:21:35 PM:     from: '/api',
3:21:35 PM:     to: '/.netlify/functions/___netlify-handler',
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/api/*',
3:21:35 PM:     to: '/.netlify/functions/___netlify-handler',
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/favicon.ico',
3:21:35 PM:     to: '/favicon.ico',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/vercel.svg',
3:21:35 PM:     to: '/vercel.svg',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/assets/chrome-world.png',
3:21:35 PM:     to: '/assets/chrome-world.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/assets/discord-white.svg',
3:21:35 PM:     to: '/assets/discord-white.svg',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/assets/logo-black.png',
3:21:35 PM:     to: '/assets/logo-black.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/assets/logo-white.png',
3:21:35 PM:     to: '/assets/logo-white.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/assets/nav-logo.png',
3:21:35 PM:     to: '/assets/nav-logo.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/assets/path-of-development.png',
3:21:35 PM:     to: '/assets/path-of-development.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/assets/silver-globe.png',
3:21:35 PM:     to: '/assets/silver-globe.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/assets/twitter-white.svg',
3:21:35 PM:     to: '/assets/twitter-white.svg',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/assets/white-dagger-logo.png',
3:21:35 PM:     to: '/assets/white-dagger-logo.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/kid-images/CHROBAINTV.gif',
3:21:35 PM:     to: '/kid-images/CHROBAINTV.gif',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/kid-images/TV1.gif',
3:21:35 PM:     to: '/kid-images/TV1.gif',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/kid-images/TV2.gif',
3:21:35 PM:     to: '/kid-images/TV2.gif',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/kid-images/V-TV.gif',
3:21:35 PM:     to: '/kid-images/V-TV.gif',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/kid-images/barmel0.png',
3:21:35 PM:     to: '/kid-images/barmel0.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/kid-images/drewlocked.png',
3:21:35 PM:     to: '/kid-images/drewlocked.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/kid-images/jero.png',
3:21:35 PM:     to: '/kid-images/jero.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/kid-images/juxis.png',
3:21:35 PM:     to: '/kid-images/juxis.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/kid-images/kid1.png',
3:21:35 PM:     to: '/kid-images/kid1.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/kid-images/kid2.png',
3:21:35 PM:     to: '/kid-images/kid2.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/kid-images/kid3.png',
3:21:35 PM:     to: '/kid-images/kid3.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/kid-images/kid4.png',
3:21:35 PM:     to: '/kid-images/kid4.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/kid-images/kid5.png',
3:21:35 PM:     to: '/kid-images/kid5.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/kid-images/kid6.png',
3:21:35 PM:     to: '/kid-images/kid6.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/kid-images/kidgif.gif',
3:21:35 PM:     to: '/kid-images/kidgif.gif',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/kid-images/sooya.png',
3:21:35 PM:     to: '/kid-images/sooya.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/kid-images/teaser-kid.png',
3:21:35 PM:     to: '/kid-images/teaser-kid.png',
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     status: 200
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/*',
3:21:35 PM:     to: '/.netlify/functions/___netlify-handler',
3:21:35 PM:     status: 200,
3:21:35 PM:     conditions: { Cookie: [Array] },
3:21:35 PM:     force: true
3:21:35 PM:   },
3:21:35 PM:   {
3:21:35 PM:     from: '/*',
3:21:35 PM:     to: '/.netlify/functions/___netlify-handler',
3:21:35 PM:     status: 200
3:21:35 PM:   }
3:21:35 PM: ].
3:21:35 PM: ​
3:21:35 PM: (@netlify/plugin-nextjs onBuild completed in 183ms)
3:21:35 PM: ​
3:21:35 PM: ────────────────────────────────────────────────────────────────
3:21:35 PM:   4. Functions bundling                                         
3:21:35 PM: ────────────────────────────────────────────────────────────────
3:21:35 PM: ​
3:21:35 PM: Packaging Functions from .netlify/functions-internal directory:
3:21:35 PM:  - ___netlify-handler/___netlify-handler.js
3:21:35 PM:  - ___netlify-odb-handler/___netlify-odb-handler.js
3:21:35 PM:  - _ipx/_ipx.js
3:21:35 PM: ​
3:22:30 PM: ​
3:22:30 PM: (Functions bundling completed in 54.4s)
3:22:30 PM: ​
3:22:30 PM: ────────────────────────────────────────────────────────────────
3:22:30 PM:   5. @netlify/plugin-nextjs (onPostBuild event)                 
3:22:30 PM: ────────────────────────────────────────────────────────────────
3:22:30 PM: ​
3:22:30 PM: Next.js cache saved.
3:22:30 PM: ​
3:22:30 PM: (@netlify/plugin-nextjs onPostBuild completed in 122ms)
3:22:30 PM: ​
3:22:30 PM: ────────────────────────────────────────────────────────────────
3:22:30 PM:   6. Deploy site                                                
3:22:30 PM: Creating deploy upload records
3:22:30 PM: ────────────────────────────────────────────────────────────────
3:22:30 PM: ​
3:22:30 PM: Starting to deploy site from '.next'
3:22:30 PM: Creating deploy tree 
3:22:31 PM: 34 new files to upload
3:22:31 PM: 3 new functions to upload
3:22:39 PM: Site deploy was successfully initiated
3:22:39 PM: ​
3:22:39 PM: (Deploy site completed in 9.5s)
3:22:39 PM: ​
3:22:39 PM: Starting post processing
3:22:39 PM: ────────────────────────────────────────────────────────────────
3:22:39 PM:   Netlify Build Complete                                        
3:22:39 PM: ────────────────────────────────────────────────────────────────
3:22:39 PM: ​
3:22:39 PM: (Netlify Build completed in 2m 3.8s)
3:22:40 PM: Post processing - HTML
3:22:40 PM: Post processing - header rules
3:22:40 PM: Caching artifacts
3:22:40 PM: Started saving node modules
3:22:40 PM: Finished saving node modules
3:22:40 PM: Started saving build plugins
3:22:40 PM: Post processing - redirect rules
3:22:40 PM: Finished saving build plugins
3:22:40 PM: Started saving pip cache
3:22:40 PM: Finished saving pip cache
3:22:40 PM: Started saving emacs cask dependencies
3:22:40 PM: Post processing done
3:22:40 PM: Finished saving emacs cask dependencies
3:22:40 PM: Started saving maven dependencies
3:22:40 PM: Finished saving maven dependencies
3:22:40 PM: Started saving boot dependencies
3:22:40 PM: Finished saving boot dependencies
3:22:40 PM: Started saving rust rustup cache
3:22:40 PM: Finished saving rust rustup cache
3:22:40 PM: Started saving go dependencies
3:22:40 PM: Finished saving go dependencies
3:22:40 PM: Site is live ✨
3:22:42 PM: Build script success
3:23:30 PM: Finished processing build request in 6m55.46111141s

Any insight on the possible issues is greatly appreciated!

2

Hi @sooya

Welcome to the forums.

I’m not a Next user, but I can see you are using next/image for transformations.

GIFs not playing was reported as issue #18628 and issue #18683 which was closed in November 2020. It is possible the issue was not successfully resolved in v10.0.1 as mentioned. You might find this discussion useful too. Posting in the discussion might prove helpful too.

How the Netlify Essential Next.js Build Plugin works with next/image I cannot say, so cannot rule out an issue there.

1 Like
4

This is a good place to start, thank you !

5

I am also wondering (as I haven’t tested, or read about, it) if transforming an animated GIF is simply not possible, rendering them as static images only.

2 Likes
6

Hey there, @sooya and @coelmay :wave:

Thanks for bringing this up. Our Nextjs experts are offline for New Years, but Support has flagged this thread to review with them next week. If you make any progress in the interim just let us know.

Best,
Hillary

2 Likes
7

I seem to have found a temporary fix. Next/Image seems to be optimizing the gif as expected, setting unoptimized={true} seems to solve it for now. However loading 4 10MB+ gifs is very painful.

I look forward to hearing from your Nextjs experts!

8

Also, I have successfully rendered a .gif with the image component on Nextjs, however it was a much smaller file size.

10

Hey there, @sooya :wave:

Do you have a public repo for this project that we can see? If you do, that would be excellent!

Thanks!

13

Hey there, @sooya :wave:

We haven’t heard from you in a couple days-- are you still experiencing issues?

I just wanted to follow up with some advice from our NextJS experts. next/image doesn’t seamlessly support gifs. Because of this, our advice is to use an image tag instead of next/image in this case.

Let us know if you have any further questions.

14

Hello sorry I completely missed the messages on here! Unfortunately I cannot share the repo as it is private.

For anyone reading this with the same issue, what I had to do was set unoptimized={true} on the image component. This doesn’t do any of the lovely next js image compressing unfortunately, but it actually allowed me to loop my (painfully large) gifs.

Found this article as well that helped a lot:

3 Likes
15

Thanks so much for coming back and sharing this, @sooya :netliconfetti: Glad you found a way to make your gif play!