Attributes srcset + sizes in <img> tag

Responsive images with HTML
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg"
srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1000.jpg 2x,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1500.jpg 3x" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg"
srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg 500w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1000.jpg 1000w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1500.jpg 1500w" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg"
srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg 500w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1000.jpg 1000w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1500.jpg 1500w"
sizes="(min-width: 600px) 50vw,
100vw"
alt="alternative text">

--

--

--

passionated web developer everything that you do with passion will make you a better person

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

FontDrop!–What’s Inside Your Font File?

Keeping Secret Keys Out of Version Control in Flutter

Implementation of Stack in JavaScript

Recursion.

Introduction to Git (for beginners, from a beginner)

Study: What are IS’ main issues?

Photo by Marvin Meyer on Unsplash

Kubernetes Best Practices

Accelerating time to insight with Dremio’s Snowflake Connector

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Giorgiosaud

Giorgiosaud

passionated web developer everything that you do with passion will make you a better person

More from Medium

Building a React/Redux Application with a Ruby/Rails backend

How to Add Icon and Splash Screen to your Ionic App

Browser Plugin Extension — Making own web plugin extension

Content Security Policy