CODEWITHSUNDEEP
cssimageresponsive-design
jonas
jonas

Reputation: 650

Change img src in responsive designs?

I'm about to code a responsive layout which will probably contain three different "states".

The quirky part is that much of the text, for example menu items will be images – not my idea and that's nothing i can change i'm afraid.

Since the images will differ slightly, other than size, for each state (for example in the smallest state the menu becomes floating buttons instead of a regular header), i will need to switch images instead of just scaling the same ones.

If it weren't for that i'd probably go with "adaptive-images.com".

So, i need some input on a best practice solution for this.

What i could think of:

Anyone sitting on a good solution? :)

Upvotes: 27

Views: 62513

Answers (5)

Anrijs Vītoliņš
Anrijs Vītoliņš

Reputation: 333

Most of todays browsers are supporting picture tag. So you can use it to change images depending on viewport width.

<picture>
    <source media="(min-width: 1200px)" srcset="/img/desktop-size.png">
    <source media="(min-width: 768px)" srcset="/img/medium-size.png">
    <img src="/img/mobile-size.png"/>
</picture>

Upvotes: 20

Maximiliano Catani
Maximiliano Catani

Reputation: 579

Other option. Not need scripts, only CSS.

HTML

<div id="mydiv">
    <img src="picture.png" class="image_full">
    <img src="picture_mobile.png"  class="image_mobile">
</div>

CSS

.image_full{
   display:block;
  }

 .image_mobile{
  display:none;
 }

@media (max-width: 640px) and (min-width: 320px){
  .image_full{
   display:none;
  }

  .image_mobile{
   display:block;
  }
}

Upvotes: 47

trante
trante

Reputation: 34006

I'm the fan of 3rd choice, because it doesn't make to load multiple images and saves bandwidth.

Because of mobile-first design, first I load small images like this:

<div id="mydiv">
    <img src="myphoto1_normal.jpeg" width="24" height="24" alt="myphoto1"/>
    <img src="myphoto2_normal.jpeg" width="24" height="24" alt="myphoto2"/>
</div>

Then after document load I run this script:

function resizeImages() {
    var width = window.innerWidth || document.documentElement.clientWidth;
    $("#mydiv img").each(function() {
        var oldSrc = $(this).attr('src');
        if (width >= 768) {
            var newSrc = oldSrc.replace('_normal.','_bigger.');
            var newWidth = 100;  var newHeight = 100;
        } else if ( width >= 480 ) {
            var newSrc = oldSrc.replace('_normal.','_big.');
            var newWidth = 50;  var newHeight = 50;
        }
        $(this).attr('src',newSrc);
        $(this).attr('width',newWidth);
        $(this).attr('height',newHeight);
    });
}

If screen width is big then I change small images to bigger ones with this script. It runs fast on desktop computers. And it isn't run in smartphones.

Upvotes: 2

ryanve
ryanve

Reputation: 52531

If it's just a few images (and they are optimized) then hiding them via CSS is no problem. If it's a lot then take a look at Response JS which will change the src on the fly for you. Try this:

<body data-responsejs='{ "create": [
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] }
]}'>

<img src="small.png" data-min-width-481="medium.png" alt="example">

Read this article too.

Update - extra example:

<body data-responsejs='{ "create": [
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] }
  , { "prop": "device-pixel-ratio", "breakpoints": [0, 1, 1.5, 2] }
]}'>

<img src="small.png" data-device-pixel-ratio-1.5="medium.png" alt="example">

Upvotes: 14

Roko C. Buljan
Roko C. Buljan

Reputation: 206199

What I would do is:
use images as background of each li element
create a sprite with the links (images) in all sizes:

___ ___ ___ ___
__ __ __ __
_ _ _ _

Than, using @media e.g:.

@media only screen and (max-width : 480px) {
 /* here I would make my li smaller */
 /* here I would just change the li background position*/
}

The images 'sprite' will be already loaded in the browser and the transition will happen really smooth and fast.

Upvotes: 1

Related Questions