Why with the jagged lines?!

[365megan]

My diagonal lines are jagged and stepped when exporting to .PNG and I can't figure out how to fix them. I've tried turning off GPU, exporting at different resolutions, and numerous other things. I even had someone from Adobe support remote control my computer and they couldn't fix it either. Is this just the quality I get? 

PNGoriginal in Ai

[365megan]

Yeah, because it looks good in Illustrator and Photoshop just not on the website. I figured I was just doing something wrong and that I could make it look better.

[Conrad_C]

One way to confirm that it's Squarespace is to drag the image directly into an empty window in your web browser. That will show you how the browser renders the image without any website code affecting it. If it looks the same as Squarespace then what you're seeing is just how it looks on the Web. If it looks different than Squarespace, then that will show you that Squarespace applies additional processing that's changing how it looks.

If you are using a Retina/HiDPI display, viewing the image in Photoshop at 1:1 magnification will probably show it sharp, but about half the size as in a web browser, so Photoshop may not be a perfect test.

[matthewn43692242]

I would bet that squarespace is not only resizing your image but also re-encoding it as a JPG file. Drag the image from your webpage to your desktop. if the file extension has changed to .jpg &/or the file size is smaller than your original then there is your problem.

[365megan]

Squarespace supports .PNG. When I dragged it to my desktop it's still an .PNG, and the size is 2500 x 1542. I don't know if that is the size I started with or not....

[matthewn43692242]

Ok, it actually looks very clear to me. Very sharp. I think since you've uploaded the higher-res file you've actually fixed it but your browser has cached the older copy of the image and is stupbornly showing it to you on your machine. 

Kill your browser History or force the page to refresh all elements of the page & you'll see the nice, clean version.

You fixed it.

[matthewn43692242]

I should add that if you're on a low-res monitor an image like this with very thin black lines over a white background might never look very sharp. If the image you pulled off the live web page is really that big (2500 x 1542) then maybe your monitor is just not very sharp.

[365megan]

hrm, still looks crappy to me so it must just be my monitor. Hopefully the general population has better monitors than I do so it will look good to them! Glad it looks good to you guys!

[Ton Frederiks]

Looks good to me too on your website. It seems that Squarespace creates various sizes starting with a 2500 pixels width.

https://support.squarespace.com/hc/en-us/articles/206542517

If you create an artboard in Illustrator of 2500 px wide, use that and export it at 72 ppi with the "Use Artboards" option checked you wil export at the largest size for Squarespace.

[365megan]

I'll do that. That way I know its the best it can possibly be for Squarespace and if it looks crappy to me still then I'll know that its just my monitor.

[Ton Frederiks]

Nice chair!

[365megan]

thanks!

[365megan]

Thank you so much everyone! I'd been working on this for days before I put it out to the community, should have just done that from the start! Thanks for all being so patient with my stupid questions and newbie ignorance lol.