• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • About
  • Fav Books
  • Tools
  • Journal
  • Hire Me
  • Contact
Small Biz Geek

Small Biz Geek

Small Business Design, Marketing & Technology Journal

Website design services

A Journal on Small Business Design, Marketing and Technology

  • The Internet
  • Marketing
  • Graphic Design
  • Web Dev
  • Web Design
  • Social Media
  • Technology
  • Miscellaneous

2 Advantages of Using PNG instead of JPEG on Your Website

By Small Biz Geek on July 28, 2015 · Filed Under: Design, Video Updated: April 15, 2017

What format do you save your images to when designing for print or the web? Would you like to save time as well as hard drive storage?

PNG Format

It might never have crossed your mind before so I’ll assume you’re using the JPG format and have been happily doing so for years.

In this post I want to present a few reasons for switching to the PNG format exclusively. If you’re already doing this, feel free to grunt and nod with approval.

But first – and mainly for the benefit of any digital graphics newbies – let me introduce JPG and PNG.

JPG (Or JPEG) Images

JPG (also JPEG) is the well known file extension acronym for Joint Photographic Experts Group. It is a bitmap file supporting varying degrees of compression quality and is a standard format for digital imaging.

If you have a digital camera, it’ll use JPG, which is fine.

While JPG has its uses, there are limitations that can disrupt workflow and generally slow down computer generated design activities.

PNG Images

PNG stands for Portable Network Graphics and is another bitmap based image format. This format has been hanging around since 1994 and has undergone several revisions.

The PNG format was invented to replace GIF but has mostly superseded the JPG too.

It is superior (and more flexible) compared to a JPG if you’re producing graphic design. It offers a way to “future proof” your projects and take shortcuts without compromising image quality.

Here are 2 advantages…

1) Full/Variable Transparency Increases Workflow

The PNG file format supports full alpha transparency, allowing you to create graphics with varying levels of transparency. Basically you turn off any kind of background, revealing the chequered canvas background in your graphic design software.

Why is this a design shortcut?

Well, you might want to repurpose your images into other design layouts. Transparent backgrounds make this easier.

You want to quickly drop images into different graphic layouts without having to use a lasso tool to cut away flat backgrounds (like you would with JPG).

Cutting out images with backgrounds is time consuming and often results in jagged edges from pixel damage or poor anti aliasing.

PNG images also work great on website pages because you can change the background colour of the CSS containers and the transparent image sits on top undisturbed. Again, you cannot do that with a JPG because of the opaque background.

Note: a saved PNG background appears a light greyish colour in the Windows image viewer/preview mode. Once loaded into graphics software it will show its chequered background.

Search engine image results involving PNGs do not always reveal if they’re transparent. If you’re pulling images from the web you’re advised to download the image using a right click and Save As.

Dragging the image from the browser directly to PC desktop or explorer window automatically destroys transparency. Don’t ask me why this is, it just is this way.

Variable transpareny

The Opacity slider changes the degree of transparency on a Photoshop layer

The PNG comes in three types – PNG-8, PNG-24 and PNG-32 – Alpha transparency is supported by the latter 32 file type. 

Adobe Photoshop offers this alpha transparency tool on the layers palette and Paint.Net offers some transparency.

It’s best to render your images by using File > Save As instead of Save for Web & Devices.

I always choose File > Save As and then select PNG

I always choose File > Save As and then select PNG

Choosing Save for Web & Devices allows you to choose from PNG-8, PNG-24 only, but if you tick the “transparency” checkbox, this gives the equivalent of PNG-32.

PNG - Save for Weby & Devices

If you have logos or graphics created by a graphic designer, it’s best get them supplied with transparency.

Ideally, you’d get graphic design files supplied in Adobe Illustrator vector format and then save for the web as bitmap PNG.

To summarise, saving images as transparent PNG keeps your future options open and enables you to easily combine different images in layouts using the stacking order of layers in the design software.

2) Progressive Rendering is Visually More Appealing

PNG’s also support progressive rendering within browsers. Basically, the image begins blurry and becomes sharper as it loads the additional data.

This is in contrast to a standard JPG, which loads “baseline” style, presenting horizontal sections of the image, line by line, in a downward linear fashion.

It’s better to use progressive rendered images because at least the user has something to look at while they wait for the site to load.

While you can save JPG in a progressive mode (Save for Web & Devices option) the file size is still large and still doesn’t support transparency.

Saving a PNG as a progressive loading file is simple. You just select “Interlaced” when saving the file in the standard manner of File > Save As.

Save PNG as progressive loading style

The video below demonstrates how an interlaced PNG loads:

Watch video on YouTube

 

Related Posts

  • Computer Says No: Does Your Website Work for People with Disabilities?
  • Automatically Post Any RSS Feed to Twitter via Sniply and TwitterFeed
  • Twitter Tweet Chats: The Good, The Bad and The Spammy

Filed Under: Design, Video Tagged With: Design, Photoshop, Planning, PNG, Websites, Workflow

About Small Biz Geek

I'm Darren, helping small businesses with design, marketing & tech.
Read more about me and follow me on Twitter.

Small Business Website Design

Do you need help with something web related?

To hire me see the page about my services.

Reader Interactions

Get Updated by Email

If you liked this article, consider subscribing to the RSS feed by email.
Your email address won't be shared. Read the privacy policy.
* indicates required field.
Are you human? (Spam check)

Add Your Thoughts Cancel reply

Your email address is safe and will NOT be shared with anyone else.

Hateful, spammy or abusive comments will not be tolerated.

For more information please see the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

About the Webmaster

Hello, my name is Darren, a 36-year-old business enthusiast eager to learn and do good work.

I’m a website builder for hire working with small to medium businesses.

Search Website

Let’s Connect

  • LinkedIn
  • Twitter
  • YouTube

Recently Read Book

Don't Make Me think - Steve Krug

“Don’t Make Me Think: Revisited” – Steve Krug (Book Review)

A person of average technical ability must be able to navigate your website easily. This is required reading for anyone wanting to create a better experience for their visitors…

Latest Journal Entries

  • Computer Says No: Does Your Website Work for People with Disabilities?
  • Chinese Tinder Profiles Are Using Photos of Pretty Girls to Scam “Investors”
  • Small Biz Owners “Trapped” Using Email Addresses Belonging to Internet Service Providers
  • In the Pandemic, QR Codes are Finally Proving Worthy in the West
  • Small Businesses Finally Start Marketing and All It Took Was a Global Pandemic
  • Unable to Meet in Person? Communicate Stress-Free with Online Audio/Video
  • UK Contractors Operating Ltd Companies Should Be Mad as Hell with HMRC and IR35
  • 20 Years On and Website Hit Counters are Still a Waste of Pixels
  • Competitors Can Easily Edit Your Google and Facebook Business Listings
  • Waiting on Final Images for a WordPress Website? Use Temporary Placeholders and Design Around Them
  • GoDaddy Loves Spamming Branded Footer Links to WordPress Installatron Sites
  • Dealing with Negative Comments on Your Paid Social Media Posts

Footer

Primary Navigation

Home
About Darren
Good Books
My Tools
Blog Posts
Hire Me
Contact Me

Secondary Navigation

The Internet
Marketing
Graphic Design
Website Development
Website Design
Social Media
Technology
Miscellaneous

Derby & Nottingham Area

Small Biz Geek
Office 897
109 Vernon House
Friar Lane
Nottingham
NG1 6DQ

Telephone

Tel: +44 (0) 115 714 3290
Tel: +44 (0) 7951 897 243

VoIP

Skype: ilkestonwebdesign
WhatsApp: 07519 897 243

Email

[email protected]

Let’s Connect

Twitter
YouTube
LinkedIn
RSS

Subscribe to Blog by Email

Subscribe to Blog By Email

Social Calendar

WordPress Nottingham Meetup
WordPress Derby Meetup
Genesis Framework by StudioPress


Copyright © 2021 · Small Biz Geek · Privacy Policy · Commenting Policy · Website Disclaimer · ICO number: ZA305900


Written and designed by Ilkeston Web Design

This site uses cookies More info