We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you agree to our cookie-policy

SEO ENQUIRY

First, we need your contact details…

SEO ENQUIRY

Which SEO services are you interested in?

SEO ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

SEO ENQUIRY

How soon are you looking to kick off this project?

SEO ENQUIRY

What budget guidance are you working on this project?

SEO ENQUIRY

What budget guidance are you working on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
YELLOWBALL LITE

Unfortunately, you don’t qualify for a bespoke project, but there is good news!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

VISIT YELLOWBALL LITE

Step 1

of 6

WEB DESIGN ENQUIRY

First, we need your contact details…

WEB DESIGN ENQUIRY

Which web design services are you interested in?

WEB DESIGN ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

SEO ENQUIRY

How soon are you looking to kick off this project?

WEB DESIGN ENQUIRY

What budget guidance are you working on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
YELLOWBALL LITE

The end-to-end delivery of bespoke web project akin to the style and quality of our portfolio typically start from £25,000.

Based on your budget guidance, we’d recommend exploring Yellowball Lite – our flexible WordPress theme that is perfect for small businesses, startups, consultancies and charities. Learn more about Yellowball Lite and speak to one of our specialists on this dedicated site. It’s all the best from Yellowball, now fast, affordable and available anyone, anywhere.

VISIT YELLOWBALL LITE

Step 1

of 5

GRAPHIC DESIGN ENQUIRY

First, we need your contact details…

GRAPHIC DESIGN ENQUIRY

Which design services are you interested in?

GRAPHIC DESIGN ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

GRAPHIC DESIGN ENQUIRY

How soon are you looking to kick off this project?

GRAPHIC DESIGN ENQUIRY

What budget guidance are you working to on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
GRAPHIC DESIGN ENQUIRY

Most design projects at Yellowball are typically more than £500 and our agency-wide hourly rate is £145 plus VAT.

We’re probably not a good strategic fit for this project but you could try the freelancer networks at Fivver.com or upwork.com.

Step 1

of 5

PPC ENQUIRY

First, we need your contact details…

PPC ENQUIRY

Which PPC services are you interested in?

PPC ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

PPC ENQUIRY

How soon are you looking to kick off this project?

PPC ENQUIRY

What budget guidance are you working on this project?

PPC ENQUIRY

What budget guidance are you working on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
YELLOWBALL LITE

Unfortunately, you don’t qualify for a bespoke project, but there is good news!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

VISIT YELLOWBALL LITE

Step 1

of 6

Mobile Menu
Mobile Menu

Award-winning work, focussed on results

Web Design

Faith Ibiza

Web Design

Forj

Web Design

Adara

Web Design

Tomatin

SEE All PROJECTS
Aug 2019
1 MIN READ

Image File Types – Explained

lizzie ayton

A picture’s a picture, right? Not when it comes to web design and SEO. Believe it or not, image optimisation has a dramatic effect on your website’s SEO. So dramatic, in fact that we wrote an entire blog on it! Each file type has its own benefits, drawbacks and have their purpose. So, what’s the difference between PNG and JPEG? GIF and SVG?

A Picture’s worth a thousand words (or 1,091)…

Before we dive into the ins and outs of image file types, we’ve created this handy infographic for you to download, share with co-workers or friends or even link back to!

JPEG

JPEGs are the old faithful of image file types. They support a large colour pallet whilst maintaining a small enough file size to not take up too much bandwidth when it comes to users loading a web page. This means you can maintain a good page load speed, as well as high image quality which makes Google happy, considering page load speed is now a metric that Google use to determine their page rankings.However, the main drawbacks of JPEGs are:
    • They’re lossy
    • Incapability of transparency.
When zooming in on a JPEG, areas of an image can become blurred and blocky which is far from ideal when you’re looking to use a “zoom” function on your site. The main work around for this is to use a link that opens the image with the zoom capability inside a lightbox on the webpage. We’ll cover transparency more comprehensively in the next section, but it’s important to note that JPEGs don’t support transparency. Any imagery without a background, will automatically be rendered with a white, opaque background.

PNG

PNGs were developed in 1996, soon after the GIF (1987) and JPEG (1992) format, and they aim to bring together the best of both worlds. They’re lossless, have a 16,000,000 wide colour palette and support transparency. So why aren’t we using them over and above the humble JPEG? It all comes down to file size. A large image file size means longer loading times and therefore, possible lower SERP rankings. Adobe Photoshop (or some of the free alternatives listed below) enables you to save PNGs as two different file sizes, however these still don’t compare to the compact file size of a JPEG.

PNG-8 256 colour palette | smaller file size | will not provide the same image quality as a JPEG

PNG-24 16,000,000 colour palette | larger file size | increases page load time if used too regularly. I.e. instead of a JPEG

With regards to transparency, this is the main advantage that PNGs have over JPEGs. Take the Yellowball logo for example. The image on the top is a PNG, whereas the image at the bottom is a JPEG.If you’re looking to place a coloured, transparent overlay to an image, a PNG will support the transparency whereas a JPEG wouldn’t. It’s for this very reason that PNGs are still a very popular format to use on websites as it provides more flexibility on the page. PNGs allow web designers to create layers on a page to help emphasise certain elements by adding depth of field.

WEBP

WebP is a new image format developed by Google developed in 2010. It provides both lossless and lossy compression formats for images used on the web. Their smaller file size makes for improved load speeds whilst maintaining a higher quality of image. Lossless WebP images have a file size that’s 26% smaller than that of a PNG, and up to 34% smaller than comparable JPEGs. Additionally, both lossless and lossy WebP images support transparency much like PNGs, with lossy images coming in at file size 3x smaller than that of a PNG.Although this file type is 9 years old, it is still not universally used or even known about, people often still opt for JPEGs and PNGs for a number of reasons.1. People use what they know: More trusted file types like JPEGs and PNGs are far more popular across the web.2. Software compatibility: When the world’s most popular photo editing software (Photoshop) doesn’t even allow you to export the file type without a plug-in, it’s made a lot harder for users to export their website images in a WEBP format.As people become more savvy to the importance of load speed on websites we predict an eventual shift in all static web images to WEBP, at the moment it isn’t easy to use the file type so people don’t.

GIF

GIFs are a lossless image format with a limited colour palette which makes them far from ideal for uploading digital photography, but ideal for buttons and blocks of colour. You may be more familiar with the term GIF in relation to sending your friends funny GIFs of short image/video hybrids from Friends episodes. However, a GIF can also be a stationary, solid image. They’re rarely used throughout web design as the lossless benefit of a GIF is not worth the sacrifice of the extremely limited colour palette. If a lossless image is required, a PNG will be used in place of this due to the superior colour palette available.GIFs can be a speed saving alternative for video content, they are great for small simple video loops or animations, for this reason, online adverts are often in GIF format to draw the users eye.

SVG

SVG stands for Scalable Vector Graphic. Because SVGs are vector graphics as opposed to raster images like PNGs and JPEGs, they can be resized and scaled without losing image quality and clarity. This scalability makes them the ideal candidate for graphics that are used across desktop and mobile, ideal for responsive websites.The other key benefit of SVGs is their small file size. Because vector graphics are scalable, they can be saved into a very small file size regardless of how the image is to be displayed on a webpage. With raster images (PNG, GIF, JPEG), the image needs to be uploaded at the largest possible size it could be viewed at. This means that a site on a computer with a small screen, is still having to load an image intended for a bigger screen. Reason being, an image can be reduced in size whilst maintaining quality (to a point), however the reverse isn’t true.SVGs are perfect for logos, icons and any other simple vector illustrations you want to use on websites. They are tiny files that are pixel-perfect across devices.So there you have it, your comprehensive guide to image file types, their uses and implications. Check out our image optimisation blog here to delve deeper.
BACK TO ALL POSTS

Let's work together

Ready to start your next project? Call, live chat or send us a message today. We're here 9am to 6pm Monday to Friday






    I would like to receive news and information from Yellowball