Adjust image loading according to screen dimensions

Question

Adjust image loading according to screen dimensions

I am working on HTML code that currently displays an image. The code looks like this:

<div>
     <img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" />
</div>

My goal is to show a different image based on the screen size. To start, I use CSS to hide the image:

#wm01 {
    display: none;
}

Next, in the BODY of my document, I add the following JavaScript code:

var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;

if (x<568) {
    //alert(x);
    document.getElementById("wm01").src="theImages/wm01_app.jpg";
    document.getElementById("wm01").style.display = "block";
}
else {
    document.getElementById("wm01").src="theImages/wm01.jpg";
    document.getElementById("wm01").style.display = "block";
}

Unfortunately, the image is not showing up on any screen size. How can I troubleshoot and fix this issue?

javascript html css

Answer 1

Answer №1

It has not been suggested to utilize the <picture> element yet.

The <picture> element offers the advantage of being able to specify different images for various window sizes.

For instance:

<picture>
    <source srcset="some-bigger.png" media="(min-width: 500px)">
    <img src="some.png" alt="Some picture">
</picture>

In your case, it would look like this:

<picture>
    <source srcset="theImages/wm01_app.jpg" media="(min-width: 568px)">
    <img src="theImages/wm01.jpg" alt="PP">
</picture>

This indicates that theImages/wm01_app.jpg should be used when the device width is at least 568px. Otherwise, the default <img> source will be used.

Answer 2

It has not been suggested to utilize the <picture> element yet.

The <picture> element offers the advantage of being able to specify different images for various window sizes.

For instance:

<picture>
    <source srcset="some-bigger.png" media="(min-width: 500px)">
    <img src="some.png" alt="Some picture">
</picture>

In your case, it would look like this:

<picture>
    <source srcset="theImages/wm01_app.jpg" media="(min-width: 568px)">
    <img src="theImages/wm01.jpg" alt="PP">
</picture>

This indicates that theImages/wm01_app.jpg should be used when the device width is at least 568px. Otherwise, the default <img> source will be used.

Answer 3

Answer №2

Have you considered utilizing the srcset and sizes attributes of the <img>

<img srcset="tiger-320w.jpg 320w,
             tiger-480w.jpg 480w,
             tiger-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="tiger-800w.jpg" alt="Bengal tiger">

For further information, check out Responsive_images

This feature is supported by all major browsers

Answer 4

Have you considered utilizing the srcset and sizes attributes of the <img>

<img srcset="tiger-320w.jpg 320w,
             tiger-480w.jpg 480w,
             tiger-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="tiger-800w.jpg" alt="Bengal tiger">

For further information, check out Responsive_images

This feature is supported by all major browsers

Answer 5

Answer №3

If you want to ensure compatibility with browsers that do not support media queries, consider using CSS media query first and then JavaScript as a fallback option. In this example, the image is changed when the maximum width reaches 850px.

CSS:

/* Media query to transform layout for devices with a maximum width of 850px */
#wm01 { 
     background:url(images/large_image.png);
     width:100px;
     height:50px;
}
@media screen and (max-width:850px) {
     #wm01 {
         background:url(images/smaller_image.png);
     }
}

JS/JQuery:

var width = $(window).width();
if (width >= 850) {
    $('#wm01').addClass('largeImageClass');
} else {
    $('#wm01').addClass('smallImageClass');
}

HTML:

<div id="wm01" alt="PP" title="PP" u="image" /><!--comment for legacy browser --></div>
<img id="wm01" alt="PP" title="PP" u="image" />

Answer 6

If you want to ensure compatibility with browsers that do not support media queries, consider using CSS media query first and then JavaScript as a fallback option. In this example, the image is changed when the maximum width reaches 850px.

CSS:

/* Media query to transform layout for devices with a maximum width of 850px */
#wm01 { 
     background:url(images/large_image.png);
     width:100px;
     height:50px;
}
@media screen and (max-width:850px) {
     #wm01 {
         background:url(images/smaller_image.png);
     }
}

JS/JQuery:

var width = $(window).width();
if (width >= 850) {
    $('#wm01').addClass('largeImageClass');
} else {
    $('#wm01').addClass('smallImageClass');
}

HTML:

<div id="wm01" alt="PP" title="PP" u="image" /><!--comment for legacy browser --></div>
<img id="wm01" alt="PP" title="PP" u="image" />

Answer 7

Answer №4

This ongoing issue poses an interesting challenge with no definitive solution, but here are some options to consider:

Adobe's take on responsive images for HTML5
Deciding which responsive images solution to use

Answer 8

This ongoing issue poses an interesting challenge with no definitive solution, but here are some options to consider:

Adobe's take on responsive images for HTML5
Deciding which responsive images solution to use

Answer 9

Answer №5

Although there have been suggestions for alternative methods to address the issue of multiple images, your proposed solution highlights a common mistake - attempting to set the src attribute of an image before the DOM is fully loaded. To ensure everything is properly loaded, it's important to utilize window.onload. Consider updating your code as follows:

var win = window,
doc = document,
html = doc.documentElement,
body = doc.getElementsByTagName('body')[0],
width = win.innerWidth || html.clientWidth || body.clientWidth,
height = win.innerHeight || html.clientHeight || body.clientHeight;

// Onload function:
window.onload = function(){
    if (width < 568) {
        doc.getElementById("wm01").src = "theImages/wm01_app.jpg";
        doc.getElementById("wm01").style.display = "block";
    }
    else {
        doc.getElementById("wm01").src = "theImages/wm01.jpg";
        doc.getElementById("wm01").style.display = "block";
    }
};

Answer 10

Although there have been suggestions for alternative methods to address the issue of multiple images, your proposed solution highlights a common mistake - attempting to set the src attribute of an image before the DOM is fully loaded. To ensure everything is properly loaded, it's important to utilize window.onload. Consider updating your code as follows:

var win = window,
doc = document,
html = doc.documentElement,
body = doc.getElementsByTagName('body')[0],
width = win.innerWidth || html.clientWidth || body.clientWidth,
height = win.innerHeight || html.clientHeight || body.clientHeight;

// Onload function:
window.onload = function(){
    if (width < 568) {
        doc.getElementById("wm01").src = "theImages/wm01_app.jpg";
        doc.getElementById("wm01").style.display = "block";
    }
    else {
        doc.getElementById("wm01").src = "theImages/wm01.jpg";
        doc.getElementById("wm01").style.display = "block";
    }
};

Answer 11

Answer №6

I implemented this code on my website and it worked flawlessly for me.

HTML

<figure class="picture"></figure>

JAVASCRIPT / JQUERY

$(document).ready(function(){
    var screenWidth = window.innerWidth;
    if(screenWidth <= 650){
      $(".picture").html("<img src='images-min.jpg'/>")
    }
    else if(screenWidth > 650 && screenWidth <=1300){
      $(".picture").html("<img src='images-med.jpg'/>")
    }
    else{
      $(".picture").html("<img src='images-big.jpg'/>")
    }
});

In this scenario, I utilized three different sizes of images.

Answer 12

I implemented this code on my website and it worked flawlessly for me.

HTML

<figure class="picture"></figure>

JAVASCRIPT / JQUERY

$(document).ready(function(){
    var screenWidth = window.innerWidth;
    if(screenWidth <= 650){
      $(".picture").html("<img src='images-min.jpg'/>")
    }
    else if(screenWidth > 650 && screenWidth <=1300){
      $(".picture").html("<img src='images-med.jpg'/>")
    }
    else{
      $(".picture").html("<img src='images-big.jpg'/>")
    }
});

In this scenario, I utilized three different sizes of images.

Answer 13

Answer №7

Reduce image size and display a background image using a media query.

Please keep in mind that you need to be aware of the dimensions of the replacement image for this method.

Check out the Fiddle

<img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" />

@media screen and (max-width:568px) {
  #wm01 {
    background: url("theImages/wm01_app.jpg") no-repeat 0 0;
    height: 0;
    width: 0;
    padding-bottom: 300px; /* replace with height of wm01_app.jpg */
    padding-right: 300px; /* replace with width of wm01_app.jpg */
  }
}

Answer 14

Reduce image size and display a background image using a media query.

Please keep in mind that you need to be aware of the dimensions of the replacement image for this method.

Check out the Fiddle

<img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" />

@media screen and (max-width:568px) {
  #wm01 {
    background: url("theImages/wm01_app.jpg") no-repeat 0 0;
    height: 0;
    width: 0;
    padding-bottom: 300px; /* replace with height of wm01_app.jpg */
    padding-right: 300px; /* replace with width of wm01_app.jpg */
  }
}

Adjust image loading according to screen dimensions

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

obtaining Json format from an array: a comprehensive guide

Struggling to get the Ant design button to launch an external link in a new tab using React and NextJS

I'm having trouble understanding why this code is causing confusion for the user's selection during a specific part of the execution. I can't seem

What is the best way to only buffer specific items from an observable source and emit the rest immediately?

The suspense fallback function seems to be missing in NextJS 13

Sending data from Node.JS to an HTML document

Enclose Angular $resource requests that do not return POST data

Issue with JavaScript JSON.parse converting string values to Infinity

Is it possible to utilize a computed property for dynamically styling a table row based on certain conditions?

Set a variable to contain a specific scope in JavaScript

Ways to implement border spacing using CSS

"Exploring the Differences between JavaScript, AJAX, and Servlet for String

Clickability issue with searchbar results caused by onBlur event

Display a modal popup form in ReactJS when a particular key is pressed

What is the best way to switch back and forth between two div elements?

Error in content policy for CSS in Stripe Checkout

Maintain the same javascript variable throughout multiple pages

Having trouble with Ajax.updater?

Trigger a Vue method using jQuery when a click event occurs

Tips for saving images in an S3 bucket