picture (source) element VS img srcset attribute

by

Both srcset and picture do approximately the same thing, but there is a subtle difference:

  • picture dictates what image the browser should use, whereas
  • srcset gives the browser a choice. A lot of things can be used to select this choice like viewport size, users preferences, network condition and so on. Hopefully in the future browsers would become smarter and smarter with selecting the appropriate image.

The support for srcset is pretty good and almost all current browsers more or less support it. Situation with a picture element is a little bit worse.

More Related Contents:

  1. Why does my design elements look different in all browsers? UPDATE [closed]
  2. What are the steps to make a HTML design responsive? [closed]
  3. Bootstrap row with columns of different height
  4. Vertically align an image inside a div with responsive height
  5. Grid of responsive squares
  6. Responsive grid of hexagons
  7. Responsively change div size keeping aspect ratio [duplicate]
  8. IE8 support for CSS Media Query
  9. Maintain aspect ratio of div but fill screen width and height in CSS?
  10. Maintain the aspect ratio of a div with CSS
  11. Shape with a slanted side (responsive)
  12. Responsive Separator for Horizontal List
  13. Media Queries for Different zoom Levels of Browser
  14. Background image not showing in Safari
  15. Hiding elements in responsive layout?
  16. Mosaic of images HTML/CSS
  17. What can be other ways than @media to make a website responsive suitably if I don’t mention target resolution? [closed]
  18. Responsive tables, the smart way
  19. Auto height on parent container with Absolute/Fixed Children
  20. how to make responsive website for all devices [closed]
  21. What is the best way to move an element that’s on the top to the bottom in Responsive design
  22. Responsive CSS Circles
  23. Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques [closed]
  24. Load a low-res background image first, then a high-res one
  25. Force browser to clear cache
  26. Relative path in HTML
  27. Are class names in CSS selectors case sensitive?
  28. HTML table headers always visible at top of window when viewing a large table
  29. How to move placeholder to top on focus AND while typing?
  30. Convert RGBA to HEX

Leave a Comment