Hey @real_Maestro
Oh thanks and glad to help! And never give up, you got this! 
I checked fiveprayers.de on my mobile and it looks great. And I can see one of our experts helped you here. However, there now seems to be an issue with picture quality on Desktop with your image banner and I highly recommend you keep the store password protected until all is perfect as you don’t want your future clientele to stumbled into a 
!
So on my desktop screen on most browsers, the Hoodies are looking slightly blurry if you 
closer:
So let’s go through the code changes here one by one and see where the 
is in the code:
The image quality degradation when applying your initial CSS code to make banners fixed could be due to several factors unrelated directly to the CSS fix itself. Shopify themes, including Dawn, dynamically serve scaled images based on the device and viewport to optimize loading times and performance. When you set the image position to fixed, it’s possible that this interferes with how the theme calculates the image size or how it serves the appropriate image resolution.
The original code snippet you inserted:
This code makes the banner image fixed, but it doesn’t directly influence the image quality. The issue might stem from how the theme’s JavaScript or Liquid code handles images after your CSS changes. It’s important to ensure that the images are served using Shopify’s srcset attributes, which allow the browser to select the most appropriate image size based on the screen resolution and size.
When you remove the Liquid code that assigns image widths and fetch priorities, i.e. remove Liquid variables that are used later in the code (like widths and fetch_priority), any reference to these variables will become invalid. This is why they are highlighted, indicating an error or a warning.
{%- liquid
...
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
...
-%}
If you remove the block that defines widths and fetch_priority, then you also need to remove or adjust any part of the code that uses these variables. They are used to dynamically set the sizes and srcset attributes of image tags, which are crucial for responsive and efficient image loading. Removing these without a proper replacement could further impact your site’s performance and the visual quality of images.
Ensure that the image serving mechanism (like srcset) is not disrupted by the CSS changes. You might need to adjust the Liquid code that generates image tags to ensure high-resolution images are served for fixed banners.
The reduction in image quality after applying the first code might be related to the way images are being scaled or the browser’s scaling algorithm. To potentially improve image quality, consider using the image-rendering: high-quality; CSS property. This property specifies a high-quality scaling algorithm, which might enhance the appearance of your images when scaled up or down. However, be aware that this can increase computational power requirements.
Here the current code taken from the Chrome Developer Console:
Show More
- ### Hoodie Blind Black
Ausverkauft
### Hoodie Blind Black Anbieter:
FIVE PRAYERS
Normaler Preis €44,90 EUR
Normaler Preis Verkaufspreis €44,90 EUR
<small>Stückpreis / pro </small>
Ausverkauft
- ### Hoodie Blind Off-White
Ausverkauft
### Hoodie Blind Off-White Anbieter:
FIVE PRAYERS
Normaler Preis €44,90 EUR
Normaler Preis Verkaufspreis €44,90 EUR
<small>Stückpreis / pro </small>
Ausverkauft
- ### Tee Hearts Black
Ausverkauft
### Tee Hearts Black Anbieter:
FIVE PRAYERS
Normaler Preis €29,95 EUR
Normaler Preis Verkaufspreis €29,95 EUR
<small>Stückpreis / pro </small>
Ausverkauft
- ### Tee Hearts Off White
Ausverkauft
### Tee Hearts Off White Anbieter:
FIVE PRAYERS
Normaler Preis €29,95 EUR
Normaler Preis Verkaufspreis €29,95 EUR
<small>Stückpreis / pro </small>
Ausverkauft
The potential causes for the images being blurry on the desktop, but not on mobile, could be closely related to the srcset and sizes attributes used in the <img> tags. Here are the specific points in your code that could be contributing to this issue:
-
srcset Attribute Configuration:
- The
srcset attribute lists multiple image sources along with their respective widths. This attribute allows browsers to select the most appropriate image size based on the current viewport width and the pixel density of the display.
- Your code snippet provides a good range of image widths (
165w to 2000w), which should ideally cover a wide range of device widths and resolutions. However, if the browser chooses an image size that’s too small for the container in which it’s displayed, this can lead to the image appearing blurry when scaled up to fit the container.
-
sizes Attribute Configuration:
- The
sizes attribute specifies the expected display width of the image in different viewport conditions. It seems like the sizes you’ve specified ((min-width: 1200px) 267px, ...) might not accurately represent the actual size of the image container in the layout on desktop screens.
- If the
sizes attribute underestimates the actual size of the image on larger screens, browsers might end up selecting lower-resolution images from the srcset list, leading to blurry images when they are scaled up to fill the container.
-
CSS and HTML Structure:
- The CSS classes applied to the containers (
card card--standard card--media, card__inner, media media--transparent media--hover-effect) might influence the sizing and scaling of the images. CSS rules associated with these classes could affect the final display size of the images, potentially causing them to stretch beyond their optimal resolution.
- The inline style
style="--ratio-percent: 100.0%;" suggests that there might be custom CSS variables controlling aspect ratios or other dimensions of the images or their containers. If these variables cause the images to be displayed larger than the widths specified in the srcset, that could lead to blurriness.
Potential Solutions:
- Review and Adjust the
sizes Attribute: Ensure that the values accurately reflect the display size of the images across different viewport widths, especially for desktop. You might need to increase the size values for desktop viewports to ensure that higher resolution images are selected by the browser.
- Inspect and Modify CSS Rules: Check the CSS rules associated with the classes and inline styles affecting the image containers. Make sure these rules do not cause the images to scale up beyond their original sizes in the
srcset.
- Test with Different Images: Experiment by temporarily adjusting the
srcset and sizes attributes to force higher resolution images to load on desktop screens. This can help identify if the issue is with the image selection process based on these attributes.
By carefully reviewing and adjusting the srcset and sizes attributes to better match the actual sizes at which images are displayed on desktop screens, you can likely resolve the issue of the images appearing blurry.
Feel free to ask the expert in your other thread!
