Incorrect Size of Image in Srcset Rendering

I'm in the process of implementing responsive and adaptive images based on device width.

Here is the original image: 

<img src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"/>

Using Srcset:

<img
      src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"
      srcset="
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=400   400w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=800   800w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=1400 1400w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=2000 2000w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=3800 3800w
      "
/>

I am encountering two issues:

1) The 2000px wide image loads even on smaller devices, like iPhone 6s (it should load the 800px image).

2) I have included both images (with and without srcset). Both load with the same dimensions. However, the one with srcset appears smaller compared to the other. Without specifying a width in the html/css, shouldn't it render at the actual image width? Here is the fiddle for reference: https://jsfiddle.net/hfcbatdn/

htmlcssimageresponsive-imagessrcset

Answer №1

When using the srcset attribute, it is important to include the sizes attribute for responsive images. Update your code as follows:

<img
      src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"
      srcset="
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=400   400w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=800   800w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=1400 1400w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=2000 2000w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=3800 3800w
      "
/>

Update the code to include the sizes attribute with breakpoints based on desired responsiveness using @media queries. Additionally, don't forget to insert the meta viewport tag inside the <head></head> section like this: 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
.

For more information, refer to Responsive Images.

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

Troubles encountered in retrieving values from various <select>/<option> elements

Having some trouble with the code below. I am attempting to retrieve the values of the selected options from my layout_select2. Currently, when I select 'multi_select' and then an option from 'layout_select2', I end up with the first v ...

javascriptjqueryhtmldrop-down-menu

Determining the specific gesture recognizer that was activated

Incorporating the gestureRecognizer with UIImageView has presented a challenge for me. I have two separate UIImageView elements and I need to upload an image into each of them. To trigger the UIImagePickerController() for selecting images, I am using a ges ...

iosswiftimageuigesturerecognizer

Checkbox fails to activate menu when selected

I am currently working on a responsive navbar that transforms into a hamburger icon for mobile devices. I implemented media queries to detect mobile devices and display a hamburger icon. Subsequently, I created a mobile menu that appears and disappears whe ...

htmlsassresponsive-designnavbarhamburger-menu

Is it possible to create an index.html page with all the necessary head tags to prevent duplicate code across multiple html pages?

Imagine I am using app.js or a Bootstrap CDN link for all of my HTML pages, but I don't want to include it in every single page individually. Is there a way to create an index.html file that includes this so that all other HTML pages load the head fro ...

javascripthtmlcss

Using CSS to automatically adjust the width of a child div based on its content, rather than stretching it to fill the entire

I'm currently facing an issue with my CSS. Apologies for the vague title, but I'll do my best to explain it here. My problem lies within a parent wrapper div that is centered on the page. Within this wrapper, there is another child div containing ...

javascriptjqueryhtmlcss

What is the best way to detect when I switch to a different tab than a specified tab using HTML and jQuery?

Here is the HTML code I am working with: <div id="tabsWithStyle"> <ul> <li><a href="#data1">Data 1 TAB</a></li> <li><a href="#data2">Data 2 TAB</a></li> <li>< ...

jqueryhtmltabs

Extracting data from websites and importing it into Excel with VBA

I am venturing into the world of web scraping for the first time using VBA. My goal is to extract pricing information from our company's distributors and save it in an Excel file for our sales team to analyze. The process involves taking the URL from ...

htmlexcelvbaweb-scraping

Material UI - Panel Expansion does not cause the div above to resize

Scenario : Utilizing leaflet and React-table together in one component. Two divs stacked vertically - one containing a leaflet map and the other a react-table. The second div has Expansion Panels with react-table inside. Issue : Problem arises when ...

javascripthtmlcssmaterial-ui

Transform the functionality of DIV and UL to mimic that of a SELECT element

I am attempting to update the text of the <span class="hideSelect"> element to match the text of the selected <li>, so that it functions like a <select> element. CSS: .myDrop { border: 1px solid #ddd; border-radius: 3px; padding: ...

jqueryhtmlcss

Converting JSON data into HTML format

I have been tasked with displaying a list of news articles on my webpage, and I have been provided with a link to a json file containing the necessary data. My goal is to convert the information in the json file into HTML format. Here is a preview of the ...

jqueryhtmljson

Upon script load, a random item from an array will be displayed and recorded in a separate array

I'm working on a fun code project where I aim to display random animal names in different colors that change when a specific keyboard key is pressed. The challenge I'm facing is that the first random animal name in a random color only appears aft ...

javascripthtmlcss

Triggering a Javascript load event after injecting HTML

Is there a way to detect when injected HTML, such as an iframe containing a video, finishes loading using JavaScript? I attempted to add JavaScript at the end of the injected content, but it is not running as expected. Furthermore, I prefer not to use jQ ...

javascripthtmlajaxdom

Set the style of the mat-select element

I'm having an issue with my select option in Angular Material. The options look fine, but when I select one, the strong tag disappears. Can anyone help me style only that part? Thank you in advance. <mat-select formControlName="projectId" ...

javascriptcssangulartypescriptangular-material

Selenium extracts valuable content, specifically the text within the <h2> tag of a webpage,

I am currently working on a project that involves entering a postcode (which will eventually be a list) into a website and saving the obtained results to a CSV file using a loop to move on to the next. However, I am encountering difficulties when it comes ...

htmlpython-3.xselenium-webdriver

What is the best way to update the text within a Span element as the user moves through the Jquery slider?

Can I utilize jQquery to dynamically alter the text content of my "video_box_label" span element based on the active slide in my "flexslider" slideshow? For instance, when the slideshow transitions to the second slide, I want the text to change from "Mee ...

javascriptjqueryhtmlcss

Spacing between letters on a canvas element

This question is straightforward - I am struggling to find a way to adjust the letter spacing when drawing text on a canvas element. I want to achieve a similar effect as the CSS letter-spacing attribute, by increasing the space between each letter in the ...

javascriptcsshtmlcanvasletter-spacing

When the mouse hovers over the slider, the final image jumps into view

After successfully building an image slider that displays 2 partial images and 1 full image on hover, I encountered a bug when setting the last image to its full width by default. This caused a temporary gap in the slider as the other images were hovered o ...

javascriptjqueryhtmlcss

Tips for storing an image from an HTML file input element into a specific folder

One of the elements on my webpage is as follows: <input type="file" accept="image/*" id="fileAdd" name="image" size="30" /> I'm looking for a way to store the image selected by the user into a specific folder within the project. How can I ach ...

htmlfiledirectory

What is the best way to add spacing between items in an unordered list using HTML and CSS?

I have put together a list that I want to display with lines in between each word... here's the progress so far: #header { position: absolute; width: 100%; } #navbar { position: relative; padding-top: 0.8em; padding-left: 31em; } ul { l ...

htmlcss

Any tips for avoiding a new line when generating html attribute values to prevent my json string from breaking?

When working with JSON string values in button element attributes, I have encountered an issue where a single quote causes the value to break and create newlines. For example: var $json = JSON.stringify('{"Long_text":"This is \'my json stri ...

javascripthtml