search

macjabeth / showbunny

Watch and track your favourite movies and tv shows.
https://showbunny.xyz/
MIT License
6 stars 12 forks source link

Responsive Image Sizes #33

Closed macjabeth closed 3 years ago

macjabeth commented 3 years ago

Instead of coding the image URL as a background, it should use an picture tag with source tags set to appropriate poster sizes so that the image quality is optimized for each device.

Example:

<picture>
  <source media="(max-width: 92px)" srcset="w92.jpg">
  <source media="(max-width: 154px)" srcset="w154.jpg">
  <source media="(max-width: 185px)" srcset="w185.jpg">
  <source media="(max-width: 342px)" srcset="w342.jpg">
  <source media="(max-width: 500px)" srcset="w500.jpg">
  <source media="(max-width: 780px)" srcset="w780.jpg">
  <img src="original.jpg" alt="Poster image">
</picture>

The available poster sizes can be viewed here. Documentation on responsive images can be found here.

d4rkener commented 3 years ago

Ok