How Much Disk Space Does a Picture Occupy?

Do you know that pictures take up a considerable amount of disk spaced (particularly a large vast library full of digital pictures)? The actual amount of space each image takes up depends on numerous factors you may not even be aware of. Yes, the actual pixel by pixel size (height x width) does influence the amount of space, but two other factors: compression and format, matter even more.
Let's take a logo for your average website for example. A proper website logo is usually in a lossless format like PNG or a compressed format like JPG.
The quality difference may not be detectable to the eye, but the amount of disk space they take up is considerably different.

For example, if a JPG format clocks in around 20 KB that same exact logo as a PNG file would weigh in at around 60 KB.
You see this with music as well with compressed files and uncompressed files.

A compressed file is something like an MP3, where an uncompressed file is a.WAV. The differences in the amount of disk space they take up is dramatically different, but the sound quality, particularly if it's compressed to 320 MP3, is not noticeable to the human ear.
The same concepts applies with images in that there is a degradation in quality, but it's not noticeable. This has numerous beneficial applications.

First, images take much more time to load properly on a web page than does a simple text file. The larger the image, the longer it takes and the more bandwidth it takes up. The has a direct effect on the speed at which your website loads. If a web page takes too long to load, not only will it potentially hurt your search engine rankings, it will also impact the user experience by increasing your website bounce rate.
So it's very helpful to be able to still use the images you want, without having to reduce the visible quality of the images to save web page load speed.

Because of compression you can have both! Now let's look other websites.

The New York Times for example rarely uses an image larger than 70 KB, while over at Ebay the average image size is 300 KB.
This is nothing compared to a raw image taken with a smart phone or digital camera.

These kinds of images can be up to 3000 KB, making them all but useless to you as a web designer unless you choose to compress them by 1) resizing the image smaller 2) cropping the image and 3) compressing the image using a format like JPG.

Way back in the beginning of the internet connection speeds were slow and designers had to pay very close attention to the size of any image used in their web development. While speeds have improved, it's still a best practice to always keep your images as lightweight as possible.

You do this primarily by compressing every and all images.
Including your logo, but the logo is sometimes the exception as it is your brand identity. Regardless, keeping your images small benefit everyone involved.

They reduce the bandwidth you take up which allows you to server your web pages to more traffic without having to pay more. Small images load more quickly for the end user.
Improving the experience of visiting your website.
Small images also work better on mobile devices, as mobile is an increasing source of website traffic. A good rule to follow when compressing an image is to keep one raw heavy version either uncompressed or in a loss-less format like PNG.
Then compress that version using JPG format until you notice compression artifacts.

"Compression artifacts" is simply a fancy word for the degradation in picture quality that you can visibly notice.

Compress enough until you can not visibly tell the difference between your JPG format and your PNG format.

Once you have found the right size where you have no noticeable compression artifacts, your image is ready to go live on your website. To conclude, image size affects your website performance.

The largest images you should ever have on your website (depending on what the website is about) should be your logo, info-graphics, and pictures of products. Other than that, if you decide to use an image within a blog post for example keep it under 30 KB as anything larger than that takes a bit of time to load.