Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    11
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Image Loading in different sizes or loading different images

    In the site, images can be viewed in 4 sizes. User may want to view in all sizes.
    Files are already saved in different folders as original, 400, 300, 200, and 100, the numbers meaning the width of the images.

    Is it better to use:

    Code:
    <img src="http://site.com/imgs/original/01.jpg" width="400">
    (Change 400 to 300, 200, and 100 for different sizes)

    or is it better to use:

    Code:
    <img src="http://site.com/imgs/400/01.jpg">
    (Again change the 400 to 300, 200, 100 for different sizes).

    Now, the question is when user is viewing imgs/original/01.jpg with the codes:

    Code:
    <img src="http://site.com/imgs/original/01.jpg" width="400">
    <img src="http://site.com/imgs/original/01.jpg" width="300">
    <img src="http://site.com/imgs/original/01.jpg" width="200">
    <img src="http://site.com/imgs/original/01.jpg" width="100">
    Is the user downloading original/01.jpg 4 times or is it taking the same time to download the image 4 times when scaling the image to 4 different sizes?

    Shortly, is it better to use:

    Code:
    <img src="http://site.com/imgs/original/01.jpg" width="400">
    <img src="http://site.com/imgs/original/01.jpg" width="300">
    <img src="http://site.com/imgs/original/01.jpg" width="200">
    <img src="http://site.com/imgs/original/01.jpg" width="100">
    or

    Code:
    <img src="http://site.com/imgs/400/01.jpg">
    <img src="http://site.com/imgs/300/01.jpg">
    <img src="http://site.com/imgs/200/01.jpg">
    <img src="http://site.com/imgs/100/01.jpg">
    Thanks.



    P.S.: A scene from the movie K-Pax:

    "For an educated person, you repeat things quite a bit."
    Last edited by IMayNeed; 01-11-2014 at 06:28 PM.

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    369
    Thanks
    2
    Thanked 26 Times in 26 Posts
    If you specify the same image multiple times, it only gets downloaded once the width is not applied until the image is actually rendered.

    Whether using multiple images is necessary depends on whether there is an unacceptable loss of quality when the original is re-sized.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&


  •  

    Posting Permissions

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