Resize thumbnail image for mobile site

Question

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?

You can set the images as backgrounds of divs. And then use a @media query to display them. this should be the CSS only solution — , Jul 10 '17 at 14:08
@MatthewBrent I have for other parts of the site, but not for this. — PKGrem, Jul 10 '17 at 14:14
@IchHabsDrauf the issue is that all of these thumbnails are automatically generated by a PHP function, would I have to list the two images in the php query? Like an isset where screensize? — PKGrem, Jul 10 '17 at 14:14
one way would be the use of [html5 picture-tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) which unfortunately is not supported by -> guess it -> IE — MarcelD, Jul 10 '17 at 14:42
I would recommend creating some kind of control flow where you check against the screen size using matchMedia(); https://modernweb.com/using-media-queries-in-javascript/ — Matthew Brent, Jul 10 '17 at 14:47
Thanks for the help lads, but @Erbilacx's solution worked perfectly for me — PKGrem, Jul 10 '17 at 15:50

Erbilacx · Accepted Answer · 2017-07-10T15:55:22.963

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="">

Will this increase load times do you know? As in will both images be loaded? — PKGrem, Jul 10 '17 at 15:34
Hey mate, it does increase load times so I've edited my answer with a jQuery alternative. I personally would work on optimising the images and using the Bootstrap method but if you can't do that then try the jQuery alternative. — Erbilacx, Jul 10 '17 at 15:56
I it through Google PageSpeed which gave me optimized images which shouldn't make load times be much longer. https://developers.google.com/speed/pagespeed/ Really do appreciate the help you've given me, and I'll test out the jquery as well. — PKGrem, Jul 10 '17 at 16:03

Resize thumbnail image for mobile site

1 Answers1