Copy link to clipboard
Copied
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?
Hi again basiakupuje.
If we take the starting point of most monitors is now either likely to be:
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 i
...Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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..
Copy link to clipboard
Copied
Hi again basiakupuje.
If we take the starting point of most monitors is now either likely to be:
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.
Copy link to clipboard
Copied
Does that help with your questions?
Copy link to clipboard
Copied
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