Images uploaded through pages are always blurry

brycelansing
Tourist
13 0 3

I'm having an issue with images that I insert into a page being blurry. This seems to happen regardless of the theme. All of my product photos have no problem. But its whenever I insert an image (usually a simple black and white logo) into either a page or a product description, it always turns out blurry no matter what the resolution. Even when I create a "logo list" through the theme itself, with the exact same image files, I don't have this problem.

For instance, if I upload and insert a full resolution file, in the sizing options if I put "original size" it will come out huge and clear, but if I put any of the resizing options (which are all square options for some reason, even if the image is not square), like "large: (480x480)" it will resize it but will be blurry.

I tried resizing the original to 600px wide, then choosing "original size", the image is displayed larger than 600px wide, and blurry. Trying to resize it makes it blurry as well. The only time I've ever been able to get it to show up clear is by uploading the full resolution (3434px wide) logo and choosing "original size". Is there a way I can resolve this?

Replies 11 (11)
Jason
Shopify Expert
10438 168 2081

Any chance you can post to a page that shows the blurry image? Seeing it live certainly helps to understand what you're talking about more, and if others see the issue you do.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.
Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.
★ http://freakdesign.com.au ★
brycelansing
Tourist
13 0 3

Yes the web address is http://avenirskate.com/ and the password is AvenirPreview

The logos I'm having this issue with are the logos in the "organizations" pages as well as the ones in the product description. Basically any image that was manually inserted into a page outside of the theme editor itself.

brycelansing
Tourist
13 0 3

I’m still having trouble figuring this out, no matter what I try, any image or logo uploaded directly to a page is blurry, even if the original image is high resolution. If I upload the same file through the theme editor itself it comes out crisp and clear. Does anyone have any suggestions?

brycelansing
Tourist
13 0 3

I tried another work around but it didn't work. I uploaded images 600px wide, they showed up clear and big. Then I went into "show HTML" and manually changed the dimensions to 300px wide for each one, they became the size that I wanted, but all the sudden they are blurry again. I can't figure out why and I don't see anything in the code that can be corrected.

 

Here is the code for one image, am I missing something?

<div><img src="https://cdn.shopify.com/s/files/1/0438/0596/6496/files/Skateistan_logo_Triangle_Black_600px_copy_b68..." alt="" style="display: block; margin-left: auto; margin-right: auto;" /></div>

ChoosiZon
Navigator
370 61 95

that is because the images you uploaded are blurry.

Try use this :

blackandrosegold2_2048x.jpg

your original image :

blackandrosegold2_2048x (1).jpg

For faster response with a fee pls email to : choositech@outlook.com ------ Donate
brycelansing
Tourist
13 0 3

Not the product shots themselves but the organization logos. Here is an extreme example, I upload an image way bigger than it needs to be, 3434x3434. If I select "original size" its clear, and huge. but as soon as I select any other size, for instance 240x240, It resizes it and its no longer clear.

Screen Shot 2021-04-20 at 7.14.55 AM.pngScreen Shot 2021-04-20 at 7.16.41 AM.pngScreen Shot 2021-04-20 at 7.16.29 AM.png

ChoosiZon
Navigator
370 61 95

@brycelansing wrote:

Not the product shots themselves but the organization logos. Here is an extreme example, I upload an image way bigger than it needs to be, 3434x3434. If I select "original size" its clear, and huge. but as soon as I select any other size, for instance 240x240, It resizes it and its no longer clear.


when creating the logo try to do a 2000px wide at 300ppi :

S123.png

 

You need to redo the logo.

 

For faster response with a fee pls email to : choositech@outlook.com ------ Donate
brycelansing
Tourist
13 0 3

Thanks for the reply! I just tried this, started with the vector to get a clear 2000px wide image at 300dpi. Inserted the new 300dpi image in (clear when at "original size"), but as soon as I resized to 240x240 it still makes it unclear. I'm not sure if this helps but this is what the html for that image looks like. Is there something in the code that is forcing the image to compress? I remember a while back I had this problem with the logo on the password page, and there was an easy fix with the code that made the image clear, but I can't quite remember what it was.

 

<div style="text-align: start;"><img src="https://cdn.shopify.com/s/files/1/0438/0596/6496/files/Skateistan_Triangle_2000px_240x240.jpg?v=1618..." alt="" style="display: block; margin-left: auto; margin-right: auto;" /></div>

brycelansing
Tourist
13 0 3

Just figured it out! If anyone has this issue, here is the fix. I deleted set the sizing to 240x240 which set the code to:

<div style="text-align: start;"><img src="https://cdn.shopify.com/s/files/1/0438/0596/6496/files/Skateistan_Triangle_2000px_240_240.jpg?v=1618..." style="margin-right: auto; margin-left: auto; float: none; display: block;" width="240x240" height="240x240" />

 

In the file I deleted the "_240_240" and in the width and height I manually entered width as 240 and height as 143. So my final code looked like this:

 

<div style="text-align: start;"><img src="https://cdn.shopify.com/s/files/1/0438/0596/6496/files/Skateistan_Triangle_2000px.jpg?v=1618930690" style="margin-right: auto; margin-left: auto; float: none; display: block;" width="240" height="143" />

 

Now the image is clear!