Our system is currently resizing images to match the specifications for TV and Mobile Apps as well as the Web App on the retina and regular screens.
Some customers have hundreds or even thousands of videos in the Catalog; with the current thumbnail resolution, the Catalog loads relatively fast for this high volume. If we increased the quality of the images, that'd affect the loading speed and the customer experience overall.
We recommend that you upload the Player Image at 1920x1080px and the Catalog Image at 1480x840px. The minimum resolution is 96 dpi and 192 dpi for retina displays. Images will be resized by the platform automatically.
However, some devices with larger screens but lower definition will upscale the smaller file, resulting in a loss of quality – This behavior can be seen in some mobile devices as well.
You can add some code to retain the quality of your thumbnails. Before you add the code, make sure to create a backup of your theme. Then, the code below can be implemented within the <style> tags in the theme.liquid file. It will limit the size of the image on devices with a lower definition:
@media only screen and (-webkit-max-device-pixel-ratio: 1),
only screen and (max--moz-device-pixel-ratio: 1),
only screen and (-o-max-device-pixel-ratio: 1/1),
only screen and (max-device-pixel-ratio: 1),
only screen and (max-resolution: 96dpi),
only screen and (max-resolution: 1dppx)
{
.swiper-slide {
max-width: 350px;
}
}
Comparison
High-definition viewport (retina)
Image width: 700px
Low-definition viewport without the snippet
Image width: 350px
Low-definition viewport with the snippet
Image width: 350px
