Skip to main content

PNG Optimization in Photoshop

out of the blue November 30, 2012

30-seconds PNG optimization in Photoshop© –

Bee Thao

When building a website, we sometimes overlook load time because we’re focused on developing the best looking and most effective site we can.  However, studies have shown that users are likely to leave if they have to wait for your site to load.  Also, 50% of users stated that a quick site is important for loyalty.  So, just creating a visually pleasing site is not going to be effective if your users leave before your page is even loaded.  This is why it is an essential part of the designing and development process.

So, what is the goal load time?  Google© sets the bar at 1.5 seconds.  Google© uses your page load time in their search ranking algorithm, so you know it is taken seriously.  When you are trying to reduce your load time, you should think about the 80/20 rule.  Ideally your page should be stiched together in 200-500ms.  20% of the time should be spent requesting HTML, the other 80% spent retrieving assets (images, css and js files).

Let’s focus on the 80%.  With CSS and JS files, the best technique would be to combine all scripts into one file and your CSS into one file.  You can also optimize your JS file and compress both CSS and JS files to make them even smaller.  This will reduce the number of HTTP calls the browser needs to make as well as the size of each file.

When it comes to optimizing your images, using Photoshop©, you should save your images with the “Save to Web & Devices” option.  If you are saving in GIF or JPG formats, there are plenty of optimization options for your to choose from.   However, if you are looking for full variable transparency, you’ll have to save as a PNG file.  With PNG, there is no optimization option in Photoshop©.  A really simple method I’ve learned is to use the posterization option, found by going to the “Layers” tab and clicking on this button  located on the bottom of the tab.  Choose posterization and adjust your levels to get the look you want.  The lower the number, the smaller the filesize.  It should take 30-seconds to optimize your png file.  In my testing, I’ve been able to reduce file size by about 33% or more.  There you have it, a way to optimize your PNG file.

If you have any cool website or image optimizing tips, please feel free to post in the comment section!