0

Back in the day you wanted your images to be 5 KB and going above 30 KB was considered crazy. What are the industry standards these days?

I just ran GTMetrix on Yahoo.com and came back with images clocking in at a massive 431 KB and 208 KB!

1
  • 1
    I am not sure about bytes, but I use smalleranimals.com/thumb.htm for a very long time and have built sites with millions of images using this tool. It is far and away the most efficient tool I have ever seen. You can easily cut the size of your images in half without changing the values of the image or the quality. Most image editing software is inefficient. Smaller Animals are experts in this field and this is all they do. You can use the product in trial mode and try it. The license is only $15 and has been for over a decade. It is updated often and works extremely well.
    – closetnoc
    Apr 30 '15 at 17:12
2

The answer is the same as it was back then: what does your userbase support?

Back in the day almost everybody was on dial up so you need to keep page sizes to a minimum to allow your page to load in a reasonable timeframe. Then came broadband and that requirement eased up a lot. Nowadays it is not uncommon to have pages that are 500k in size after a;ll of the assets are downloaded.

Today the landscape is different. yes, broadband is common, but now there's mobile. Mobile users have both bandwidth limitation and data caps. So now you have users with both extremes hitting your website.

So what do you do? It depends. Are your users using mobile? Do you offer a special mobile version of the website? You would need to offer a reduced image for mobile users or at least let them choose to download the large image. Only supporting desktop users? Go big or go home! This where how your application's architecture will somewhat dictate what your options are.

3
  • I just ran four sites through GTmetrix and they came in at: 3.6 MB, 2.9 MB, 1.6 MB, and 730 KB - the latest being one I did!
    – davemackey
    Apr 30 '15 at 17:24
  • 1
    Worth mentioning that most mobiles don't cache over X bytes... Generally the older the device the less cache size. Apr 30 '15 at 18:07
  • 1
    Latency is even worse than bandwidth for mobile. Combining several pages into a single one with navigation within the page on mobile can be a big usability boost even if the initial page download is larger. Apr 30 '15 at 19:12
1

There isn't really a special number of bytes for an image that's a standard, but you know you're in trouble if the image takes a while to download on a high-speed network connection.

According to google, you want to serve compressed images. Nice thing with that idea is that the image size in bytes is substantially smaller than the original size yet the quality from a normal eye is exactly the same.

On my site, I use JPEG images. Before compression, a large image on my site would require about 200-400 KB disk space. After compression, the same image only requires 50-80 KB.

This is google's documentation:

https://developers.google.com/speed/docs/insights/OptimizeImages

If you're unsure if you're on track with your images, then make a simple page with your image in it. You can easily do it with this code:

<html>
<head>
<title>Image</title>
</head>
<body>
<img src="(insert image url here)">
</body>
</html>

Save that file on your server so that you have a public url to access it from, then run that public URL through google's page-speed insights tool and find out how much more you can compress the image. Google will normally give it as a percent. As for me with JPEG files, I deliver about 60-70% of the original image quality.

I think zoompf.com also tests for image compression on your site as well and will give similar results.

Also, there is webpagetest.org.

So the best thing to do is this:

  1. Modify the image so that the unimportant parts are removed. for example, if the image itself contains a solid thick border, then remove that border and use CSS to define that border. It will save you some bytes.

  2. Compress the image. If it is a JPEG, compress it so the quality is between 60 and 70% unless it doesn't look relatively the same which in that case you need to make the percent higher.

  3. Apply the image to the code I provided above and test the sample page through all three testing sites and repeat the steps until you are satisfied with the results and until no test result claims you can compress images further.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.