1

I am in a dilemma. My customer wants to put several nice pictures as a background on Homepage, each of them being 1200 x 650 and sized about 1.5MB. I tried to compress them to a reasonable size at about 300~400K, but then the pictures look blurry and undermine the appearance of the Homepage.

On the other hand, I do see lots of websites with beautiful, full-screen pictures on their homepage, I wonder how they balance the appearance and loading speed.

So what is an appropriate total page size for a homepage, including images (are images generally considered part of the page size?) plus all the other resources? Shall I just leave the pictures as they are?

  • What sort of compression did you use? Id suggest lossless compression since you wont lose any quality and then you could cache the background image so that the browser doesn't have to re download it on every page view; or use a cdn :) – Analog Apr 14 '16 at 13:19
  • 1
    You should be able to get your images down to 100-200kb without much loss in quality. I've just done the same for you as an example imgur.com/a/YYU5Q The top image is 700kb, whereas the bottom image is 180kb. Both are 1200x650px – Double Clicked Apr 14 '16 at 13:28
  • @Analog I don't know too much about compression. If you are talking about compress the website, I think its gzip. Although it comes with my hosting plan, I never tagged it. And I thought image caching was a job of client's browser and I usually didn't have to worry about it. I exported the background image from PS layer and the original size was 1.5MB something, then I use optimizilla.com to compress them. – Wen Shenk Apr 14 '16 at 13:37
  • @WenShenk For the images you need to use "Lossless" compression and not "Lossy". The link you posted says that they use "Lossy" compression. The difference is that "Lossless" allows the original data to be perfectly reconstructed from the compressed data while "Lossy" permits reconstruction of an approximation of the original data which is why you are seeing quality loss. If you would like to use an online tool i would suggest compressor.io but there are many others, just search for lossless :) – Analog Apr 14 '16 at 13:41
  • 1
    Or better yet, use Photoshop's 'save for web' feature. Select the '4-Up' view and compare the best option. – Double Clicked Apr 14 '16 at 13:48
1

Without any idea of what your images are, one technique that is used is to keep the images the size they are, and then reduce the quality setting as low as possible. In Photoshop or Gimp, if the original image is 2k x 2k for a jpeg, for example, set the quality down to 20. Then reduce the size of the image to the largest you will use.

You need to play with it for what works. "20" may be too low or you can even go down to "10". It's a balancing act.

So, turn the quality level down first, then reduce the size. This assumes you are already using an image compression method like jpegoptim or optipng or ImageMagick.

| improve this answer | |
0

This'll be a bit of a promotion (I do not own this site, nor will I have any advantage of naming them):

Kraken.io is an image optimise website. The compress your image to the absolute minimum size, without quality loss! If you can afford to loose a tiny bit of quality, you can even go for "lossy" which is a tiny bit less quality, but in return the result will be even smaller.

An average JPG file from various sources will result in ~50% filesize less (and still the same quality).

I have yet to encounter a service (online, desktop, server) which can outperform Kraken.

I'd like to know the results if you try this, the lossless and the lossy.

| improve this answer | |

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.