Yes, I’ve searched and none of the suggestions worked. I’ve changed the resolution multiple times and my image is crisp and clear in Illustrator. In fact the most crisp image in illustrator came out the blurriest when I uploaded it.
I saw solutions that involved changing the code but they are a year old and I guess the code changed cause I didn’t have the code they referred to anywhere that I could see.
How is this still a problem? I see a lot of other people have the same issue but I would think that making the opening image clear should be a pretty easy thing to do eh?
@huzzahnai - can you please share this banner page link?
https://www.nomodachi.com/
This origin image of this one is very slightly blurry, not as much as on the website though. I have a much clearer origin image but when I put that on my banner is was even more blurry
@huzzahnai - check this screenshot, original size is 750x375 but rendered size is 1349x720.. that is why it is getting blurred… I think the coding is forcing image to be 750x375 and hence even if you have clean images it is not working… the code for this particular section needs to be checked to find why is it doing this and make sure that image original size is kept as it is
Does that mean I have to change the original size? Or do something with the code? sorry, I’m not sure exactly what your message meant because I don’t know what checking the code means
@huzzahnai - your images are fine, need to edit the code.. you will need someone who has shopify coding knowledge, since it will be bit time taking task I doubt if anyone will do it for free but you can check shopify experts
Really?
Well thats disappointing that shopify can’t even figure out how to have an image show up not blurry. I would think that would be a pretty basic feature of one of the biggest e-commerce sites on the planet. Oh well, thanks for letting me know
@huzzahnai - do you have any recommended image size in the customize settings from where you added the image?
I just added it to the default banner section in Dawn, and I used the sizes that people have recommended for Dawn
@huzzahnai - very strange, it should work if you use the recommended size
yeah, it’s really annoying. It should work eh?
1 Like
I at least just scaled my image down to the size you said it was rescaling it at and that helped. Thanks!
1 Like
@huzzahnai - great, glad I could help a bit, do let me know if you have any issues you can DM here or have my email below.
Thanks, my next issue is just figuring how to make it not look blurry on the phone since thats where most traffic comes from. Well, one problem down at least, have a good day!
1 Like
Hey,
I agree with the people above, but it this was me I would probably float a png/vector over the background.
Should fix the bleeding and reduce overall pageload as well. Image is effectively rendering alot of grey for no reason. should look crisper as well.
float a png over the background? Sorry, not sure what you mean, do you mean have the background image as png? or do you mean have a png with a transparent background as the banner image?
Hey,
I would create a div with the dark grey and then overlay a png of the creative floating above it.
These might help get the idea, but its effectively what you did in illustrator but the benefit is you dont load all that grey (as the css does it for you)
https://www.w3docs.com/snippets/css/how-to-position-one-image-on-top-of-another-in-html-css.html
https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div
Thanks, but that looks like coding and I’m trying to do as little of that as possible. The reason I chose shopify is that it’s billed as a drag and drop easy to use platform. Once I start in with coding that defeats the purpose and then when one thing changes all of a sudden other stuff starts acting weird. I’m more just looking for a way to get Shopify to work like it’s supposed to
I mean yeah it is code… ?
Sure you can create a drag and drop, but it will have limitations (like your experiencing). Shopify is working as expected, its drag and drop but there are limitations.
Not sure what you mean by adjusting the code and other things go wrong. as is will said with coding.
“Debugging is like being the detective in a crime movie where you are also the murderer.” - Filipe Fortes
I don’t think it’s working as expected, unless you are saying that the pictures are expected to be blurry by design? But that would be weird for them to design a site with blurry pictures. I get that there are limitations of course, but thats different than what’s happening here.
What I mean about adjust the code and other things going wrong is stuff like I will adjust code to change a picture size, but then the other things are out of line on the site after I do that or I do that but then the mobile view is strange.
Shrugging off saying “yeah it’s code” is kind of weird, it’s like me giving you an answer in Japanese and when you say you can’t understand it because it’s Japanese I just respond “I mean yeah it is Japanese… ?”. (Again, this site is not billed as being one you have to code, one of its main selling points is that you don’t need to code. So just shrugging it off is weird. I mean the front page of the Shopify site literally has as first in the list of “your store, your way” the sentences “Bring your vision to life with our drag-and-drop store creator. No coding experience required”
