Optimizing Images For Web

Provide your visitors with a faster browsing experience and improve your website's search engine position by optimizing images prior to uploading them to your website.

The file size of the images shown throughout your web pages plays a major role in "Page Speed" - which is a metric that measures the time it takes to fully load a page of your website. Larger images have a negative impact on page speed, and consume more storage and bandwidth than smaller images (which can increase your web hosting costs).

Search engines like Google and Bing evaluate page speed, and prefer to direct search traffic to faster websites. So when optimizing your website to rank competitively in search engines, page speed is an important factor to consider.

Web browsers such as Edge, Chrome and Safari also tend to struggle to scroll and perform smoothly when there are a lot of really large images rendered on a single web page, and you might notice additional slowness when editing website pages.

Oncord automatically optimizes images by resizing them down to an appropriate resolution and resampling them without introducing noise.  You can also improve this by selecting the best file format for the type of image you're uploading and resizing responsive images to specific dimensions.

How to Optimize Images for Web Use

The aim of optimizing images is to decrease the file size as much as possible, without noticeable quality loss ("pixelation" or blurriness). 

There are three main points that contribute to the size of an image: 

The file format (.png, .jpg or .svg files). 
The amount of compression that has been applied. 
The width & height of the image.

The following applications are often used to re-size images, or to adjust the file format prior to uploading to Oncord*: 

Adobe Suite (Photoshop, Illustrator and other Creative Suite Apps)
Adobe Free Image Resizer: https://www.adobe.com/express/feature/image/resize
Canva: https://www.canva.com/

*Please note these links are provided for convenience and informational purposes only.

The File Format

Oncord supports all common image formats, however choosing an appropriate file format can help drastically reduce the size of your image. For simplicity, we've listed three common formats that suit web use: 

JPG Images:
This format suits photographs, and images that include a lot of colours, gradients, shadows and detail. JPG images are usually the go-to choice for product photos and blog images uploaded to your website. JPG images don't support transparency though, so they don't work well with logos or icons.

PNG Images: 
This image format supports transparency, and is ideal for use with icons, logos, and in some cases digital illustrations and software screenshots. In most cases, you'll find that PNG images appear clearer than JPG images, however photographs or images with a lot of detail are usually too large when formatted as a PNG file. 

SVG Images: 
SVG is closer to a web html document than an image format. Code within the SVG document describes the shapes, fonts and colours that make up the image. SVG images support transparency, and suits logos, icons and some digital images. Where possible, formatting your logo as an SVG usually produces the highest quality outcome. A primary drawback of SVG files, is that they often require a designer to produce, and are not suitable as a format for photographs. 

Check out the examples below (a smaller file size is ideal):

Photo provided by Hugh Whyte via Unsplash.

When JPG images appear smaller or larger than their native size, you'll notice that visual artefacts are introduced. With PNG images, you'll notice less artefacts, however lines begin to appear more "jagged".

See this in action: While viewing the MuzosDirect logos above, zoom your web browser all the way in, so that the logo images stretch. Pay particular attention around the triangle part of the logos, and note the difference between the JPG and PNG artefacting. 

Even when zoomed - the SVG outcome is much clearer, and should scale endlessly without introducing artefacts. 

A warning - JPG or PNG images can be embedded within an SVG file, however the image will continue to perform as per their usual format, meaning they won't scale endlessly without artefacting, or appear sharper. To convert an image to an SVG, the shapes need to be re-drawn (usually by a designer) so that they are coded correctly within the file. 

Image Compression

Compressing an image simplifies the data that describes the file, which can drastically reduce it's size. When a light amount of compression is used, the result is typically very hard for our eyes to see. However, as more data is taken away via compression, quality is lost and artefacts are introduced (resulting in blurriness or "pixelation"). 

Good news if you're an Oncord user - image compression is handled for you. When a JPG or PNG image is uploaded to Oncord, compression is applied automatically to help reduce the file size, with minimal quality loss.

Where Oncord is not used, the following image compression tools are a common go-to:

PNG Images: https://tinypng.com/
JPG Images: https://tinyjpg.com/

Image Width & Height

The final point which contributes to the size of an image file, is the width and height of the image.

The width and height of images is usually measured in "pixels" or "px", where the first number is the width, and the second is the height (ie. "400 x 600" means 400px wide, and 600px tall). 

If you're working with a designer, they might prefer to provide you with a similar specification of sizes to better suit your particular situation. Otherwise, we've provided some rough guidance below that will suit most websites. 

If you're a designer or architect, you would typically opt to use larger, high quality images, and be less concerned about page speed.

However, a website built for a consultant or accountant and optimized for search would usually favour page speed over image quality.

You'll also notice that only a width is defined below. This is because with web, image height typically scales proportionally as image width grows and shrinks to suit different screen sizes.

Typical Image Sizes To Favor Page Speed:

For Large Images - Roughly 1400px to 1800px Wide

This size is suitable for full screen banners, or background images that consume the full width of the screen. Larger 4k desktop screens will need to stretch the image, however if the image is used in a background it likely won't be noticeable. If you notice too much quality loss, opt for a width closer to 1800px. 

Other General Images - Roughly 600px to 800px Wide

This size is suitable for general images placed throughout your web pages, where the images aren't shown full screen. 

Typical Image Sizes To Favor Image Quality:

For Large Images - Roughly 1800px to 3840px Wide

This size is appropriate for full screen banners, or background images that consume the full width of the screen. At a width of 3840px, the image won't need to stretch, even when displayed on larger 4k desktop screens. You will need to monitor bandwidth usage at this size however, because the file will typically be larger, even with compression applied. 

Other General Images - Roughly 800px to1200px Wide

This size should be suitable for general website images to achieve a clear, higher resolution quality.

Benchmarking Your Changes

Google provides a free tool called "Page Speed Insights, which analyses your website's page speed. This tool is useful for comparing changes before and after optimizing your images: https://pagespeed.web.dev/

Try benchmarking your website against your competitors! Oncord web hosting is considerably faster than most alternatives, so after optimizing the images on your website you should be pleasantly surprised with the improvement.

As another method for identifying images that are larger than necessary - review the bandwidth reporting available within your Oncord Dashboard. Navigate to Dashboard > Settings > My Account, and click the "View Details" link located underneath the bandwidth heading. This tool will highlight the files hosted on your website that are responsible for consuming the most bandwidth.