Why is my text-containing image not showing up in full resolution on homepage?

[baronmingus]

Hello,

I'm aware that Shopify compresses images, and according to this article it's for good reason.

However, our image that contains text did not fare so well during the compression process. The image is in a section on our homepage.

I ended up removing the section from the homepage. I added an HTML section where, when the user clicks on the image, it opens in a new tab at full resolution.

I'm stumped. Why doesn't it show up at full resolution on the homepage?

Thanks in advance.

[Lana]

Hello @baronmingus!

Oftentimes issues like this are due to the image not fitting the theme's parameters, which is where you end up seeing images with bad resolutions. It can also be down to the image itself, in which case you might not be able to get it perfect, but there are some things you can look into to see if this can be improved.

First, could you tell me what is the name of the theme you're using? If it is one of our free Shopify themes then we may have a guide in our help centre that details what the optimal image size is.

Alternatively, you can try to put your image through our online resizer tool  which is designed to help optimize your images for Shopify Themes.

I also wanted to ask you about the chart - what is this for and what kind of products do you sell? Depending on this I might be able to find some better suggestions for you.

[baronmingus]

Hi, @Lana 

Thanks for your thoughtful reply, first and foremost!

We are using the paid Trademark theme from Maestroo; we heavily modified it with custom code.

According to their site, they do in fact suggest certain sizes for things like articles, dual slideshows, and so forth.

However, none of these suggestions seemed to work.

To answer your next question, our client sells motorcycle communications products. This chart is a handy way for potential customers to compare products at a glance.

Again, much obliged for your response.

[Lana · Accepted solution]

Since you have already tried so much troubleshooting and even coding to make this work, perhaps you want to consider an option other than the image?

I know this isn't ideal, but I looked into an app called Size Matters, which is primarily a size chart creation app for your product pages. Some of the advantages that I found with this app are that first of all, it has to be manually added through the code of the theme, and does not automatically appear on the product page as it is intended for. Since you mentioned that you were comfortable with coding through detailing the changes you made on your theme before, this might be suitable for you as you could look to add their code on your homepage instead!

The app is completely free, and although it is intended for a size chart, I found that all of the fields within the chart come empty when you first install it, which means you can fully customize it to your products. Just as the screenshot you showed me, you can choose to have bold titles running across the top, and also down the left hand side column.

However, you will be sacrificing that lovely green colour on your original image, unfortunately I did not find a way to customize that part within the app. 

[baronmingus]

Hi, @Lana 

That was very helpful!

The jury is still out as to whether our design team wants to implement this app, and indeed, I myself am not as big a fan of plugins and apps because, well, deprecation and all that. 🙂 However! I really like how you went above and beyond in doing all that work to suss out this solution. We're definitely on the right track.

Thanks so much for the helpful suggestion!