Resize thumbnail image for mobile site

I’m making a website for mobile and for desktop, but I want images to show mobile images if loading on a mobile device. For example, I have a list of images of thumbnails of food types like:

_{(source: whereshouldieat.ie)}

But I also have images where there is a mobile version:

_{(source: whereshouldieat.ie)}

The current CSS is:

#portfolio #food-thumbnails img {
    border: solid 2px #fff;
    border-radius: 5px;
}

I have seen in other locations where you can have redirects on images using CSS like this: Changing Image depending on Mobile or Desktop HTML & CSS

But because the images are all automatically generated using this function:

<div id="food-thumbnails" class="row">
  <?php $i=1 ?>
  <?php foreach ($groups as $food_type): ?>
    <div>
      <div class="col-sm-4 portfolio-item food-thumbnail">
        <a href="index.php/restaurant/<?php echo $food_type ?>" class="portfolio-link food-type-thumbnail hvr-float-shadow" data-toggle="modal" data-type="<?php print $food_type ?>">
          <div class="caption">
            <div class="caption-content">
            </div>
          </div>
        <img src="<?php echo base_url() ?>assets/img/types/<?php print $food_type ?>.jpg" class="img-responsive" alt="">
        </a>
      </div>
    </div>
    <?php $i++ ?>
  <?php endforeach; ?>
</div>

I’m not sure if I could automatically use CSS due to the images normally having to include the URL name in the CSS for the redirect. Could anyone advise on a way to resolve this?

Answer

As it looks like you are using Bootstrap 3 here you can add both of the images to the page using PHP and then hide the one you don’t need on mobile and the opposite for desktop. This can be achieved using the hidden responsive utilities (http://getbootstrap.com/css/#responsive-utilities) which have options for extra small, small, medium, large and extra large screen sizes.

Desktop:

<img src="<?php echo base_url() ?>assets/img/types/<?php print $food_type ?>.jpg" class="img-responsive hidden-xs hidden-sm hidden-md" alt="">

Mobile (note the output of the mobile image):

<img src="<?php echo base_url() ?>assets/img/types/<?php print $food_type ?>-Mobile.jpg" class="img-responsive hidden-lg hidden-xl" alt="">

So your final code for those two lines would be:

<img src="<?php echo base_url() ?>assets/img/types/<?php print $food_type ?>.jpg" class="img-responsive hidden-xs hidden-sm hidden-md" alt="">
<img src="<?php echo base_url() ?>assets/img/types/<?php print $food_type ?>-Mobile.jpg" class="img-responsive hidden-lg hidden-xl" alt="">

This will obviously increase load time as both images must load.

Another option is to use jQuery and change the image source based on the screen resolution. This only adjusts it one way so if the users screen is larger than 768 it will remove -Mobile.jpg from the image source and replace it with just .jpg. However if the user resized their browser window back down it doesn’t revert it. You could however add this functionality but I haven’t included it here.

$(window).resize(function(){
  if ($(window).width() => 768){  
        $('.food-thumbnail img').each(function(){
            var foodImg = $(this);
            var newSrc = foodImg.attr('src').replace('-Mobile.jpg', '.jpg');
            foodImg.attr('src', newSrc);
        });
    }
});

This method will favour mobile users as the mobile version of the image is expect to be loaded by default and swapped out for any devices larger than 768px.

<img src="<?php echo base_url() ?>assets/img/types/<?php print $food_type ?>-Mobile.jpg" class="img-responsive" alt="">