{"id":600,"date":"2023-08-31T10:01:33","date_gmt":"2023-08-31T10:01:33","guid":{"rendered":"https:\/\/siteoptimiser.co.uk\/testtubes\/?page_id=600"},"modified":"2026-09-18T15:24:46","modified_gmt":"2026-09-18T15:24:46","slug":"how-much-space-do-big-images-use","status":"publish","type":"page","link":"https:\/\/siteoptimiser.co.uk\/testtubes\/how-much-space-do-big-images-use\/","title":{"rendered":"Websites and Big Images"},"content":{"rendered":"\n

This tutorial is aimed mainly at WordPress (shortened to WP) users, as WP does some things automatically for web developers. If you create a website in pure HTML, you need to manually resize images to suit their intended use all by yourself. But the same principles discussed below still apply to image sizes.<\/p>\n\n\n\n

The image of a statue (below) was uploaded with an original size of 4.01MB, and dimensions of 3000 by 4000 pixels. This is bigger than any standard computer screen’s resolution at the time of writing, so it cannot be viewed properly by the vast majority of computer users, except perhaps professional photographers when using a specialist, very high resolution, expensive screen to prepare images for use by their clients. Always think in terms of pixels to assess screen sizes, NOT centimetres or inches. When you view holiday images from your camera on screen for example, the operating system is usually automatically compressing them (in its memory) to fit the screen, although you can then zoom in on the image as the original is not being altered, just the apparent screen size. My new camera produces images which are 6000 by 4000 pixels in size and are around 7.5 to 5MB for the file size. Such images are just totally impractical for the average website and computer screen.<\/p>\n\n\n\n

But I am now going to place that 3000 by 4000 pixel image on the page and then look at the versions produced by WP itself.<\/p>\n\n\n\n

WP immediately rescaled the uploaded image to be 1920 by 2560 pixels in the Media collection and kept the uploaded version as well. But when placed on this page, WP selected an even smaller version which is 768 by 1024 pixels. What has happened is that WP has made a whole series of images of different sizes<\/strong>, and offers the user the sensible sized ones to use. If this page had three columns and an image was placed in one column, WP would offer an even smaller version of the image to use. In fact there are now 12 versions of this image stored on the website! Now take a look at the image below the statute. This shows how much space is wasted by adding a huge image which will then always be used at a smaller size. The original large image will almost never be seen by anyone, and takes up almost four times more space than the other eleven versions combined!<\/p>\n\n\n\n

\"Statue
Statue in Rhodes town, on the island of Rhodes, Greece.<\/figcaption><\/figure>\n\n\n\n
\"\"
Image dimensions and files sizes created on disk by WP for the statue image above this one.<\/figcaption><\/figure>\n\n\n\n

Also note that for this second image showing the file data, I saved the screenshot and then converted it to a gif to use here. Because there are only a few colours in this image, it is not a photograph, and so a gif file uses less disk space. The file formats of png and jpeg a.k.a. jpg are designed for photographic images, the gif format is for images with around 200 colours – this includes counting the various colours in a gradual change from a light to a dark version of the same colour (such as the background to this page). I checked the sizes of the various versions of this data image before uploading it – the jpg version is 495KB, the png version is 135KB and the gif version is 98KB. And WP again automatically made smaller versions of the gif file with different dimensions. Note that when an image like the data table above is saved as a jpg, not only are you wasting disk space, but the image quality gets reduced significantly if you use any of these small versions in WP. This is a jpg problem due to the maths used in its compression algorithm, it is not a WP problem. The png version would be better quality than the jpg at all sizes but bigger than the gif. This second file’s dimensions were originally 1404 by 644 pixels, but again WP has resized it to give multiple smaller versions to be used in different situations, and is currently displaying one that is 1024 by 470 pixels in size (which is then compressed on the page itself by WP).<\/p>\n\n\n\n

What happens if we decide not to use an image we have uploaded? If we delete it, WP cleverly deletes all the smaller versions as well. Don’t casually delete the very large version if you are already using one of its smaller versions, as that will disappear from the page.<\/p>\n\n\n\n

Conclusion<\/h2>\n\n\n\n

If you are doing all the work, before uploading images for use on a WP website or any other type of website, resize the original to a sensible size that will fit well on the screen and suit its intended use, save the resized image with a slightly different name to preserve the original version, upload this smaller version and thus reduce the disk space used by 80%. Let WP make the other suitable sized smaller images for you. You only need to do one resizing before uploading. This is also important for PDF files, Word files and PowerPoint files!! When you drag images to be smaller in these programs, the original huge image is actually saved in the document but displayed looking smaller. Hence a Word file that would be, say, 20KB in size due to the text content, can be 20MB when four images are added and reduced to each fit into a space of 250x250pixels! I have received PDF files of books to review which had lots of images and where several GB in size! So very slow to open and slow to scroll through.<\/p>\n\n\n\n

When supplying images to a web developer (or an assistant) who knows about image sizes, you should send a copy of the original and ask them to resize that for use on the website. You should also get your assistant to read this page. Resizing an image that has already been previously shrunk in size leads to progressive degradation of the image quality. When WP makes its multiple smaller versions of the image to be used, it always resizes the original version uploaded and saves the result with a different name indicating the size (see the file names in the data table above). Uploading hundreds of images directly from your camera wastes vast amounts of disk space. Select the ones to be used and resize them! I have seen several clients’ sites with 300 – 500 uploaded images of which only five or ten are used on the site. Some clients have had to pay to upgrade their hosting just to accommodate all these unused images!<\/p>\n\n\n\n

Choosing the image size to use.<\/h3>\n\n\n\n

If an image is to be used as a full screen background image<\/strong> I recommend resizing large images down to be no more than 2000 pixels wide. Save this smaller version of the image on your HARD DISK with a new name such as img123-2000 to distinguish it from the original img123 on your hard disk. This keeps the original image safe for the further use. Upload the new 2000px wide image to WP which will then make its smaller versions that you can use for other purposes as well. You are unlikely to have more than one or two such large background images, of course. NEVER increase the size to get an image that will cover the whole screen, image degradation will be very obvious.<\/p>\n\n\n\n

If an image is going to be placed on a web page the way the above examples are being used<\/strong>, as the main dominant feature of the page<\/strong>, resize then to around 1200 pixels wide or 800 pixels tall, depending on whether the image format\/shape is landscape (like your television’s shape) or portrait shaped (like a head and shoulders view). 1200 pixels is also a good width for a short slideshow, for example, and adapts well to both small screens and large screens. Save the new smaller image with a name like img456-1200 or img456-800 on your hard disk, again to distinguish it from the original image, then upload this smaller version to WP.<\/p>\n\n\n\n

And finally, if you expect to use the image just for general decorative purposes or to illustrate something you are saying<\/strong>, (a head and shoulders image of someone like a guest speaker or for a staff page, or a view of a building for example) it is very common to find that such images are usually only around 400 by 400 up to 600 by 600 pixels in size on screen. Many of the images I resize for clients and myself are about that size on screen (see the other test pages on this site). So the image should be resized to be about 800 pixels wide (or 800 pixels tall depending on its shape), as this is a more useful size. WP then makes the smaller sizes for different purposes, without wasting disk space. Again, resize the original and save it on the hard disk with a name like img468-800 or similar. And then upload the smaller version to the website, NOT the original very large image. To upload in WP you select the Media tag and then upload the file. WP will then automatically create the smaller still versions that you might use .<\/p>\n\n\n\n

Should you save an image as png or jpg? PNG files are better quality than jpg but take up a lot more space, especially in photographic images. When the original statue image was saved as a png file, its size rose from 4.01MB for the jpg version to a massive 13.3Mb as a png file! This is why jpg images are widely used on websites, as they can be a quarter of the size of a png file. That’s a big saving in the disk pace required and the speed of loading on the page. NEVER resize an image to become bigger than the original, this always<\/strong> results in a lower quality image!<\/p>\n\n\n\n

How to resize images for your website.<\/h2>\n\n\n\n

I use Paint.net, a free piece of software, on my Windows computer as it is more flexible with more features than the simpler built-in Windows program Paint, other people use Gimp, also free. Both are available to download from the internet, although Gimp is more complex to use. There are similar Linux and Mac free programs. There is no need to spend lots of money on Photoshop or similar commercial programs, although if you have that software already then obviously use it. And of course there is no problem if you just use your operating system’s built in software such as Paint, I just prefer the more flexible Paint.net (that’s not a URL, it’s the software’s name, it’s website is at getpaint.net<\/a> and avoid the google ads like “Continue to download” in large boxes, use the “Get it now (free download)” with a link that includes the software’s name.) <\/p>\n\n\n\n

Paint.net was originally a university programming project for senior computing students at Washington State University, but has been improved regularly as free software for about 25 years now. By 2020 it had been downloaded over 8.6 million times. There are a large number of plugins that expand its use, which are also mainly free. <\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

This tutorial is aimed mainly at WordPress (shortened to WP) users, as WP does some things automatically for web developers. If you […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/siteoptimiser.co.uk\/testtubes\/wp-json\/wp\/v2\/pages\/600"}],"collection":[{"href":"https:\/\/siteoptimiser.co.uk\/testtubes\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/siteoptimiser.co.uk\/testtubes\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/siteoptimiser.co.uk\/testtubes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/siteoptimiser.co.uk\/testtubes\/wp-json\/wp\/v2\/comments?post=600"}],"version-history":[{"count":69,"href":"https:\/\/siteoptimiser.co.uk\/testtubes\/wp-json\/wp\/v2\/pages\/600\/revisions"}],"predecessor-version":[{"id":1001,"href":"https:\/\/siteoptimiser.co.uk\/testtubes\/wp-json\/wp\/v2\/pages\/600\/revisions\/1001"}],"wp:attachment":[{"href":"https:\/\/siteoptimiser.co.uk\/testtubes\/wp-json\/wp\/v2\/media?parent=600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}