SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 27 of 27
  1. #26
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just wanted to revive this thread, which helped me a lot last year.

    It was about how to solve some issues with presenting a photo image, scaled to a maximum proportion of a browser window, with captions and controls positioned neatly around it. At reply 23 above, I link to the final result.

    Anyway, for another website with a simlar format, Ive been experimenting with optimum file size and definition for this format. The thing is, this web page format will always rescale the served image file, to get it to fit best in the window. That way, everyone gets as big a view as they can see, that also fits properly.

    But the question is, what image definition and file size is best? Clearly a fixed image size, served at that definition is sharpest/most efficient, but that does not include rescaling. With jpg files, you can trade off pixel count and colour and compression for a given file size - eg, more pixels but higher compressuion.

    So I did some tests. taking an image which will likley end up been scaled to about 550 to 650 pixels high, I found that a suitable initial scale was 800 pixels high, and no significant benefit from going to 1000 pixels. I was using a fairly highly compressed file size of 80k for a 3:2 format image. Keeping with that file size, and testing different file definitions, the 800 high was best, 1000 was similar and 1350high was having trouble, going blocky and losing colour gradation. All of that was based on viewing the result at about 600 pixels

    Given a browser scaling to about 600pixels (but not exactly), with an 80k file, its better to start with a 800high image than to scale the image file to 600, and then have the browser rescale a bit more. I also tried the same allowing file size to grow to 120k, but again no significant benefit.

    So my rule of thumb for dynamically rescaled images, also keeping file size down:
    Start by scaling a photo to about 25 to 35% higher def than it is likley to be shown at, I was using 80k for a 1200x800 image file, and that works OK as a good compromise between file size and clarity. Other image sizes prorata the file size by the pixel count.

    cheers
    John

  2. #27
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,290
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks for the update and your findings

    I think the point is to find a happy medium ground so that at most common sizes the image looks good and then at scaled sizes doesn't look too bad. You could start with a large image and scale down but then you have a larger file size to start with and it often doesn't look any better at small sizes.

    You can also improve the quality of scaled images with some experimental CSS. It works in IE also.

    As an aside for mobile retina displays it looks like the image size should be doubled.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •