Facebook px img
OM4 Agency Logo All White

Menu

Image size for website

Preparing Image Files Before Uploading with WordPress

Summary

If you upload very large images to your website, your website will slow down when those images are viewed by your visitors.

The solution is to learn how to optimise (trim images down to size) before you upload them.

This article explains the two factors that control how big your image files are and provides links to some free/low-cost tools you can use to optimise your images.

File Dimensions and File Size

Images have:

  • file dimensions (width and height, in pixels) and
  • file size (Kilobytes KB or Megabytes MB).

You can think of these as size and ‘weight’ if you like.

  • The thumbnail image you see below is 360 pixels (px) wide and 240 px high and ‘weighs’ 20KB.
  • Click on the thumbnail image to see the larger version in a lightbox – you’ll see the 800 px wide version which ‘weighs’ 80KB.

 

360px wide Grapes – click to see 800px version 

360px wide Grapes – click to see 800px version

Sizing your images to 1,280 px wide is a good target for many websites. However, you might target wider monitors, depending on your audience.

Here are some statistics on minimum screen widths as at Jan 2017 (see w3schools.com for the latest information):

  • 1024px wide: 96%
  • 128opx wide: 93%
  • 1366px wide: 84%
  • 1920px wide: 49%
  • 2560px wide: 8%

So statistically, if you size your images to 1280 px wide, in 93% of cases, the images will be large enough to fill your visitor’s browser. Any larger and the image will be squeezed down in width anyway. If you want to fill the browser width for 84% of visitors, 1,366px wide will get there. If you use 2,560px wide, you’ll be able to display on large iMac displays at full width.

Click the thumbnail for this next image and you’ll be looking at a 2,000px wide image that ‘weighs’ 120KB. For about 92% of you, it will have to shrink down to fit your monitor.

Make sure you maximise your browser before you click the thumbnail:

360 px wide Grapes - click to see 2,000 px wide Grapes! 

360 px wide Grapes – click to see 2,000 px wide Grapes!

Images from digital cameras or from stock photo libraries can be very large, both in dimensions and ‘weight’. 4,000 px wide is not uncommon, and the file size can be from 4Mb to 10Mb and beyond.

Clearly, these images are far wider than most monitors can display, and the ‘weight’ would cause delays while the large files download.

These problems can be avoided if you prepare your images to ensure the dimensions are no larger than required and the file sizes are reasonable for your purposes. As you can see from the examples above, your choices are pretty wide.

Preparing images involves reducing the physical size and file size while still leaving the images looking good. Nobody wants tiny, grainy images on a website, and it isn’t necessary.

Inspecting the size of images

To see how big your image files are, use Windows Explorer or the Mac Finder and inspect the file. On a Mac, you can view it directly in the Finder:

grapes-file-information

From this information panel you can see the image file (grapes-file-information.png) is 2,000 px wide by 501px high and is 120KB

Dimensions – Physical size

For most websites, make sure your file is no wider than the width of your webpage.

If you are planning on displaying images in full screen mode (such as the wide image shown above), you might want to plan for your full-size images to be  1,280px, 1,920px or even wider. Your WordPress theme normally ensures that larger images will be automatically resized downwards to fit them in the monitor resolution of each visitor.

When you upload an image, WordPress not only uploads the original image it automatically creates three resized images for you:

  • a Large version (default 600px)
  • a Medium version (default 300px)
  • a Thumbnail (default 150px)

You can therefore always choose to use your full-size image, or the Medium or Thumbnail.

These default file sizes in WordPress can be changed under Dashboard, Settings, Media.

File size

This is the most important part of preparing an image for your website. Images with a large file size take longer to download to a visitor’s browser and slow down your website.

For most ‘full page’ web images, you want the image to be 80KB-100KB at most. If the image is only part of a page (e.g. half the width of a blog post), then 20KB-30KB is usually fine.

Dropping image quality to 30-50% of the original usually doesn’t make any difference you can pick with the naked eye. Try it and see.

You can drop 2-3Mb images to 80KB-12KB and not really be able to see any change in visible quality.

To check you haven’t over-optimised your images, open your original image and the optimised image and view them side by side.  Look out for any ‘jaggies’ (pixelated areas).  If your image has areas of sky (or areas that have a wide area that is the same colour) or thin lines (such as power lines) crossing a neutral background, check these carefully as they are often the first places you’ll notice pixelation.

Image Preparation Tools

If you load images to your computer and are familiar with shrinking them before emailing, then a very quick way to optimise images can be to just email them to yourself before uploading to WordPress.

Automated Preparation

If you would prefer automation over manually optimising every image, you can install the ShortPixel plugin (use this affiliate link for 100 free images/month) and that will automatically optimise every image you load. Use the Lossless setting to get the highest quality results.

Manual Preparation

You can use an image editing program to crop and resize image files yourself. Here are some free/entry-level options you can try:

  • Mac: you can use the Preview app on your Mac – use Tools, Adjust Size and then Export to save as a JPG. Also, Ribbet have a great new image editor that lets you resize JPGs – download to your Mac for free. There is a web-browser version available, but that requires the use of Flash.
  • Mac/Windows: get a free subscription to Canva – this is a browser-based image editor
  • Windows: FastStone or PIXresizer (both free)
  • Browser-based Tools: There are many tools available online to help resize and compress images. Two options are PicResize for resizing/cropping the images and TinyPNG for compressing.

If you want to use more advanced editing tools, Photoshop is the king of the hill, but keep in mind it is overkill if all you want to do is resize images for the web. There are subscription options for Photoshop (look for the Photography subscription).  To optimise an image using Photoshop, you’ll need to learn how to use the Image Size facility and the Export tools.

In most cases, image management programmes will let you reduce image quality by a percentage. If you are dealing with large, high-resolution images, you can usually drop them to around 30% of original quality and not be able to see much (if any) difference. Experiment for yourself.

Here are some screen shots showing ImageWell and Picturesque reducing the file size to 30% of the original.

 

reducing-imagewell reducing-picturesque

Sample Images

There are 3 versions of the same image shown below – click the thumbnail for each to see the full version in a lightbox. As always, make sure your browser window is maximised.

  • The first image 2,000 px wide by 1,333 px high. This is wider than many screens, so your browser will probably resize this one for you automatically to fit your window. It is 880KB in filesize.
  • The second image is the same size as the last, but it has been run through an image compression tool. The filesize is now 316KB.
  • The third version is resized to 800 px wide by 533 px high (will fit your screen) – just reducing the physical size (no drop in quality) drops the file size to 196KB
  • The fourth version leaves it at 800 px wide but drops the file quality, so the filesize is only 80KB.

Could you tell the difference if you didn’t know which was which? And yet, your website visitors would certainly know the difference if you litter your website with large files.

The point is, when loading images to your website, you can decide what dimensions you use, depending on who will be viewing the image.

Grapes - 2,000 px wide at full quality 880KB

Grapes – 2,000 px wide at full quality – 880KB

 

Grapes on a vine

Grapes – 2,000 px wide at compressed quality – 316KB

 

360px wide Grapes – click to see 800px version

Grapes – 800 px wide at full quality – 196KB

 

Grapes

Grapes – 800 px wide at reduced quality – 80KB

 

Over Optimised Images

You can reduce the file quality of a JPG too far. How far is too far? Basically, if you can see a difference in quality, then you’ve gone too far.

The image on the right is an over-optimised version of the grapevine seen elsewhere on this page – notice the blocky pixelation occurring in the leaves.

GrapesOnVine-2160037-3-percent

 

 

Finally, the original version of this image. It is 4,368 px wide and 11.5MB. Click the below link to open it up (showing it on the site would slow down the page).

Open the original image (11.5MB)

You might want to load this image to your website if you want people to be able to download a very high-resolution version, for example, to use for printing or to allow further optimisation or editing. In which case perhaps you could add a download button or link similar to what we’ve done above. But loading an 11MB image to show on the page is going to slow the page load down significantly and is probably a bad idea if a fast-loading web page is your goal.

And quality-wise – can you see much difference really?