: What size (in bytes) constraints are industry standard for web images? Back in the day you wanted your images to be 5 KB and going above 30 KB was considered crazy. What are the industry
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!
More posts by @Angie530
2 Comments
Sorted by latest first Latest Oldest Best
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:
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:
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.
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.
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.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.