Website Image Sizes

Visitors expect websites to be fast. Google does too.

Website performance is essential to your search rankings and for your user's experience. Delays in page load times will cause website visitors to leave your site.

Changes in technology and internet speeds allow much more flexibility in website image sizes, load speeds and quality, but also add to the confusion on what size image is best for your site.

How do you check your website performance and if your images are slowing down your website?

Test your site with free tools like Google PageSpeed Insights or GTMetrix

These tools give you an indication of how your website performs in comparison to other websites, and show you what areas of your site are slowing down your website load time.

Image
Image

What image file type should I use JPG or PNG

To make your site load faster we need to be looking for the smallest possible file size that produces a good-looking image.  JPG mages usually have a smaller file size than PNG’s.

If you have transparent backgrounds or an image text consider using a  PNG image file type as it can have better visual quality.

Image

How to determine the best image dimensions for my website images?

For optimal website performance, images should be as large as needed to fill their “containers”, based on your page layout. For example, the hero or header image of a page are usually wider; blog images are medium-sized; thumbnails are smaller.

So first check your content area (image) dimensions on your site. To do this you can use the developer tools built into your web browser. First turn on developer tools in your browser settings. Then right-click on a website image and click “Inspect”

Image
Image

The example above shows the image container as 554 x 375 your image dimension needs to be a minimum of 554px wide and up to double this for the best display.

WordPress plugins can do most of the work for you, try Smush or Shortpixel, both free image optimization plugins.

Or for a quick fix use the image size suggestions below.

What size should my website images be?

That depends??  on your website theme, the screen that visitors are viewing it on and their internet speed.  Also on whether image quality or load time is most important to you.  Eg. A photography website and an information site like Wiki  will have different priorities for quality vs speed.

It also depends on  how wide your content area is going to be.  Full width,  1/2 page or thumbnail. There’s no point putting a 2000 px wide image in a postage stamp sized display image.

Consider your audience and design with them in mind, if 90% of your audience view on a mobile devise your consideration will be different than if most of your viewers use a 30" monitor.  If your audience is in an area where internet speed is an issue this is also a reason to go for the smallest possible image sizes.

Smaller files lead to faster page loads and improved user experience & SEO.

Reducing the file sizes while maintaining acceptable quality is the primary goal of optimizing images for website performance. 
image 600x 200

Best image sizes for full-width slideshows or hero images.

For full-width slideshows or Hero images (that automatically stretch to the full size of the browser), I recommend going for 2400 pixels in width.

Images may have any height, to create an aspect ratio you like. eg.  Header or Hero images I would usually go for an aspect ratio of around 3:1.

Priority Quality image  =-Image size width 2800px

Priority  Fast load time image  - Image size width 1800px

Best Gallery image sizes (and thumbnails that enlarge in a lightbox view)

For full-width slideshows or Hero images (that automatically stretch to the full size of the browser), I recommend going for 2400 pixels in width.

Images may have any height, to create an aspect ratio you like. eg.  Header or Hero images I would usually go for an aspect ratio of around 3:1.

Priority Quality image  =-Image size width 2800px

Priority  Fast load time image  - Image size width 1800px

Ideal sizes for blog images or other medium static images used in page layouts.

Highly recommend checking the container size to find your ideal image size.  A rough guide for medium-sized image display.

Priority Quality Image - Image 900px

Priority Fast load time image  - Image width 600px

(maintaining their original aspect ratio of course).

Ideal sizes for woo commerce product images.

Depending on the product and whether it is important to open the product and zoom in on the details.  900px in width for horizontal images, or 1200px in height for vertical ones, maintaining their original aspect ratio.  Also will depend on if you have a 1 column display for your shop or 4 columns.

Priority Quality Image 1200px width

Priority Fast load time image  800px width

Ideal sizes for logo images.

300 px is generally ok for logo images.

Logo image 150 to 300px  width.

The larger the image, the harder the device works to show your page, the slower your page is to load

Compress Images to the Optimal File Size.

Compression is vitally important as it makes your image file size smaller by removing excess data from it. The goal of image compression is to make the image file size as small as possible without reducing the image quality too much.

There are plenty of online compression tools Kraken  is easy to use and works well, but has a maximum upload of 1mb for the free version.   Another option is Tiny PNG each upload can be upto 5mg.

Online image optimizer tools help you compress images or change file type without a perceptible loss in quality of the image.

The maximum size of images on your site should not be above 500 KB.

Aim for most images to be:-

Large images 200 - 60 kb

Small images 40 - 15kb

A file size reduction of 50 to 70% is usually an acceptable compromise between image quality and file size.  Check all your images after compressing them to ensure your website is still looking its best, check on a variety of screen sizes for best results.

Image

Do I really need to bother with image dimensions and compression? YES you do, if you want visitors to visit and interact with your website.

According to SEO expert  Neil Patel 47% of people expect your website to load in less than 2 seconds. And 40% will abandon it if it takes longer than 3 seconds.

The below image shows Googles statistics of load time and the likelihood of visitors leaving your site without looking around (bouncing).

Image
Image

Working with Perth Business owners, assisting them to grow their business.

Responsive Websites

Responsive Websites

Image

Digital Marketing

Image

Support & Coaching