Results 1 to 13 of 13
  1. #1

    What is best practice image sizing ? (are oversized images worth it?)

    Hi

    What is 'best practice' for actual image size vs HTML height & width?

    BACKGROUND
    10 years ago we used to carefully re-size our images in Photoshop (or similar) and then make sure that they the HTML redendered them using the exact same HEIGHT and WIDTH dimensions. This avoided unwanted resizing 'ripples'.

    However is this now out of date?

    If so, how much larger should our images be compared to our HTML <IMG> tag dimensions? And what should we do to best avoid any resizing 'ripples' caused by the browser?

    PROBLEM
    Browsing devices, particularly mobile ones, are coming in all manner of screen resolutions. And nowadays users are very likely to be zooming in or out according to their personal preferences. In effect this means that "100% zoom" (1 pixel of image rendering onto 1 pixel of screen) is becoming much less common that it was.

    e.g. I notice achica.com uses images that are 448x448 pixels, but which are squeezed to do 255x255 pixels on the screen!

    This means that:
    a) at 100% zoom the pixels are being crushed by the browser, so image quality will suffer slightly.
    b) any browser that has zoomed IN by say 48% will get a better (i.e. more detailed image)!
    The effect of a) is probably small and the effect of b) is large and if bandwidth is high, downloading oversized images would appear to be worth it.

    What I find surprising is that Achica hasn't simply *doubled* the image demensions as this would mean that at 100% zoom the browser simply has to crush 2 pixels into one in each dimension.
    (i.e. 4 pixels in a square become 1 pixel...)

    J

  2. #2
    The best practice is to put images in the background of a DIV tag and served them sized as via media queries. Putting them in a sprite is also indicated.

    Less requests and less bytes to download = more speed = happy visitors.

  3. #3
    Quote Originally Posted by Mastermind Networks View Post
    The best practice is to put images in the background of a DIV tag and served them sized as via media queries. Putting them in a sprite is also indicated.

    Less requests and less bytes to download = more speed = happy visitors.
    Okay I didn't know about sprites - thanks.
    But what are we saying (if anything) about browser zoom?
    Last edited by ship69; 10-14-2013 at 12:23 PM.

  4. #4
    P.S.
    Okay I've looked into sprites. Basically you put a large number of your graphics into one large image and then get CSS to decide which part of it to show.

    I can see this means fewer images to download and so this should
    speed up page loading times.


    Some questions:

    1. Where should sprite be used and NOT used. e.g. appropriate for detailed product images (i.e. JPEGs)?

    2. If so what are the best tools to make this easy?
    (e.g. Does anything in Dreamweaver help us do this?)

    3. Can CSS serve different parts of an image depending on the level of zoom?

    J

  5. #5

  6. #6
    Quote Originally Posted by andersberggren View Post
    Tried those some time ago - the results were fantastic in terms of performance but the quality of the images falls trough the floor.

  7. #7
    Quote Originally Posted by ship69 View Post
    P.S.
    Some questions:

    1. Where should sprite be used and NOT used. e.g. appropriate for detailed product images (i.e. JPEGs)?

    2. If so what are the best tools to make this easy?
    (e.g. Does anything in Dreamweaver help us do this?)

    3. Can CSS serve different parts of an image depending on the level of zoom?

    J
    #1 Only if images are your sole source of SEO .

    #2 Elbow grease and practice will make it super easy. In ca do a 8 image sprite in less then two minutes. Don't use any automoron generator.

    #3 I have no idea , i just use high quality images and never had an issue so far. Most people don't zoom more then 25% on a image and my images look nice and clean even at 50% zoom. However I do try to save the user the headache of zooming. Why must he zoom if the UI already gives him all that he wants ?

  8. #8
    Quote Originally Posted by Mastermind Networks View Post
    #3 I have no idea , i just use high quality images and never had an issue so far. Most people don't zoom more then 25% on a image and my images look nice and clean even at 50% zoom. However I do try to save the user the headache of zooming. Why must he zoom if the UI already gives him all that he wants ?
    Sorry but I still don't understand what you mean. Are you using images that are in fact larger than how they are being displayed on screen at 100% zoom?

    e.g. If you had a room for product image on a website that was say 200x200 pixels, would you always use an image that was 200x200 pixels in size?

    For example have a look a what achica.com are doing. They are a large, successful and presumably very well resourced website. But they are using images that are MUCH larger than the size that is being taken up on the screen (at 100% zoom)...

    J

  9. #9
    Quote Originally Posted by andersberggren View Post
    I had a look at this page: http://www.netvlies.nl/blog/design-i...ina-revolution

    Now I'm seriously confused! I spent a while looking at this via Firefox (24.0 Window 7 x64). I couldnt believe how rubbish the "Jpg compression 80" normal sized sized images were! Then I discovered that because I have increased my Windows Text size to 125% (due to my high res screen) that even at 100% zoom the image are now 25% larger too. So this means that a 300px wide image is being stretched over 375px - no wonder that the normal images look so terrible.

    (Since when has Firefox started doing this, btw ??)

    Anyhow then I looked at the pages in both MSIE and Chrome and all the images are being rendered at their correct size (in this case 300px wide). [Phew!]

    But now the problem is that all the images on the page look absolutely perfect to me. [And I'm the one in the office they call the perfectionist!]

    Er... or is that the point?

    If so yes, it's gob-smacking that an image that is twice the size in pixels can be compressed (in Photoshop or similar) to produce an image that is the same size in KB as an image quality of "80" and still look just as good on the page at the Base image.

    However the catch is that we would normally compress further. We go down to a quality of 60 (not 80) as our norm, but certain images can easily handle a quality of as little as 50 or even 40 without any obvious adverse problem.

    So in this case the author's Base (300x200px) image of an eye that is "Jpg compression 80/21kb" which looks the same as his (600x400px) Retina "Jpg compression 31/16kb" image on our site we would have used 50% compression and the file would only have been 10.6 KB...

    i.e. His Retina images are still 50% larger in KB than the Base files should be, IMHO.

  10. #10
    Join Date
    May 2009
    Location
    United Kingdom
    Posts
    1,620
    Quote Originally Posted by ship69 View Post

    Some questions:

    1. Where should sprite be used and NOT used. e.g. appropriate for detailed product images (i.e. JPEGs)?

    2. If so what are the best tools to make this easy?
    (e.g. Does anything in Dreamweaver help us do this?

    J
    Hello,

    1. They shouldn't be used for images that you are going to repeat (I have read that it's possible but there's no need as repeatable images should be very small in file-size anyway). It also shouldn't be used for very large images or images that are going to be responsive. Lastly it only works for background images.

    I would say the best use for sprites is things like icons, any images that are very small that always stay the same size.

    2. There is some tools that can be used to automatically generate CSS sprites and even the code to use but unfortunately it can be very messy. It's best to create it yourself.

    If you are creating a sprite always recommend to save a copy as a PSD file as you may need to re-arrange images from time to time.

    I have some experience of using sprites but have recently stopped using them because it increases development time and I didn't see the results of the speed difference (although I'm sure there was a difference due to less http requests).

    Jack
    Zomex ~ Templates & services for web hosting resellers since 2009!
    #1 Responsive whmcs templates | WHMCS | Wordpress | HTML5 | Settings area
    █ Hire us for responsive whmcs integration - enhance your website using the new "Six" template!

  11. #11
    Quote Originally Posted by ship69 View Post
    Sorry but I still don't understand what you mean. Are you using images that are in fact larger than how they are being displayed on screen at 100% zoom?
    I just serve them 50% plus size, that does the trick, only for slow connections I serve them same size.

    Quote Originally Posted by zomex View Post
    1. They shouldn't be used for images that you are going to repeat (I have read that it's possible but there's no need as repeatable images should be very small in file-size anyway). It also shouldn't be used for very large images or images that are going to be responsive. Lastly it only works for background images.
    I disagree with your opinion. Responsive sprites are a common technique. As for repeating images they're not a problem , unless you're talking about a texture like image that will never be used in a sprite anyway. Other wise any images go in and if you know a bit of PHP GD then you can even have the sprites assembled on the fly for dynamic websites.

  12. #12
    Join Date
    Sep 2013
    Posts
    182
    JPG mini is very good.

  13. #13
    Join Date
    Aug 2002
    Location
    Arkansas
    Posts
    83
    @ship69 - did you come up with a satisfactory solution?
    I approve this message.

Similar Threads

  1. [Lighttpd] oversized header
    By Nassou in forum Dedicated Server
    Replies: 3
    Last Post: 09-05-2011, 09:47 PM
  2. images divided vs single image
    By thosecars82 in forum Web Design and Content
    Replies: 2
    Last Post: 05-17-2008, 06:47 PM
  3. capacity planning/server sizing - best practice?
    By cdistasi in forum Dedicated Server
    Replies: 3
    Last Post: 07-28-2004, 11:40 PM
  4. HELP with --> AUTO-SIZING IMAGE POP-UP WINDOW [etLux]
    By tonilope in forum Web Design and Content
    Replies: 0
    Last Post: 05-15-2004, 07:15 PM

Tags for this Thread

Posting Permissions

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