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

Guide for implementing a one-line if statement in Javascript

Sending information from Axios to Danfo using NextJs is seamless and efficient

What is the right height and width to use in CSS?

Capture data from ajax effectively by extracting and executing manipulations seamlessly

What is the best way to choose the final XHTML <span> tag with a specific class using XPath?

StopPropagation() method in Ng-class not functioning properly in Angular for parent element

Using Jquery to bind events for selecting focus in and out

Is JSON.stringify failing to function correctly in Mozilla Firefox?

What is the best way to fill in predetermined HTML with information using jQuery?

What are some key considerations for creating a website that is optimized for printing?

Containerized chatboxes with improved stability

Is there a way to format wrapped lines with indentation in an unordered list?

Do I have to include the sizes attribute when using w-descriptors in srcset?

Ways to incorporate additional fields into your html/php form

Only refresh the content when there are updates from the ajax call

What are the disadvantages of using getBoundingClientRect() in ReactJS?

Is React the ideal choice for implementing a shared state subscription mechanism in your project?

NodeJS/express: server became unresponsive after running for some time

Tips for inserting information into HTML components in JSP

Attempting to modify a singular document within mongodb by leveraging node.js