Are you telling overdog or underdog stories?

I attended a function recently and was introduced to a guy I hadn’t met before. He asked me what I did, and then cut me short and proceeded to spend 20 minutes telling me all about his wonderful life. How well his business was doing, his six-figure income that was...

Felix Baumgartner didn’t feel a thing

On the 14th of October 2012 Austrian daredevil Felix Baumgartner became the first skydiver to complete a free fall jump from the stratosphere back to earth. He used a helium balloon to ascend to an incredible 39km above the earth. On his descent he reached an...

Sweet and Salty Stories

I’m not a big popcorn eater but I do have a weakness for Sweet and Salty popcorn made by Sweet As Popcorn in Raglan, NZ. There’s something about the contrast of sweet and salty flavours and the way that they interact with my palate that I find intriguing and...

Forget storytelling and start storymaking!

Imagine for a moment, that you have invented something totally novel that will revolutionise the world. Your ‘Aha!’ moment has arrived. You can’t believe no one has thought of this thing! It’s going to be fantastic and life-changing! You spend months building the...

What can content marketers learn from Dr Seuss?

Dr Seuss, one of the world’s greatest storytellers, can teach us Thing One and Thing Two about inspired story-driven content marketing. “If you never did, you should. These things are fun and fun is good.” Don’t be afraid to try something new – it might be FUN....

Are customer stories the new case studies?

Content is the single most cost-effective way to project to the world who you are and what you do. So why are we still using boring old case studies as a means to propel business? We are evolutionarily wired for stories. Reading stories releases neurochemicals that...

Are you telling your story or leaving it to chance?

You’re telling a story whether you know it or not. It’s been said time and time again that we are wired for stories. From cavemen drawing on walls to stories passed verbally from generation to generation, it’s simply in our genes. Our brains like to process...

Has your content marketing lost the plot?

There are seven model plots on which all storytelling is based. Are you using one to tell an effective story?  No matter where we are from, we have shared points across cultures and histories that wire us to respond to one of seven basic plotlines. Using these...

How to elevate your content with storytelling

We all know that wading through the multitude of content on the internet can be tedious and mind-numbing. It is a crowded, noisy place. In the age where content is king, where facts are not enough to engage customers, how do you catch interest?...

Web design trends in 2018 – New Zealand

Web design is constantly changing from year to year. Here are some trends that are making it big in 2018. Hand-Drawn Fonts Just look on Instagram to see how viral custom hand-drawn fonts are becoming in recent months. These unique typefaces add character and charm as...

With the days of slow dial-up internet long behind us, it is easy to forget about website load times and fall into the trap of throwing high-quality but cumbersome photos onto your website – straight from your digital camera. But while large graphics can look stunning when used in the right way, page load time should always be a top consideration.

Mobile Web Browsing

Although home broadband connections have never been quicker, visitors trying to find your business from their mobile phone or tablet are often throttled with slower load times and higher bandwidth costs. Not only could your website be slowing to a crawl for these users, it could also be costing them money!

This is a particular concern if your website does not have a mobile-friendly version. Mobile websites are typically designed to be the smaller and more agile counterparts to a full website. Mobile websites will often show only essential information about your business so that people on the go can quickly learn where you are, who to call, and what services your business provide.

If your website contains images of a large file size, whether they be photos, diagrams, or artwork, your mobile visitors could pay a hefty cost. For all their trouble, mobile visitors, confined to much smaller screens than those on their computers at home, will usually not even be able to enjoy the quality of your images as they are scaled down to fit their smaller screens.

Choosing the Right Image Format

One way to ensure your files are not too large is to choose the most appropriate file format for the type of image you want to display. The most important factor to consider is whether your image is a photo, or a simple graphic such as a logo or diagram. Other considerations to be aware of include whether or not your image is animated, uses transparency, or is especially colourful.

JPEG Format

JPEG (pronounced jay-peg) is a popular file format you may already be familiar with. The JPEG format is how photos are commonly stored from a digital camera. These types of files end in .jpg or .jpeg. JPEG is a great format for photographs (the P in JPEG stands for photographic), which are rich in colour and texture. JPEG works by storing the information in your image in a way which often produces a much smaller file, in the process altering the image slightly and thereby reducing its quality. This technique is called lossy, because data is lost in the process of saving to JPEG format. If done properly, the decrease in quality will be unnoticeable to the average viewer of your website.

Unless your photo requires transparent regions (such as if you are cropping out a person from their background) or is an animated image (such as a short video clip), use JPEG for all photographs.

Most digital cameras save photos in a very high resolution. This means your photos will have very large dimensions, wider and taller than most people’s screens. It is therefore critical to ensure that your photo is resized to be only as high and as wide as it needs to be before using on the web. For maximum results, save your file at a quality setting which achieves as small a size as possible without reducing the quality to a noticeable degree, and save your file without meta data. These options are available to you in many types of photo manipulation software, such as Photoshop.


  • Use JPEG for all standard photos.
  • Never use JPEG for simple graphics such as logos or diagrams.
  • Select a quality level for your JPEG files which has a balanced trade-off between size and quality.
  • Make sure the physical dimensions of your image are small.
  • Save JPEG files without meta data when using on the web.

PNG Format

PNG (pronounced ping) is a newer image format that has become popular on the web due its efficient way of storing simple graphics which contain few colours, such as logos, diagrams, and icons. PNG files end in .png. PNG stores images using a lossless technique, meaning no information is lost in the process of saving your files as PNG format. This fact means the crispness of your graphics will be maintained meaning none of the “fuzzy” look associated with poor quality JPEG files will be apparent.

PNG can also store images which contain transparent regions or even translucent (partially transparent) regions. However, PNG is not capable of handling animated images.

PNG Tips

  • Use PNG for most simple graphics.
  • Use PNG for graphics that contain transparency, especially partial transparency.
  • Use as few colours in your image as possible to decrease file size.

GIF Format

GIF (pronounced jiff, commonly as giff) is a file format that has achieved fame on the web due to its ability to save short animations, which can easily be shared with others. GIF files end in .gif. Unless your graphic is animated, there are often better formats for saving your image. Like PNG, GIF is a lossless format, and is best suited for storing graphics with few colours such as diagrams and icons. However, PNG usually results in a smaller file size. If your graphics are very small (only a few pixels high and wide) GIF can result in smaller file sizes than PNG, but this is a rare exception.

GIF can store photos which contain transparent regions, but cannot store translucency. This means each part of your graphic must be either completely opaque or completely transparent. This effect can produce jagged edges when used improperly, but works well against straight horizontal and vertical lines.

GIF Tips

  • Use GIF for short animated graphics such as loading icons.
  • For longer animations, especially video clips, consider saving in a video file format.
  • Use GIF for extremely small graphics.

Other Image Formats

In addition to the three most common image formats used on the web, JPEG, PNG, and GIF, there are a host of other formats supported by different web browsers.


SVG is an emergent format on the web, with usage increasing as web browser support increases. Like PNG and GIF, SVG is best used for simple graphics. However, unlike PNG and GIF, SVG images can be scaled up or down with no change in quality. This makes SVG a popular choice for websites which change depending on the visitor’s screen size, as they can remain sharp no matter how big or small they are presented. Unfortunately, browser support is lacking in older web browsers. If your website is only concerned with modern web standards without regard to older web browsers, SVG may be an option for you.


WebP is an image format developed by Google, which is designed to optimise images for the web by keeping file sizes smaller while retaining the same quality that JPEG and PNG provide. Although there are few trade-offs, WebP is a fairly new image format, so support is not available in a wide range of web browsers. In the future WebP may be the go-to format for all images on the web.


BMP is an image format which you may have experience dealing with through Microsoft Paint. BMP files are lossless, but are often very large – larger than any other formats specified here. As a result, web browser support is lacking for BMP. Never use BMP files on the web.


APNG is a similar format to PNG, but it has the added capability of enabling animation. Web browser support for APNG is sparse, so it is not recommended for use on the web.


ICO is a format used for saving icons. On the web, ICO is commonly used to store a website’s favicon (favourites icon), which appears on the tab of a web page at the top of your web browser, or in your list of bookmarks (also called favourites). ICO should only be used on the web for favourites icons.

More Techniques

  • Scale down your image to be only as big as it needs to be. Large images, especially photos, can bog down otherwise simple websites. Smaller images are almost always smaller in file size too.
  • Save your image in an image manipulation program such as Photoshop, which has in-built techniques for helping you keep image files small. The photoshop tool Save for Web is a great way to control the file size and quality of your images.
  • Remove extraneous meta data from your images. Meta data such as what camera your photo was taken on and on what settings, what time the image was created, and what software it was created on are nice, but add unnecessary bulk when these images are destined for web, as this data is never shown on screen.
  • To further decrease file size, use a tool such as