Was having a discussion with a client’s graphic designer on web images. She was sending them to me as 779kb images. “Too big,” I said. She thought not. So now I have this post to back up what my team and I know and always aim for: web pages under 1-2mb, fast loading, and we optimize images (in the good way!) to be smaller, aiming for 200kb or less, sized correctly by dimensions, and saved for web in terms of quality.

The dirt:

“It is generally best if you can keep a webpage’s total weight under 1 or 2 MB in size.”

“So we [use Save for Web in Photoshop and medium compression] and the quality looks good now and the file size is 151 KB, which is acceptable for a high-resolution photo. This is almost 4x smaller than the original photo. Typically simpler images like PNGs should be under 100 KB or less for best performance.”

“Another very important issue when it comes to image optimization is you should try and upload them to scale, and not let CSS resize them. This is not as important as compression, but it’s another tip that will ensure your images load as fast as possible across all devices. If you are using WordPress, by default, it resizes your images when uploading them to the media library. These settings can be found under “Settings > Media.” You will want to ensure that the max width is close to the width of your site. This way CSS is not trying to resize your image down to fit inside.”

“You shouldn’t be uploading 2 MB images to your WordPress media library. This can result in eating up your web hosts disk space really fast. The best method is to quickly resize the image in a photo editing tool beforehand, and then upload it and use one of the following plugins to reduce it further.”

Thanks for this great post, Kinsta!