CSS Media Queries and Size of Images

.samyata, .vahaka, .gananam {  width: 28%;  height: 40%;  float:left;}
.row {  padding-bottom: 1em;}
.block {  margin-left:37%;}
.col-sm-6 h5 {  margin-top: 0;  font-family: 'Fira Sans Condensed';  text-align: left;}
@media screen and (max-width: 768px) and (min-width: 320px) {  .samyata, .vahaka, .gananam {    width: 100px;    height: auto;  }
  .block {    margin-left:130px;  }}
</style>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid text-center" style="background-color:#F2F2F2"><br>  <h3 style="text-align:left;margin-left:12%;font-family: 'Raleway';"> Explore Samyata</h3> <br><br>
  <div class="row" id="first" style="margin-left:7%">    <div class="col-sm-6">      <img src="https://i.stack.imgur.com/rblbG.jpg" class="samyata">      <div class="block">        <h5> Get it the way you want </h5>        <p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis';">           A new and effecient retail commerce platform and ecosystem to bring stores, shoppers and personal shoppers together in a geographically specific, simple buying and selling experience.        </p>        <a href="#" class="text3" style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:63%;"> Explore Samayata </a>     </div>    </div>  </div>
  <div class="row" style="margin-left:7%">    <div class="col-sm-6">      <img src="https://i.stack.imgur.com/N3atj.jpg" class="vahaka">      <div class="block">        <h5> Make money as a personal shopper </h5>        <p class="text" style="text-align:left;font-size: 13px;font-family: 'Dosis'">           Deliver shopper purchases. Be your own boss. Do it when you want. Get paid right away.        </p>        <a href="#" class="text3" style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:70%"> Explore Vahaka </a>      </div>    </div>  </div>
  <div class="row" style="margin-left:7%">    <div class="col-sm-6">      <img src="https://i.stack.imgur.com/TUvgC.jpg" class="gananam">      <div class="block">        <h5> Attract shoppers to your stores </h5>        <p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis'">           Partner with Samyata Stores for a new way to make money, reach new customers and deliver products to your customers.</p>        <a href="#" class="text3" style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';           margin-right: 63%"> Explore Gananam </a>      </div>    </div>  </div></div>

responsive images with srcset, sizes, media-queries - Prevent loading huge images for higher pixel density

I found 2 possible solutions:

Both use the min-resolution media-query to define separate sizes per pixel density.
I use a more simple example than in the question to explain it:

Idea 1

<img src="500.jpg" title="..." alt="..." 
    srcset="
       500.jpg 500w,
       1000.jpg 1000w"
    sizes="
       (min-resolution: 3dppx) 33vw,
       (min-resolution: 2dppx) 50vw,
       (min-resolution: 1dppx) 100vw"
/>

I used the 100vh examples, and "reverted" that the browser takes images that are current_with * pixel-density.

This solution works for full-screen images, but you can use custom viewports.

Idea 2

<img src="500.jpg" title="..." alt="..." 
    srcset="
       500.jpg 500w,
       1000.jpg 1000w"
    sizes="
       (min-resolution: 3dppx) and (max-width: 600px) 1500px,
       (min-resolution: 3dppx) and (max-width: 1200px) 2000px,

       (min-resolution: 2dppx) and (max-width: 600px) 1000px,
       (min-resolution: 2dppx) and (max-width: 1200px) 2000px,

       (min-resolution: 1dppx) and (max-width: 600px) 500px,
       (min-resolution: 1dppx) and (max-width: 1200px) 1000px"
/>

I created similar media-queries based on screen-width, but added sizes that "reverted" that the browser takes images that are current_with * pixel-density.

This solution for all images, even if they are not full size.
Here you can use custom viewports, but it is relativ much code.

The basic idea behind both:

• e.g. for pixel denstity 2x and 500px screen-width the browser chooses the srcset for the double size, that was defined in the sizes media-query and takes the 1000px - image
• so I tried to define new media-queries for the double of my desired size (e.g. 1000px), that takes the that browser gets my desired 500px, when it is deviced by the pixel-ratio

In summery that means:

if you like to revert the effect that browser takes bigger images for mobil-device with big pixel-denstity you must calculate new values for your sizes for each pixel-density.

For both solutions you should define the display sizes via css too.

E.g. this example simple php-code shows that:

<?php
  $viewport = [
    // Viewport => Image-Size
    600  => 500,
    1200 => 1000
  ];

  // walk over all pixel-densities
  for($i=3; $i>0; $i--) {
    foreach($viewport as $vp => $w) 
      echo "(min-resolution: {$i}dppx) and (max-width: {$vp}px) "
            .floor($w/$i) . "px,\n";
  }
?>

---

Related Topics