Proxy Redirect 200: Images render badly or don't render

I have 2 Gatsby websites on Netlify (one for landing page, one for blog) under 1 domain. I serve the blog through the main website (mywebsite.com/blog), and I serve the landing page through a proxy 200 redirect (mywebsite.com).

But the proxied website renders images badly, or does not renders them.
My original website:


The same website when it is proxied with redirect 200 (no background image, and other images rendering is partial):

Hiya, could you drop a deploy log here so we can check for errors there? And your _headers file? I’m also wondering if you see any errors in your developer console? My first guess is that, with the redirect, your site is now looking for images/assets at the wrong paths, but it’ll help to have more information :mag:

Images have blurry bands when I deploy my Gatsby page, but they look normal when I build and serve the website locally:

My site:

My log:

5:49:17 PM: Build ready to start
5:49:19 PM: build-image version: 9cade8af58c2cf3a17a1e9433d2e979149488837
5:49:19 PM: build-image tag: v3.3.5
5:49:19 PM: buildbot version: 2fd8f04962d5dbc77b79b9c2f5ab7a077e87376b
5:49:24 PM: Fetching cached dependencies
5:49:24 PM: Starting to download cache of 254.9KB
5:49:24 PM: Finished downloading cache in 181.193484ms
5:49:24 PM: Starting to extract cache
5:49:24 PM: Failed to fetch cache, continuing with build
5:49:24 PM: Starting to prepare the repo for build
5:49:24 PM: No cached dependencies found. Cloning fresh repo
5:49:24 PM: git clone https://github.com/emmanuelbouviere/starter-musician-theme-1
5:49:25 PM: Preparing Git Reference refs/heads/master
5:49:25 PM: Starting build script
5:49:25 PM: Installing dependencies
5:49:27 PM: Downloading and installing node v10.19.0...
5:49:27 PM: Downloading https://nodejs.org/dist/v10.19.0/node-v10.19.0-linux-x64.tar.xz...
5:49:27 PM: 
#######################
5:49:27 PM:                  32.8%
5:49:27 PM: 
########################################################################
5:49:27 PM: 100.0%
5:49:27 PM: Computing checksum with sha256sum
5:49:27 PM: Checksums matched!
5:49:30 PM: Now using node v10.19.0 (npm v6.13.4)
5:49:30 PM: Attempting ruby version 2.6.2, read from environment
5:49:31 PM: Using ruby version 2.6.2
5:49:32 PM: Using PHP version 5.6
5:49:32 PM: Started restoring cached node modules
5:49:32 PM: Finished restoring cached node modules
5:49:32 PM: Started restoring cached yarn cache
5:49:32 PM: Finished restoring cached yarn cache
5:49:32 PM: Installing yarn at version 1.17.0
5:49:32 PM: Installing Yarn!
5:49:32 PM: > Downloading tarball...
5:49:32 PM: [1/2]: https://yarnpkg.com/downloads/1.17.0/yarn-v1.17.0.tar.gz --> /tmp/yarn.tar.gz.Zv3sIJHuI4
5:49:32 PM:   % Total    % Received % Xferd  Average
5:49:32 PM: Speed   Time    Time     Time  Current
5:49:32 PM:                                  Dload  Upload   T
5:49:32 PM: otal   Spent    Left  Speed
5:49:32 PM: 
  0     0    0
5:49:32 PM:    0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
5:49:32 PM: 
  0     0    0     0    0     0      0      0 --:--:-- --:--
5:49:32 PM: :-- --:--:--     0
5:49:32 PM: 
100    80  100    80    0     0    268      0 --:--:-- --:--:--
5:49:32 PM:  --:--:--   268
5:49:32 PM: 
100    93  100    93    0     0    144      0 --:--:-- --:--:-- --:--:--
5:49:32 PM:    144
5:49:33 PM: 
100   609  100   609    0     0    595      0  0:00:01  0:00:01 --:--:--   595
5:49:33 PM: 
  0     0    0     0    0     0
5:49:33 PM:       0      0 --:--:--  0:00:01 --:--:--     0
5:49:33 PM: 
100 1213k  100 1213k    0     0   839k      0  0:00:01  0:00:01 --:--:
5:49:33 PM: -- 5643k
5:49:33 PM: [2/2]: https://yarnpkg.com/downloads/1.17.0/yarn-v1.17.0.
5:49:33 PM: tar.gz.asc --> /tmp/yarn.tar.gz.Zv3sIJHuI4.asc
5:49:33 PM: 
100    84  100    84    0     0   2736      0
5:49:33 PM:  --:--:-- --:--:-- --:--:--  2736
5:49:33 PM: 
100    97  100    97    0     0   1660      0 -
5:49:33 PM: -:--:-- --:--:-- --:--:--  1660
5:49:33 PM: 
100   613  100   613    0     0   2927      0 --:--:-- --:--
5:49:33 PM: :-- --:--:--  2927
5:49:33 PM: 
100   832  100   832    0     0   3329
5:49:33 PM: 0 --:--:-- --:--:-- --:--:--  3329
5:49:33 PM: > Verifying integrity...
5:49:33 PM: gpg: Signature made Fri 14 Jun 2019 06:55:58 PM UTC using RSA key ID 69475BAA
5:49:33 PM: gpg: Good signature from "Yarn Packaging <yarn@dan.cx>"
5:49:33 PM: gpg: Note: This key has expired!
5:49:33 PM: Primary key fingerprint:
5:49:33 PM:  72EC F46A 56B4 AD39 C907  BBB7 1646 B01B 86E5 0310
5:49:33 PM:      Subkey fingerprint: 6D98 490C 6F1A CDDD 448E  4595 4F77 6793 6947 5BAA
5:49:33 PM: > GPG signature looks good
5:49:33 PM: > Extracting to ~/.yarn...
5:49:34 PM: > Adding to $PATH...
5:49:34 PM: > Successfully installed Yarn 1.17.0! Please open another terminal where the `yarn` command will now be available.
5:49:35 PM: Installing NPM modules using Yarn version 1.17.0
5:49:35 PM: yarn install v1.17.0
5:49:35 PM: [1/4] Resolving packages...
5:49:36 PM: [2/4] Fetching packages...
5:49:59 PM: info fsevents@1.2.9: The platform "linux" is incompatible with this module.
5:49:59 PM: info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
5:49:59 PM: [3/4] Linking dependencies...
5:49:59 PM: warning "gatsby-theme-musician > @mdx-js/mdx > @babel/plugin-syntax-jsx@7.2.0" has unmet peer dependency "@babel/core@^7.0.0-0".
5:49:59 PM: warning "gatsby-theme-musician > @mdx-js/mdx > @babel/plugin-syntax-object-rest-spread@7.2.0" has unmet peer dependency "@babel/core@^7.0.0-0".
5:50:10 PM: [4/4] Building fresh packages...
5:50:15 PM: Done in 39.53s.
5:50:15 PM: NPM modules installed using Yarn
5:50:15 PM: Started restoring cached go cache
5:50:15 PM: Finished restoring cached go cache
5:50:15 PM: unset GOOS;
5:50:15 PM: unset GOARCH;
5:50:15 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
5:50:15 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
5:50:15 PM: go version >&2;
5:50:15 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
5:50:15 PM: go version go1.12 linux/amd64
5:50:15 PM: Installing missing commands
5:50:15 PM: Verify run directory
5:50:15 PM: Executing user command: gatsby build
5:50:18 PM: success open and validate gatsby-configs — 0.067
5:50:19 PM: success load plugins — 1.127
5:50:19 PM: success onPreInit — 0.003
5:50:19 PM: success delete html and css files from previous builds — 0.006
5:50:19 PM: success initialize cache — 0.008
5:50:19 PM: success copy gatsby files — 0.035
5:50:19 PM: success onPreBootstrap — 0.017
5:50:19 PM: warning the option sizeByPixelDensity is deprecated and should not be used. It will be removed in the next major release of Gatsby.
5:50:19 PM: warning the option sizeByPixelDensity is deprecated and should not be used. It will be removed in the next major release of Gatsby.
5:50:19 PM: warning the option sizeByPixelDensity is deprecated and should not be used. It will be removed in the next major release of Gatsby.
5:50:19 PM: warning the option sizeByPixelDensity is deprecated and should not be used. It will be removed in the next major release of Gatsby.
5:50:19 PM: warning the option sizeByPixelDensity is deprecated and should not be used. It will be removed in the next major release of Gatsby.
5:50:20 PM: Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
5:50:20 PM: success source and transform nodes — 1.330
5:50:21 PM: success Generating image thumbnails — 5/5 - 0.524 s
5:50:21 PM: success building schema — 0.383
5:50:21 PM: success createPages — 0.541
5:50:21 PM: success createPagesStatefully — 0.034
5:50:21 PM: success onPreExtractQueries — 0.003
5:50:21 PM: success update schema — 0.047
5:50:22 PM: success extract queries from components — 0.346
5:50:22 PM: success write out requires — 0.004
5:50:22 PM: success write out redirect data — 0.001
5:50:22 PM: success onPostBootstrap — 0.001
5:50:22 PM: info bootstrap finished - 6.572 s
5:50:22 PM: warning the option sizeByPixelDensity is deprecated and should not be used. It will be removed in the next major release of Gatsby.
5:50:22 PM: warning the option sizeByPixelDensity is deprecated and should not be used. It will be removed in the next major release of Gatsby.
5:50:22 PM: warning the option sizeByPixelDensity is deprecated and should not be used. It will be removed in the next major release of Gatsby.
5:50:22 PM: warning the option sizeByPixelDensity is deprecated and should not be used. It will be removed in the next major release of Gatsby.
5:50:22 PM: warning the option sizeByPixelDensity is deprecated and should not be used. It will be removed in the next major release of Gatsby.
5:50:22 PM: warning the option sizeByPixelDensity is deprecated and should not be used. It will be removed in the next major release of Gatsby.
5:50:22 PM: warning the option sizeByPixelDensity is deprecated and should not be used. It will be removed in the next major release of Gatsby.
5:50:22 PM: warning the option sizeByPixelDensity is deprecated and should not be used. It will be removed in the next major release of Gatsby.
5:50:22 PM: warning the option sizeByPixelDensity is deprecated and should not be used. It will be removed in the next major release of Gatsby.
5:50:22 PM: warning the option sizeByPixelDensity is deprecated and should not be used. It will be removed in the next major release of Gatsby.
5:50:22 PM: success run static queries — 0.639 — 2/2 3.14 queries/second
5:50:59 PM: success Building production JavaScript and CSS bundles — 37.016
5:51:00 PM: success Rewriting compilation hashes — 0.001
5:51:00 PM: success run page queries — 0.062 — 6/6 98.41 queries/second
5:51:04 PM: success Building static HTML for pages — 4.817 — 6/6 8.87 pages/second
5:51:05 PM: Generated public/sw.js, which will precache 7 files, totaling 329707 bytes.
5:51:05 PM: info Done building in 49.378 sec
5:51:05 PM: Skipping functions preparation step: no functions directory set
5:51:05 PM: Caching artifacts
5:51:05 PM: Started saving node modules
5:51:05 PM: Finished saving node modules
5:51:05 PM: Started saving yarn cache
5:51:05 PM: Finished saving yarn cache
5:51:05 PM: Started saving pip cache
5:51:05 PM: Finished saving pip cache
5:51:05 PM: Started saving emacs cask dependencies
5:51:05 PM: Finished saving emacs cask dependencies
5:51:05 PM: Started saving maven dependencies
5:51:05 PM: Finished saving maven dependencies
5:51:05 PM: Started saving boot dependencies
5:51:05 PM: Finished saving boot dependencies
5:51:05 PM: Started saving go dependencies
5:51:05 PM: Finished saving go dependencies
5:51:07 PM: Build script success
5:51:07 PM: Starting to deploy site from 'public/'
5:51:07 PM: Creating deploy tree 
5:51:08 PM: Starting post processing
5:51:08 PM: 0 new files to upload
5:51:08 PM: 0 new functions to upload
5:51:09 PM: Post processing done
5:51:09 PM: Site is live
5:51:39 PM: Finished processing build request in 2m19.198354785s

I brought over your other post on a similar issue so it’s easier for us to keep track of everything here!

Images have blurry bands when I deploy my Gatsby page, but they look normal when I deploy the locally built page. Is this issue frequent?

@mostafachatillon - we think this is the same or a related issue, so i moved the post.

As emmanuelbouviere did above, can you post your deploy log please? We’re interested in seeing whether you are also having this issue with sizeByPixelDensity - we are wondering whether this is causing the problem.

Hi, @emmanuelbouviere, first I want to explain a bit more about the blurred images. I took a look at this URL and chose two images from that page:

Here is a screenshot of the two images:

screenshot

The “stand-alone” image is an image file referenced by this URL. It works correctly:

https://frosty-boyd-d6d0d5.netlify.com/static/e84bbbfc41c8a84dcb7952595fbb3475/74c1f/pharmatechs.jpg

The blurry image labeled “embedded image” is base64 encoded at text in the HTML. The HTML source for this image follows:

<span class="gatsby-resp-image-background-image" style="padding-bottom:26.31578947368421%;position:relative;bottom:0;left:0;background-image:url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMC/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAP/2gAMAwEAAhADEAAAAZbKTmD/xAAaEAACAgMAAAAAAAAAAAAAAAAAAgEUAwQR/9oACAEBAAEFAo237bcuZD//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwGq/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8BiP/EABYQAAMAAAAAAAAAAAAAAAAAAAACMf/aAAgBAQAGPwKKRSKf/8QAGRAAAwADAAAAAAAAAAAAAAAAAAHREbHw/9oACAEBAAE/IW6qNKzsOh0//9oADAMBAAIAAwAAABCED//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/EKU//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8QhD//xAAaEAACAgMAAAAAAAAAAAAAAAABEQDRITFB/9oACAEBAAE/EEo49IQMwcui0fVD/9k=');background-size:cover;display:block"></span>

It is possible to convert that text back into the JPEG format like so:

$ echo "/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMC/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAP/2gAMAwEAAhADEAAAAZbKTmD/xAAaEAACAgMAAAAAAAAAAAAAAAAAAgEUAwQR/9oACAEBAAEFAo237bcuZD//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwGq/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8BiP/EABYQAAMAAAAAAAAAAAAAAAAAAAACMf/aAAgBAQAGPwKKRSKf/8QAGRAAAwADAAAAAAAAAAAAAAAAAAHREbHw/9oACAEBAAE/IW6qNKzsOh0//9oADAMBAAIAAwAAABCED//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/EKU//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8QhD//xAAaEAACAgMAAAAAAAAAAAAAAAABEQDRITFB/9oACAEBAAE/EEo49IQMwcui0fVD/9k=" | base64 -D >> out.jpg

I am then able to examine that image and see details about it:

$ magick identify out.jpg
out.jpg JPEG 20x5 20x5+0+0 8-bit sRGB 557B 0.000u 0:00.001

The image in question is 20 pixels wide and 5 pixels high. On the displayed page, the image is about 190 by 28 pixels (a rough estimate at best). This “zooming in” on a small image to make it large is the source of the blurring.

The next question becomes: “Why is there a difference?”

There appears to be a difference is how this image is processed during the build at Netlify which differs from the local build for you. (Spoiler alert, my local build also has this issue however.)

The repo for this site is public so I cloned it, ran yarn install and yarn run build and I get the same result at the Netlify build. This is the embedded image for my local build:

<span class="gatsby-resp-image-background-image" style="padding-bottom:26.31578947368421%;position:relative;bottom:0;left:0;background-image:url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMC/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAP/2gAMAwEAAhADEAAAAZbKTmD/xAAaEAACAgMAAAAAAAAAAAAAAAAAAgEUAwQR/9oACAEBAAEFAo237bcuZD//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwGq/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8BiP/EABYQAAMAAAAAAAAAAAAAAAAAAAACMf/aAAgBAQAGPwKKRSKf/8QAGRAAAwADAAAAAAAAAAAAAAAAAAHREbHw/9oACAEBAAE/IW6qNKzuOh0//9oADAMBAAIAAwAAABCEL//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/EKU//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8QhD//xAAaEAACAgMAAAAAAAAAAAAAAAABEQDRITFB/9oACAEBAAE/EEo49IQMwYui0fVD/9k=');background-size:cover;display:block"></span>

Simply put, my fresh clone and build of this repo generates the same small image and zooms it to be larger. I’m able to reproduce this locally so this issue isn’t specific to Netlify.

As a next troubleshooting step, would you please test cloning and building this site in a new directory locally to see if you can reproduce the issue there also? If you can reproduce it locally, the issue should be resolved with that local build first. Once that is done, the Netlify build issue should also be resolved as well.

If there are other questions about this, please let us know.