Retrieve an image using screen resolution parameters [using only HTML]

During a recent interview, the interviewer posed an interesting question regarding 2 images:

  1. There is one large resolution image that needs to be displayed on laptops and desktops.
  2. There is also a small image that should only be shown on mobile devices.

The challenge is to fetch the correct image (either of the two) based solely on the "screen resolution" using HTML alone. The use of CSS/JS/jQuery is not allowed!

Despite having strong HTML skills, I was unable to provide an answer to this. Does anyone have any insight into what the interviewer may have meant by this question or what the correct solution could be?

javascripthtmlcss

Answer №1

To achieve this task, you can utilize the picture tag. Take a look at the example provided below.

<picture>
  <source media="(min-width:465px)" srcset="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg">
  <source media="(min-width:600px)" srcset="https://webneel.com/wallpaper/sites/default/files/images/08-2018/3-nature-wallpaper-mountain.jpg">
  <img src="https://cdn141.picsart.com/297499064115201.jpg?type=webp&to=crop&r=256" alt="Flowers" style="width:auto;">
</picture>

For optimal results, view this fiddle and resize the result window as needed.

To learn more about the picture element, visit this link.

Answer №2

<img srcset="picture-480w.jpg 480w,picture-800w.jpg 800w" sizes="(max-width:600px)480px,800px" src="picture-800w.jpg" alt="photo">

Using srcset ensures that the image with a width of 480 pixels is displayed for smaller screens and the 800-pixel image is shown on larger screens.

The sizes attribute specifies that when the screen has a maximum width of 600 pixels, the 480 pixel image should be used, while anything wider should display the 800 pixel image.

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

Having the same name for multiple query parameters does not result in an array being returned

Using the link http://example.com/users?test=1&test=2 router.route('/users/?').get((req, res) => { console.dir(req.query) //=> { test : 1 } }) The output is { test : 1 } instead of an expected array [ 1, 2 ]. Even ?test[]=1&test ...

javascriptnode.jsexpressquery-string

What is the best way to utilize the Material UI theme provider in a React application that includes a mix of class components and functional components?

I have been working on a React app that utilizes class components, but I have been transitioning to using functional components instead. I have replaced some class components with functional ones in the application. However, I have encountered an issue whe ...

javascriptreactjsmaterial-ui

How to find a collision between a spherical object and a triangular shape in a three

In my research, I am exploring the possibility of detecting collisions between a triangle and a sphere in three.js. Currently, I have devised a method using the raycaster and the sphere's vertices. However, this approach has proven to be unreliable a ...

javascriptthree.jscollision-detection

Ways to retrieve child state in React?

After creating my own form component with a render() method that looks like this: render() { return ( <form onSubmit={this.onSubmit} ref={(c)=>this._form=c}> {this.props.children} </form> ) } I enabled ...

javascriptreactjs

Is there a method to add a border around a specific table row?

Trying to add borders around specific table rows that change colors when the mouse hovers over them. However, borders are not visible unless using border-collapse:collapse;. I need to avoid border-collapse because it causes issues with visibility at the to ...

htmlcsshtml-table

Using a function with a parameter as an argument in an event handler

Imagine you have the code snippet below: $('#from').focus(listExpand(1)); $('#to').focus(listExpand(3)); I am facing an issue as the code is not behaving as expected. I believe the problem lies in passing a function result instead of ...

javascriptjquery

What is the best way to divide a page into four equal sections using two container divs?

I am working on a webpage layout that requires dividing it into four equal sections. The challenge is overlapping text onto two of these sections, which complicates the design process. My solution is to stack two container DIVs on top of each other, both w ...

htmlcss-floatcontainersequals

What are the steps to fetch JSON data from a different domain server using AJAX?

I'm facing an issue with the API I'm using for my ajax call. It returns json and does not support jsonp, which unfortunately cannot be changed. Every time I try to use the code snippet below, I encounter a 'missing ; before statement' e ...

javascriptjqueryjsonajax

Implementing dotenv in a Node JS package

I'm in the process of developing a Node application that retrieves search results through a Google Custom Search Engine (CSE). To streamline the process, I plan to extract the component responsible for sending requests to Google and receiving the res ...

javascriptnode.jsnpmnode-modules

What is the best way to compare two CSS files and selectively replicate just the discrepancies?

Is there a way to compare and copy different information from CSS files into another file? For instance, if I have two CSS files named a.css and b.css, is there a method to automatically select and copy only the differences between the two files? Thank y ...

htmlcssfileweb

Looking for a plugin that can color the text "Google" in the exact shade as the Google logo? Check out this jQuery

Is there a jQuery plugin or similar tool available that can change the color of each letter in the word "Google" to match the colors of the Google logo? For instance, if I have the following HTML markup: <span>Google AdWords</span> I would l ...

jquerycssjquery-pluginstarget

Passing default props to a component in React that includes a function as one of the

I am working on a React component that has default props set. The issue arises when I try to pass an additional prop, specifically a function. class MyComponent extends Component { constructor(props) { console.log('props', props); supe ...

javascriptreactjs

Tips for updating server-side variables from the client-side in Next.js

There is a code snippet in api/scraper.js file that I need help with. const request = require("request-promise"); const cheerio = require("cheerio"); let url = "https://crese.org/distintivo-azul/"; let result; request(url, ...

javascriptnext.jsserver-sideclient-side

Resolving Anchor Problems in PHP

I'm struggling with a line of code and need some help: echo "<td>"<a href="userdetails.php?".$row[username].">View Details</a></td>"; When I try to create the link on a page, I want it to be in the format userdetails.php?USER ...

phphtmlanchor

Retrieve the file name from the URL while disregarding the query string

Looking for a way to extract the test.jsp from this URL: http://www.xyz.com/a/test.jsp?a=b&c=d Can anyone provide guidance on how to accomplish this task? ...

javascriptjquery

Learn how to implement Redux login to display the first letter of a user's name and their login name simultaneously

I am implementing a Redux login feature and after successful login, I want to display the first letter of the user's name or email in a span element within the header section. Can anyone provide a solution for this? Below is my Redux login code snippe ...

javascriptnode.jsreactjsexpress

Require assistance with understanding the aes-256-cbc encryption using oaepHash

Procedure for Secure Data Encryption: Generate a random 256-bit encryption key (K_s). For each Personally Identifiable Information (PII) value in the payload: 1. Pad the plaintext with PKCS#7 padding. 2. Create a random 128-bit Initialization Vector (IV). ...

javascriptnode.jssecurityencryptioncryptography

Frequently refreshing a page to display the most recent information without needing to reload the entire

I am seeking a solution for updating the comments section on my website live or every 30 seconds. The comments are fetched from a MySQL database using PHP: <?php $link = mysql_connect('localhost', 'root', ''); ...

javascriptphpjquerymysqlajax

CSS Duo-Toned Background

I've been searching everywhere for a solution to this issue. I have a design that I'm attempting to code using divs and CSS. The top half of the image features a gradient that transitions from left to right with different colors. My struggle lies ...

htmlcssbackground

What is the best way to generate unique mousedown callbacks on the fly?

My goal is to create multiple divs, each with a unique mousedown callback function. However, I want each callback function to behave differently based on the specific div that is clicked. Below is the code I have been using to create the divs and set the ...

javascriptjqueryhtmlcssmousedown