0

I am learning how to serve different images with different sizes to the browser to pick the best appropriate according to the width of the window but I always find out that the browser downloads the large sizes of the images all the time no matter what size the screen is. When the window size, say for example 400px, the browser downloads the small sizes of the images, the medium sizes and also the large sizes! I uploaded my example to a live server that I own at the following URL and I need your help to figure out what is going on.

EDIT (HERE IS A SIMPLE EXAMPLE)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Responsive images</title>
    <meta name="viewport" content = "width = device-width, initial-scale=1">
    <style>
        #container {
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            width: 100%;
            justify-content: center;
            flex-flow: row wrap;
        }

        img {
            width: 50vw;
        }

    /*  @media screen and (min-width: 640px) {
            img {
                width: 50vw;
            }
        }*/

    </style>

</head>
<body>
    <div id="container">

        <img 

        src="images/apple.jpg"
        sizes="50vw" 
        srcset="images/apple-x-small.jpg 360w,
                images/apple-small.jpg 768w,
                images/apple-medium.jpg 992w,
                images/apple-large.jpg 1200w"
        alt="">
Ahmed Magdy
  • 331
  • 1
  • 3
  • 9
  • please post your code in the question – Michael Benjamin Mar 05 '16 at 14:19
  • Have you tested on multiple browsers? Does it work properly on any browser? – Michael Benjamin Mar 05 '16 at 14:35
  • Tested on Safari and Firefox. Still the large image is the one that is being downloaded all times no matter what the window size is. – Ahmed Magdy Mar 05 '16 at 14:39
  • First thing to note is that the `picture` element isn't supported by Safari versions 9.0 and older: http://caniuse.com/#search=picture – Michael Benjamin Mar 05 '16 at 14:40
  • I am not talking about the img in the picture tags. I am talking about the other three imgs in the featured-work-container section tag. They have no picture tags wrapped around them. And still the browser downloads all images even at window width of 400px. – Ahmed Magdy Mar 05 '16 at 14:43

0 Answers0