Geek Culture
Published in

Geek Culture

Responsive image with picture tag

Load different images for different screen sizes

In this article, we are going to talk about how to use picture tag to display a proper image for different screen sizes. This is nice for responsive design webpage.

Normally we insert an image in a webpage and then set width to 100% for different screen sizes. For example, we just add the image with Large.png

<div ><img style="width: 100%;" src="Large.png" alt=""></div>

--

--

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