Remove White Background From That jpg

Welcome to this bluPixel Studio quick tip!

Ok new web developers out there, let’s talk about this scenario.

You open up your project, inspect the code only to see your provided header image is a jpg with a white background. The body has a background color so this will not work. We need a transparent png file.

Logo with white background

Let’s put that shiny new copy of Photoshop to use and remove the white.

Open your file in Photoshop and double click the lock to unlock the background layer.

Unlock Layer

Now that the layer is unlocked, lets double click the layer to bring up the layer style panel.

Layer Style Panel

Now we are going to use the blending options panel to remove the white from the background.

Make sure the “Blend If” is set to grey, and look for the “This Layer” slider.

Blending Options

Let’s take the slider down to a value of 220 and the white will be removed.

White removed

Now we can export that png file to add back into page.

Export

Now that we have the png file our image looks good against the colored background.

Transparent png in our code

Now that we have our image in our code and looking the way it should let’s discuss this process.

This is a common scenario, and there are a lot of different ways to accomplish this whether it be using selections, plugins, etc. If you are new to the Web Development/Photoshop workflow I encourage you to give it a shot, as it can be a quick way to get an image from an unusable state to in your code and on the web.

If you are someone like me who likes to watch as well as read to learn, click here to watch the companion video for this tip.

Thank you so much for reading!! Be sure to look around our site for other tips/tricks as we hope to add more each week.