(08) 6144 3710
info (@) startdigital.com.au
Start DigitalStart DigitalStart DigitalStart Digital
  • Home
  • About
    • Reviews
    • FAQ
    • Careers
  • Portfolio
  • Services
    • Web Design & Development
    • Search Engine Optimisation (SEO)
    • Digital Marketing Agency
    • Google Adwords
    • Social Media
    • Website Management
    • Content Marketing
  • Blog
  • Contact

How to Optimise Images for the Web

Photography and images have the ability to make or break a website. Using professional photography over those taken on a phone will almost certainly improve how your business is perceived. On a page full of text, an image really is worth a thousand words. The right image has the power to create connections that are remembered long after they are seen.

Despite being incredibly important, images tend to be the most common factor slowing down the performance of a site. Is there anything more frustrating than watching the spinning rainbow wheel and waiting for images to load. Our shortening attention span means that if a page that doesn’t load within 2 seconds we’ll likely go elsewhere.

Slow page loading annoy and confuse not only the user, but also search engines. Google themselves have whole sections that recommend how to optimise your images and good SEO agencies know the importance of optimised images and fast loading websites.

So how can you avoid all of this and still showcase high resolution images?

Image Optimisation is the process of decreasing file sizes as much as possible without skimping on quality, to make sure the loading time stays under the highly demanded 2 seconds. This can be done either in the image creation phase or the upload phase. Here’s our step by step guide to making your way to the top.

Step One: Run a speed test on your site.

Without a benchmark, it’s impossible to measure improvement and adapt. Running a speed test on your page will analyse the content for efficiency as well as spit out feedback and areas for development.

Google provides a simple speed test tool, PageSpeed Insights, that assesses your site and provides a performance score, loading times for first and largest contentful paints, time to become fully interactive, and various other key data factors. It also provides a list of opportunity suggestions and additional diagnostics to help improve the speed of your page.

https://developers.google.com/speed/pagespeed/insights/

At Start we also use GT Metrix to measure site speed and performance. The results are often quite different from Googles test (go figure) but offer a different insight into load speed issues.

Step Two: Optimising during the Creation Phase

Image Size

It can be tempting to create images with a larger number of pixels to ensure the highest visual quality, however the more pixels there are the slower your site will be. It’s best practice to have images no larger than they need to be.

Image Dimensions

When uploading, images are often automatically resized to fit the space. More often than not this creates blurry, jagged, warped or cropped pictures. To avoid this, it’s best to create images based on the dimensions required before uploading.

File Format- PNG, JPEG, or GIF? What’s the best format for your image? Here’s a quick guide

PNG JPEG/JPG GIF
Graphics with fewer than 16 colours or transparent backgrounds Photographs or large/ detailed illustrations Simple graphics

Animations

*A little speed tip: we generally recommend using JPGs majority of the time, and only to use PNGs when the transparent background is required

Compression

After optimising the image size, dimensions and format, the last step is compressing the file to make sure it is the right size for the web (i.e. the fastest loading time possible). Compressing reduces the file size by reducing the number of colours and data, but also maintaining the quality of the image so these changes are un-noticeable to the human eye.

When Photoshop isn’t available we recommend using https://squoosh.app/ for JPG’s and https://tinypng.com/ for PNG images. If you’re resizing more than a handful of images then you can’t go past https://bulkresizephotos.com/en which allows you to resize images based on a variety of settings.

Step Three: Optimising during the Upload Phase

File Naming

Now that your image has the correct dimensions, it’s time to think about keyword crawling – which isn’t nearly as creepy as it sounds. ‘File name’ and ‘Alt text’ are picked up by search engines, so being as short and descriptive as possible is the way to go. Try to repeat relevant keywords from the written content of your pages into this section. The ‘image title’ can only be seen by users hovering over the image, and the ‘description’ is only seen in the backend of your site. Feel free to fill out these sections for your own benefit but they’re not thought to affect SEO crawls.

Plug-ins

If you’re using WordPress there are a range of website plug-ins to help you with any of the steps so far. These can easily be found online, but here are a few of the top tools.

https://wordpress.org/plugins/tiny-compress-images/

https://wordpress.org/plugins/imagify/

Loading Techniques

While there are multiple factors you can control, one that you can’t is the speed of the user’s connection.

One such technique is the ‘Blur up’ technique, which loads a faster low-quality image first before replacing it with the high-quality version when it has the chance to load. This gives the user something to look at rather than a blank screen, and also demonstrates that something is loading.

Another technique is the ‘Lazy load’, which loads the content that is immediately ‘viewable’ to the user, and then loads other images later on.

Bonus Tech Step : WebP

WebP is a modern-day image format that provides lossless and lossy compression for images on the worldwide web. A derivate of the VP8 video format, WebP was developed by Google after they acquired On2 Technologies (a video codecs business) for a small $106 million.

So it’s Just a Google thing?

No, Google isn’t the only digital platforms aboard the WebP train right now. YouTube (which maybe doesn’t count because the big G owns it), Pinterest and Facebook (on Android devices) are all using WebP.

As of December 2019, browser support for WebP is just over 80% with Chrome (obviously), Firefox and Opera leading the way. Internet Explorer and Safari are yet to support WebP, so you need to make sure you have a fallback for those browsers. (Unless you like missing images on your site that is…)

Show Us the Stats

Google claim WebP lossless images are 26% smaller in size compared to PNGs. Further, WebP lossless images can be anywhere from 25-34% smaller than its counterpart JPG (at the same quality).

When running our own compression tests with an 800 x 1300 pixel mockup of a site we built for New Homes WA, here’s the results –

  • JPG: 378KB
  • JPG Compressed: 81KB
  • WebP: 72KB

As one would expect, the difference in size brings about a change in loading speed. When placing each of the three different images in the same blank, standalone webpage on our website, the results weren’t surprising at all.

Coming in with the fastest load time is the WebP compression at 2 seconds, JGP compressed .5 of a second behind at 2.5 seconds and the JGP original well behind at 4.1 seconds. While those figures alone might not seem that significant, imagine the impact of WebP across each page on your website and for most of your visitors… In an age where performance is so essential to organic rankings, something as seemingly insignificant as the loading speed of your images can make a world of difference in whether you strive or survive in the digital world.

How do I use WebP files?

Within the WordPress environment itself, there are many plugins such as Imagify, WebPconv and WebP Express, which can automatically convert the images into WebP for you. With most of these plugins, the conversion can be done ‘on the fly’ or in the background and cached for media serving. If you have a WordPress installation that does not support any of these conversion methods, this can be ‘outsourced’ to another system which allows the installation. This can then be offloaded to a Content Delivery Network (CDN) to even further optimise the site and speed.

Once the plugin has been configured, the integration of WebP is quite simple. You can also replace a JPG/PNG file with a WebP file automatically, and set up backwards support for visitor browsers which don’t support the next-gen format, but that’s another blog in itself!

Optimising images for the web

Essentially the goal of image optimisation is to reduce the amount of data and load time. This makes it easier for Google to see your website, and speeds up the time users take to get to the content they’re looking for. At Start Digital, we’re true optimisers at heart. We concern ourselves with optimising as much as your website as possible from standard image compression through to hosting and server arrangements. If you’re interested in partnering alongside a cutting-edge, proven and results-driven SEO agency, get in contact with Start Digital!

startdig

We are a collective of designers, coders, producers and technologists from around the world who collaborate on a shared passion for innovative websites. Based in Perth, Western Australia, we bring style and innovation to the projects we undertake. Taking time to understand our clients requirements we strive to produce quality web design work for an affordable price. We then leverage our years of experience to make sure that our websites are responsive, SEO friendly and meet the clients requirements.

More posts by startdig

google reviews

Start Digital
Start Digital
5.0
powered by Google
Jack McLoughlin
Jack McLoughlin
17:04 29 Jun 20
Thoroughly professional and well communicated. Thanks Neil
aimxi online
aimxi online
04:37 15 May 20
I am from Brisbane, my name is Craig, I have a dog training company, it was my first time attempting on page SEO, after calling nearly all SEO companies in Brisbane, Sydney, and Melbourne, this was the only place that gave me some time to help me out. 5 star from me, well done in being a human and not worrying about what you could have got from me. hats off to you !. from dogtrainingbegins.com.au
Sheri Macmahon
Sheri Macmahon
09:04 17 Jan 20
Knowledgable, inspiring and helpful. Getting my online presence created and managed by the Start Digital is the BEST decision I ever made.
Hello :-)
Hello :-)
12:39 12 Jun 19
Neil & The Team at Start Digital are fantastic to work with. Our new website is exceptional. The guys here have fresh, modern ideas and the process from start to finish was flawless. Highly recommended.
Blank Walls
Blank Walls
03:57 11 Jun 19
Neil and the team at Start Digital provide such an excellent service and have been a massive help for us since we launched late 2018. Their attention to detail is unmatched compared to other digital agencies we've dealt with, and the team go out of their way to ensure the best result is achieved in the most time & cost efficient way. Thanks again Start Digital
Move Homes
Move Homes
00:18 11 Jun 19
A huge thank you to Neil and the Start Digital team! We engaged them to redesign our Move Homes website to take our brand to the next level. Not only does the website look fantastic, but throughout the website build we received frequent and transparent communication- we knew exactly what was happening and why. Start Digital listened to what we needed and would offer their advice on how to achieve our goals. Aside from their expertise, they’re also great people and really easy to deal with. We look forward to working on more projects over the coming years!
Sheila Woods
Sheila Woods
04:36 12 Mar 18
Neil Mason and the Start Digital team have done a tremendous job with the design and implementation of Interstaff’s new website. Our brief to Neil was for a clean, modern website which visually communicated our brand values, ‘sharp, dependable, expert and human’ to both business and individual clients, and importantly to offer an engaging and easy-to-navigate online experience optimised for SEO. We are delighted with the design as well as the level of consideration and attention to detail Neil and his team put into shaping the online experience of our brand. Start Digital have been very flexible and easy to collaborate with and nothing was ever too difficult. They went above and beyond – even working over the weekend to help us have our website ready to launch ahead of one of our key business seminars. We look forward to continuing to work with Neil and his team in the future and would definitely recommend their services.
iQuest Consulting
iQuest Consulting
05:48 21 Feb 18
The Start Digital team built us a new website and have been managing our SEO for over a year now. During that time our site has moved into the top five on page 1 of Google for keywords such as IT Company Perth and IT Support Perth which has increased our traffic considerably. We're very proud of our website and highly recommend Start Digital.
Heather Bush
Heather Bush
01:02 16 Feb 18
Neil and his team at Start Digital go above and beyond expectations. Having worked with many web agencies I can honestly say that Start have been one of the most open and cost effective agency I have worked with . They come highly recommeded
Anthony Godin
Anthony Godin
05:11 04 Jan 18
Excellent Perth website design, development and SEO agency
Uniting ChurchWA
Uniting ChurchWA
06:58 06 Dec 17
After years of tolerating our old website, we are now proud owners of a sleek, responsive and easy to use new site, thanks to Start Digital. Professional, practical, affordable and easy to work with-Neil and his stellar team delivered our site along with 22 additional sites for some of our congregations. Our organisation is complex and this project was massive. Throughout the project, Start Digital were flexible and patient with us. They responded quickly to emails and phone calls, kept us in the loop and always made time to touch base in their cool office. We can’t thank the team enough for their tremendous effort. It’s only been a month, but we have received plenty of positive feedback since launching the new site. We look forward to working with Start Digital for future digital projects and highly recommend anyone who needs a new website to give them a call.
Amantha Imber
Amantha Imber
08:25 02 Dec 17
Neil and the team created an AMAZING website for Inventium. We have received so much positive feedback since launch. I highly recommend Start Digital - they are awesome!
Lee Bramley
Lee Bramley
03:54 16 Nov 17
Fantastic Service, Really Knowledgeable in all areas of Website and Marketing strategies, they built us a fantastic looking site and nothing was too much for them throughout the process, We also found them to be very reasonably priced compared to other quotes we had, highly recommended.
Dean Capelli
Dean Capelli
06:22 11 Jul 17
Start Digital have built 3 websites for The Highways Group. We've been impressed with their attention to detail and quality of design every time. They're a friendly, professional agency and our go to web team.
John Argiropoulos
John Argiropoulos
07:45 19 May 17
We highly recommend Start Digital service, their efficient , personnel approach and professional skills gave us great results thanks .
Mitch Capelli
Mitch Capelli
22:13 25 Nov 16
Knowledgeable and excellent service at a great price I highly recommend Start Digital. We engaged them to redesign our website and manage our online presence. Previously we were a few pages back on a google search, however after only a few months we are in and around the top 5 on the first page. The guys at Start were great to deal with providing straight forward easy to understand information without the typical sales pitch that we have experienced many times before from other providers in the industry. We continue to receive updates on the progress of our website and their SEO service all for a very reasonable rate (ie. much cheaper than we were previously paying for a lesser service)
Eva Wood
Eva Wood
01:24 23 Nov 16
Neil and his team was responsible for the design and re-branding of our website, business cards and marketing material. They quickly understood our business, they identified the market we needed to target and delivered an excellent solution to match. We would highly recommend Start Digital.
Compac Marketing
Compac Marketing
04:05 14 Oct 16
Neil and the guys at Start Digital took care of some problems we had with our website performance. They were really efficient, responsive, easy to get along with and gave us some great pointers to help us with SEO. Unlike many digital marketing companies out there, Start Digital were very genuine and well-priced. Would definitely recommend their services to others.
Paul Avery
Paul Avery
05:23 13 Oct 16
Great design ideas and technical capability means a complete solution for small and medium sized businesses like us. Neil & Co actually take an interest in what you are trying to achieve rather than just turn and burn volume website factories out there! I recommend them.
Claire Leech
Claire Leech
02:11 04 Oct 16
We have had the pleasure of working with the team at Start Digital recently as we wished to update our website for our restaurant business. WOW! An amazing new, innovative, trendy and professional approach taken by these guys has resulted in a brilliant new site, clearly directing so much more traffic through our business resulting in increased brand awareness and google presence. As a relatively new business, Start Digital will definitely be going places ! We really look forward to continuing to work with them in the future and watch both our and their business grow! Thanks Neil and the team at Start Digital.
Next Reviews

  • You may also like

    Brands To Watch In 2021

    Read now
  • You may also like

    7 Questions You Must Ask When Selecting a Web Agency : A Mini Guide

    Read now
  • You may also like

    7 Reasons Why Your Website Needs A Redesign

    Read now
  • You may also like

    A Beginners Guide to SEO in 2019

    Read now
  • You may also like

    The Best 30 Free Design Resources for 2019

    Read now
  • You may also like

    15 of the Best Stock Image Sites to Use Now

    Read now

enough about us, let's talk about you.

Let's Start Talking
Free Quote
Free Digital Marketing Audit

Want to reach more prospective clients online? Your first step should be a digital audit.

Get Your Audit
Free Website Quote

Tell us what you need and we'll get back to you with an indicative price.

Get A Quote
Free SEO Price List

Looking for a local SEO team that understand everything Google? Drop us a line today!

Get SEO Pricing

A: Level 34, 152 St Georges Terrace,
Perth, Western Australia 6000

E: info@startdigital.com.au
P: (08) 6144 3710

Creation

  • Web Design
  • Web Development
  • Ecommerce Web Design
  • Website Photography
  • WordPress Websites
  • Graphic Design

Marketing

  • Search Engine Optimisation (SEO)
  • Social Media
  • Content Marketing
  • Digital Marketing Agency
  • Google Ads / Adwords
  • Messenger Bots

Strategy

  • Branding Agency
  • Market Research
  • Reputation Management
  • Voice Technology
  • Website Hosting
  • Website Management

helping australian businesses with everything digital!

Privacy Policy | Terms & Conditions | © 2021 Start Digital. All Rights Reserved
  • Home
  • About
    • Reviews
    • FAQ
    • Careers
  • Portfolio
  • Services
    • Web Design & Development
    • Search Engine Optimisation (SEO)
    • Digital Marketing Agency
    • Google Adwords
    • Social Media
    • Website Management
    • Content Marketing
  • Blog
  • Contact
Start Digital