Image compression for web

[Guest]

Hi,

I'm currently working on a website (http://basiakupuje.pl) and I have a problem with compressing the image in PS.

What I basically want to do is to make the image, that would be a background for the whole article. The problem is, when I make the jpg compression to let's say 80%, the file is like 600kb big:( When I make the compression heavier, like 40%, the image is blurry and looking ugly. Could you tell me what other options should I try and what is the best way to optimize images for web in PS?

[Eternal Warrior]

Hi basiakupuje​

Firstly, 600 Kb shouldn't be too much of a problem for most consumers internet bandwidths as that's still way under 1 MB.

However, since you are concerned about this:

I would firstly consider using a more middle ground compression at around 60-70%...

Personally I like nice simple numbers so either go up or down by 5% or even numbers...

Also consider, as this is for a website - How much of the Image needs to be in focus?

A gentle blur on the bits that will get covered by text etc will often allow you to compress even further the file size before it looks horrible.

It also naturally reduces the file size as it requires less pixel information to produce.

There are some very quick methods that can be used to add blur.

Also consider the resolution and width of the actual image? What dimensions are you working with? Sometimes some clever resizing will allow you to get the file size down further without too much noticeable compromise.

Best,

EW

[Guest]

Hi!

many thanks for your reply! Well, the size is 1200px wide and 2000px high... so perhaps this isn't too smart:P

What would you reccomend about resampling? On the default I have bilinear, but it's quite unsharp. The others are a bit better, but the size is increasing as well..

[Eternal Warrior · Accepted solution]

Hi again basiakupuje.

If we take the starting point of most monitors is now either likely to be:

• 1280 x 720
• 1920 x 1080
• 3840 x 2160 (4K approx resolution starting point)

So normally something like 16:9 resolution.

Most images providing the pixel resolution per inch (or CM) is relatively high... can be made  3 x or 4 x larger without noticeable loss of quality.

So you would probably be safe to have the width or height down to about 1000 x relative pixels to give you the file size you want particularly if you use a max pixel depth per inch of 300.

[Edit] Bilinear is OK... but tbh... Automatic mode does a pretty decent job... either that or Bicubic would be my other choice.

FWIW -  TBH all this is hypothetical anyway... There is no reason - given that this is going online.. why you cannot have 2 or 3 versions of this image at varying file sizes for each monitor resolution and as I said to begin with... your file size is still under 1 MB.

Unless your page has lots of file requests going on... there should be little reason why people will struggle to load the site...

Of course... that assumes your target audience isn't located in the Himalayas with poor internet connection... In which case YMMV.

[Eternal Warrior]

Does that help with your questions?

[postrophe]

Hi

Dont go creasy with compression. Wordpress compress images when you upload jpeg's when you use the Media uploader to around 80% quality on the fly. So take this into consideration.

Pierre