Your site could be repelling visitors right now, and it could be because of something right in front of you.
For business sites, images are the biggest contributor to page speed issues. If your homepage is loaded with high-resolution images, images are not compressed, and images are oversized, your page could easily end up in the megabytes, causing it to take eight seconds to load instead of two seconds.
In Singapore, where mobile usage is through the roof and people have very little patience, this could mean the difference between a visitor sticking around to explore your site and a visitor leaving in frustration and heading to a competitor’s site.
This guide will cover every single image optimization technique Singapore business owners and web professionals should know, from image formats to compression, lazy loading, responsive images, and best practices for alt text.
Why image performance is more critical than you think
There’s a very simple and undeniable relationship between images and site speed:
According to HTTP Archive’s Web Almanac, images account for more than half of the total page weight on average websites worldwide. For business sites rich in images, this figure could be even higher.
Google’s Core Web Vitals, now a recognized Google ranking factor since their May 2021 Page Experience Update, is a measure of real-world user experience on a site. Of these three factors, two are directly related to images:
Largest Contentful Paint (LCP) tracks how fast your site’s largest visible image or banner is loaded into view. To have a good LCP score, it should happen in less than 2.5 seconds.
Cumulative Layout Shift (CLS) tracks how much your images move around as they load, causing a visual instability effect on your site. This is also directly related to images and is penalized by Google.
Not only do poorly optimized images hurt your site’s speed, they also harm your site’s Google rankings, increase your site’s bounce rate, and damage your site’s reputation – all of which are goals of every web design investment in Singapore.
Choosing the Right File Format, First and Foremost
The first major decision in the image optimization process occurs before you upload a single image to your website. This decision revolves around the file format.
JPEG for Photos and Rich Images
For images with photo content, JPEG remains the practical choice for website design Singapore projects. These images include team photos, product images, venue images, lifestyle images, etc. JPEG’s compression reduces the file size without any appreciable loss of quality for images viewed at standard screen sizes.
For website design Singapore projects that involve service images or portfolio images, JPEG is the default choice for images with high levels of color gradient or photo content.
PNG for Graphics, Logos, and Transparency
For images with high levels of transparency or those requiring a logo with a background change, PNG is the optimal choice. PNG compression is lossless, meaning no quality loss occurs during compression. However, PNGs also mean a larger file size and are not suitable for images with photo content.
This WebP format, developed by Google and now officially supported by all major browsers since 2020, should be your go-to image format for almost all web images. WebP images are 25-35% smaller than JPEG images of similar quality.
For any Singapore web design project in construction or renovation today, WebP should be your default image format wherever browser support allows it – and by 2024, it will be almost ubiquitous on every device and browser in use.
AVIF: The Emerging Next Generation
AVIF is a relatively newer format with even better compression ratios than WebP – in some cases, it’s possible to achieve 50% smaller images than their JPEG equivalent.
Browser support is still in its early days, but it’s definitely worth considering when planning your web page design Singapore project in terms of future-readiness – especially if your web design involves a lot of images, like in an ecommerce site.
Compression: Shrinking File Size Without Losing Quality
While your image format sets your performance potential, compression is where you actually reach your potential.
There are two types of compression: Lossless compression reduces the size of your image files without removing any data, while Lossy compression reduces more data in order to provide larger reductions in size – although in many cases, this data loss is not noticeable in images where it’s applied in moderation.
However, for the majority of business sites, setting the level for lossy compression at 70-85% is the sweet spot where file sizes are small, but the images still look pretty good. At this level, images will look essentially the same as the originals at normal viewing sizes and resolutions.
Here are the tools you can depend upon for image compression, especially in the Singapore online environment:
- – Squoosh, a browser-based image compression tool developed by Google, is excellent for hands-on image compression with side-by-side comparisons
- – ImageOptim is the go-to image compression software for Mac users, especially for lossy compression
- – ShortPixel and Imagify are excellent tools for WordPress users, especially for design-based sites in Singapore
- – TinyPNG and TinyJPG are excellent tools for image compression, especially for users who prefer the simplicity of browser-based tools
The idea is to be consistent. Every image uploaded to a business site in Singapore should be compressed before it is put online. This is not optional, but an integral part of the online workflow.
More: HTTPS is important for your website. Find out more about it here.
Resizing images according to how they are to be displayed
One of the largest and most costly blunders on Singapore business websites is adding images that are significantly larger than their actual display size.
Photos taken with modern cell phone cameras or professional cameras can easily be 4,000 pixels or more in width—perfectly appropriate if you want to print large photographs or billboards. But if you upload that image to your site and it’s displayed at 800 pixels wide, the browser will still download the 4,000-pixel image and scale it down in real time.
There is no advantage to having images with that level of resolution. It only serves to slow down the site.
Practical image size guidelines for Singapore business websites:
- – Full-width hero images or sliders: Up to 1,920 pixels in width (2,560 pixels for retina displays with srcset attributes)
- – Standard images: 800 to 1,200 pixels in width
- – Thumbnail images: 400 to 600 pixels in width
- – Profile or team images: 300 to 500 pixels in width
Always resize images to their actual display size before uploading—do not resize images after they are uploaded. This can reduce the average image file size by 60% to 80% before even considering compression tools.
Implementing Lazy Loading for a Quicker First Impression
Lazy loading means holding back images that aren’t yet in view and loading them only as you scroll closer to them.
If you don’t implement lazy loading, the browser will attempt to fetch all images on the webpage as soon as you land on the webpage. This means images that you can’t see yet, like those halfway down the page, will be fetched anyway. This slows down the first impression.
With lazy loading, the images you can see as you land on the webpage will be the ones to load first. Everything else will wait its turn.
The HTML implementation of lazy loading couldn’t be simpler. You need to add the loading=”lazy” attribute to your images to enable lazy loading. This works with all major browsers without needing to add any additional JavaScript libraries.
For those who use a CMS to run their website, plugins like a3 Lazy Load or the WordPress lazy loading plugin (introduced with WordPress version 5.5, August 2020) will automatically implement lazy loading for you across all images.
This should be the norm for any quality website design services Singapore has to offer – not an optional add-on.
Responsive Images: Providing the Right Size for Every Device
For a country dominated by a mobile-first audience, the images you display need to be the right size for the device your audience is using them on – not a one-size-fits-all file.
With responsive images, the browser chooses the size of the image to display with the help of the srcset attribute. A mobile user gets a smaller version of the image, while a high-resolution desktop user gets a larger version. Both users get the optimal image for their device without wasting any additional data.
A basic srcset implementation might look like:
<img src=”image-800.jpg” srcset=”image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w” sizes=”(max-width: 600px) 400px, 800px” alt=”Description”>
This approach is a home run when it comes to businesses within Singapore, as a great deal of their online traffic is conducted over mobile networks. Sending a large image file like a 2MB image intended for a desktop screen to someone with a mobile connection is not only inefficient but actively increases the number of page bounces.
Web design firms within Singapore include infrastructure that allows images to automatically render at the appropriate size based on the device.
Descriptive Alt Text for SEO and Accessibility
Alt text is the text that is used to describe each image on a webpage, and it has a number of major uses.
As a tool for SEO, alt text provides Google with the information necessary to understand what an image is displaying, which can greatly improve image search engine placement and page relevance.
As an accessibility tool, alt text provides screen readers with the information necessary to describe an image to the visually impaired user, which is a legal and ethical requirement that should always be met with proper website design within Singapore.
Best Practices for Alt Text:
- – Specificity is good. “Singapore CBD office interior with glass partitions and open workstations” is better than “office photo.”
- – Incorporate relevant keywords as needed.
- – Keep the length of the alt text to 125 characters or fewer. That is the point at which screen readers will stop reading.
- – Avoid stuffing keywords or repeating the same phrase in multiple images.
- – For images used only for design or layout, the alt attribute should be left blank.
A Content Delivery Network Increases Everything
All the above techniques will make your images smaller. A Content Delivery Network will make them smaller still.
A CDN is a collection of servers that store cached versions of the static content of your website. These include images. If a visitor from Singapore visits your website, the images will come from the server that is closest to them. That is the advantage of a CDN.
In terms of businesses based within Singapore, CDNs like Cloudflare, BunnyCDN, and AWS CloudFront can place their nodes within Singapore or nearby Southeast Asia to greatly reduce image loading times.
This can offer latency reductions that file tweaks alone can’t offer.
In today’s world, many quality hosting providers offer CDNs as part of their base packages. So, if you’re working on a Website Design Singapore that’s intended to reach the people within Singapore, make sure to get the CDN set up as part of your initial launch process.
Fast Images, Fast Businesses
Image optimization is no longer a nicety but a necessity that every business within Singapore needs to make sure their website gets right.
By ensuring that the images load as fast as possible, you can improve Core Web Vitals, improve your search engine rankings, decrease your bounce rates, and increase the number of visitors that stay long enough to become customers.
Here’s how you can optimize your business’s images:
- * Choose the right formats.
- * Compress the files.
- * Resize the files before you upload.
- * Utilize lazy loading and responsive images.
- * Write alt text.
- * Utilize a CDN.
Each of these steps leads to the next one, which leads to the next one, and so on, to create a website that’s not only great to look at but also great to use.