Web Developers – Export smaller files by using “Export As” in Photoshop

For years we have used the “Save for Web” export in Photoshop for our files. I now want to encourage you to give the “Export As” option a shot.

Export As Menu

This new way of exporting is robust and has a real nice way for us to turn those large png files into much more manageable file sizes for our web development.

One of the things we struggle with as web developers is keeping file size down while still maintaining the good look of our images and graphics. Using “Export As” can give us some great file size savings while preserving the look of our file. Let’s take a look below.

Here I have a simple graphic with 3 Watercolor Artist magazine covers stacked.

Graphic in Photoshop

Let’s take a look at what the file size will be when we use “Save for Web”.

Save for Web – 239k

So 239k for “Save for Web”, let’s now look at what “Export As” will give us. Shift-Command/Ctrl-E on your keyboard.

Export As – 270k

The 270k is no savings at all, but try selecting the “Smaller File (8-bit)” checkbox.

Savings of 203k

We gain a substantial amount of file size savings down to 67k and the graphic still looks great.

When we are constantly battling to make our pages lighter and better for our end users every little bit counts. Adding this way of exporting our png files can be another step that we can use to serve better pages to the end user.