As designers and developers, we often work within platforms that impose strict constraints. Our job isn’t just to “make it look good,” but to be creative problem solvers who work within those frameworks to achieve the professional look our clients expect.
Recently, while working on a construction client’s site built on the Houzz Website Builder, I hit a frustrating wall: my transparent icons were appearing with a solid white background.
If you’ve ever seen your beautiful PNGs suddenly “fill in” with white, here is exactly why it’s happening and how to fix it.
The Mystery: Why is my PNG turning white?
A PNG is a raster image that supports transparency. We use them for logos and icons, so they sit seamlessly on top of colored backgrounds. However, the Houzz framework (and many others) uses an aggressive image processing system.
The Technical Culprit: Automatic Conversion
When you upload a PNG to the Houzz builder, the system often converts it to a JPEG to save space and improve loading times.
Unlike PNGs, JPEGs are pixel-based images, meaning every pixel must have a color value. They do not support transparency. When the system forces that conversion, it fills the transparent “empty” pixels with a default color—usually white.
Pro Tip: You can’t bypass this with an SVG (Vector) file either; Houzz currently doesn’t accept SVG as an upload file type.
The Workaround: “Seamless” JPEGs
Since we can’t force the platform to respect transparency, we have to design for the conversion. The solution is to create JPEGs that “fake” transparency by matching the background color of the website section exactly.
My Adobe Design Workflow
Step 1: Identify Your Section Colors
In my case, the construction site used two main section colors: White and Gray. To make the icons look seamless, I needed a set of icons for each background.
Step 2: Set Up Your Illustrator Artboards
In Adobe Illustrator, I keep my workflow flexible:
- Create a Background Layer: I created a layer with a rectangle matching the exact hex code of the website’s gray background.
- Align to Artboard: Select your icon and the background circle. Use the Align Tool (set to “Align to Artboard”) to center them perfectly.
- Toggle Visibility: I can turn the gray background layer on or off depending on which version I’m exporting.
Step 3: Export for Screens
When exporting, don’t use PNG. Export directly as a JPEG. This gives you control over the compression and ensures the background color is baked into the file exactly how you want it.
- Naming is Key: Give your files keyword-rich, descriptive names (e.g.,
timber-frame-construction-icon-gray.jpg). Keyword-rich naming helps your personal file organization and can give your image SEO a small boost.
Step 4: Upload and Refresh
Back in the Houzz builder, upload your new color-matched JPEG. Once saved and published, remember to do a Hard Refresh (Command + R on a Mac or Ctrl + F5 on PC) to clear the cache and see the new, seamless look.
Final Thoughts: Designing for the Framework
It’s not always the “perfect” solution we want as developers—we’d all prefer SVG or true PNG support—but as a Full Stack Designer, it’s a vital skill. Whether the framework is converting your files to JPEG, WebP, or AVIF, understanding how the pixels are handled lets you deliver a high-quality result regardless of the platform’s rules.
