srcset ensures that the appropriate image size is loaded

Having trouble with an image tag loading only the 600px width image? Followed all the directions but still facing issues.

<img 
  srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg 600w,
    https://res.cloudinary.com/tjblackman08/image/upload/w_520%2Cf_auto%2Cq_auto/Brads-House/4.jpg 520w,
    https://res.cloudinary.com/tjblackman08/image/upload/w_440%2Cf_auto%2Cq_auto/Brads-House/4.jpg 440w,
    https://res.cloudinary.com/tjblackman08/image/upload/w_360%2Cf_auto%2Cq_auto/Brads-House/4.jpg 360w,
    https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg 280w" 
  sizes="(min-width: 1500px) 600px,
    (max-width: 1200px) 520px,
    (max-width: 992px) 440px,
    (max-width: 768px) 360px,
    (max-width: 480px) 280px" 
  src="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg 600w" 
  alt="picture" 
  class="picture"
/>

Check out the Live Demo

Looking to load different images based on device size, but encountering issues with srcset. Any advice?

htmlcssimage

Answer №1

Give this a try to experience the magic,

<picture>
    <source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 1500px)">
    <source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_520%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 1200px)">
    <source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_440%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 992px)">
    <source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_360%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media=" (min-width: 768px)">
    <source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 480px)">
    <img srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg" alt="Placehold" class="image">
</picture>

Feel free to give it a shot!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting a fixed data value within a div for subsequent retrieval through a function

I found a helpful example that demonstrates how to convert numbers into words. You can check it out here. The function for converting numbers into words is implemented in the following HTML code: <input type="text" name="number" placeholder="Number OR ...

javascriptjqueryhtml

The functionality of jQuery's .hide and .show methods can sometimes result in unexpected behaviors while

I am experiencing some issues with this code snippet - it is causing some unexpected animations. The first issue is that it is lowering the content by about 1em during the animation and then moving it back up afterwards. The second issue is on the archive ...

jquerycsshtml

Utilizing getElementsByClassName for web scraping: encountering inaccurate outcomes

I am attempting to extract the inner text from all classes with the className = "disabled" within the provided snippet of HTML Code: HTML code In my effort to achieve this task using MS Access (VBA), the code I have implemented is as follows: Set IE = C ...

htmlvbams-accessweb-scrapingscreen-scraping

The hyperlink element is failing to load in a particular frame

I've been attempting to load the URL of an anchor tag in a specific frame. I've tried various methods through online searches, but have not found a satisfactory solution. Can someone please assist me with how to load the href URL in a particular ...

javascriptjqueryhtml

Angular: Troubleshooting blank pages in HTML - What's causing it?

This is the content of my heroes component: <!--The content below is only a placeholder and can be replaced.--> <div style="text-align:center"> <h1> <h2>{{hero.name}} Details</h2> <div><s ...

htmlangulartypescriptangular-componentsangular-module

How can I use React to selectively print a section of a webpage?

I need to print only the Bill section of my page when a button is clicked. How can I achieve this without printing the entire page? I tried using window.print() within a function, but it ended up printing the entire page instead. ...

htmlreactjsprinting

Get the ID from a row that was created dynamically

I have a webpage that pulls information from my database and displays it. Users should be able to click on the "details" link to see more details about a particular record, or click on an input box in the "check" column and submit to update the record stat ...

javascriptjqueryhtmlajax

Dropdown Navigation - Utilizing jQuery and CSS

I am encountering an issue with a dropdown menu I have been working on. Take a look at this screenshot for reference: Below is the snippet of HTML code: <ul class="topnav"> <li><a href="#">Home</a></li> <li> ...

jqueryhtmlcssmenudrop-down-menu

Is this file malicious?

Greetings and thank you for taking the time to read my inquiry. I have come across a peculiar JavaScript file that is being loaded on my website. It appears to reference Typekit, however, this particular file is not present on my testing site and has an u ...

javascriptphphtmlcss

Send Selected Input From Radio Button To Form Using a Function

Within the main php page titled tipComp.php, there is a script designed to submit a selected value from a radio button within a form: <script> $('input[type=radio]').on('change', function() { $(this).closest("form& ...

phphtmljquery

Using Angular2 to store the contents of an HTML page in a variable

There is an HTML page located at this specific path: ./Help/HelpMenu/How-To-Bake-Pies.html I am attempting to extract the contents of this HTML page and store it as a string variable like this: private _content: string = ''; this.http.get("./ ...

htmlangularhttptypescript

Developing an engaging HTML5 Canvas with interactive features through event handlers

Looking to build a series of interactive regions within a canvas but facing the challenge that the number of areas is always changing, making it impossible to hardcode coordinates. I'm currently integrating the areas into a click event handler in thi ...

htmlcanvas

Using the hide() method in jQuery will automatically reset the value

When using the jQuery .hide() function to hide an input by ID, I am wondering if it resets the field/select value to [0], val(''), or empty, etc. My concern is that if a user populates a field, then decides to hide it due to a show/hide condition ...

javascriptjqueryhtmlvalidationshow-hide

Breaking Long Strings into Multiple Lines Using React Material UI Typography

Currently, I am working with ReactJS and incorporating MaterialUI components library into my project. However, I have encountered a problem with the Typography component. When I input a long text, it overflows its container without breaking onto a new lin ...

javascripthtmlcssreactjsmaterial-ui

What is the most secure method for transferring JavaScript variables between websites without using PHP?

The Dilemma: Greetings! Let's say I have ownership of two distinct websites. Site.com and Site.com:3000. There are multiple methods to exchange variables between the two sites. I am unable to utilize localstorage due to being on different domains, ...

javascriptphphtmlvariablescookies

Discovering elements with multiple classes using watir-webdriver

In this scenario, let's consider an element like the one below: <div class="first_class second_class"></div> Now, we can locate it by its classes using the following methods: browser.div(class: 'first_class') browser.div(class ...

htmlcssrubyseleniumwatir-webdriver

An issue encountered while employing the mix function in LESS within a Rails environment

Applying the less-rails gem. Implementing this code snippet to blend two colors: @base: #ffdc52; @add: #195742; .colour{ color: mix(@base, @add); } Encountering the subsequent error message: Less::ParseError: error evaluating function `mix`: Cannot ...

ruby-on-railscsslessparse-errorless-rails

Hide the HTML select dropdown if there are no available options

How can I remove the dropdown options list when the select element is empty in Windows/Chrome? The issue arises where it displays an empty dropdown with a box shadow around it. Is there a CSS solution for this problem? I am unable to use the disabled attr ...

htmlcss

Looking for assistance with deleting a child element in an XML file using PHP

I need help figuring out how to delete a child from my jobs.xml file with a PHP script. My jobs.xml file looks like this: <jobs> <event jobid="1"> <title>jobtitle</title> <desc>description</desc> &l ...

javascriptphphtmlxmlsimplexml

I am in search of a way to implement horizontal scrolling in Bootstrap 4

I am trying to implement a horizontal scroll feature in Bootstrap 4 with the following code, but I'm having difficulty achieving it. <div class="scroll-horz"> <div class="row"> <div class="col-md-4"> Test </div> < ...

htmlcssbootstrap-4