Skip to main content
A
Anonymous
May 15, 2017
Answered

Image compression for web

  • May 15, 2017
  • 1 reply
  • 1485 views

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?

    This topic has been closed for replies.
    Correct answer Eternal Warrior

    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.

    1 reply

    Eternal Warrior
    Eternal Warrior
    Inspiring
    May 15, 2017

    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

    A
    Anonymous
    May 15, 2017

    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
    Eternal WarriorCorrect answer
    Inspiring
    May 15, 2017

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices