Question

0

192

Views

How to render different images based on screen size

I want to render a different svg based on the browser screen width. I've found a solution that expects me to use srcSet within an img tag. However, I can't get it to work.

The goal should be to render SmallTalents on mobile, and BigTalents on tablets+

Quick notes:

I'm using TailwindCSS.
The svgs are completely different, not just scaled down versions.

Example

import React from "react";
import SmallTalents from "../../../assets/smallTalents.svg";
import BigTalents from "../../../assets/bigTalents.svg";

function Example() {
  return (
    <section>
      <img
        srcSet={`${SmallTalents}, 200w ${BigTalents} 600w`}
        sizes="(max-width: 600px) 480px, 800px"
        src={SmallTalents}
        alt="talents"
      />
    </section>
  );
}

export default Example;

Update:

Tried this, not working

<picture>
  <source media="(min-width: 300px)" srcset={SmallTalents} />
  <source media="(min-width: 900px)" srcset={BigTalents} />
</picture>

Solution (not ideal)

<img src={SmallTalents} alt="talents" className="my-5 md:hidden" />
<img src={BigTalents} alt="talents" className="my-5 hidden md:flex" />

about 3 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-30T12:53:02.183Z

You can use picture element in html for rendering different images based on the screen size:

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

Answer 2 · 2022-06-30T12:53:02.191Z

I think there is a small typo in your srcSet property, the 200w should be on the left side of the comma. i.e srcSet={${SmallTalents} 200w, ${BigTalents} 600w}

0

192