Why with the jagged lines?!

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.

Nice chair!

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.

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.

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.

ok, I used the scale tool to scale things up, not sure what exact size I'm at, I just made it bigger. My stroke weight is 0.5pt and I exported (Export As...) at 600 ppi with the Art Optimize anti-aliasing option to make a .PNG. When I loaded it onto my website, this was my result...

ok, upping it to 600 ppi didn't do anything for me. Now I'm in photoshop, looking at my image size. Anything look weird?

Try View > Pixel Preview in Illustrator with a 100% zoom factor.

I am sure your design is too small to export without the distortion you showed.

I think you might actually be dealing with what is refered to as "retina support" in the web browser. This means support for high-res screens. There are specific css solutions but I don't know too much about squarespace so I don't know if you have access to css or html code directly.

a "regular monitor is measured at 72 dpi, retina monitors are more like 220 dpi but the whole placement system is still based on an assumed 72dpi unit so you basically upload images that are about 2x or 3x the size of the space. Square space may figure out the rest on it's own.

If not, you'll have to edit the code. There are 3 or 4 ways to do it.

For example: (simplest solution)

• you have a space on the web page that is 400px by 800px.

• Upload an image that is 2x (800px by 1600px) 

• Hard-code the image size in html or css to 400x800

• This gives you double the resolution in the same display space. The image wil look sharper.

Search "retina support" & you'll easily find the 3 or 4 best optpns to do it. You may actually just want to export the image way bigger than you think you need & see if squarespace figures it out on its own.

Apologies, my captions were incorrect in that first post. The blurry one was the PNG and the clear one was in Illustrator. I'm working at 100% zoom but I'm not sure of the exact dimensions of the image. So I started with a 3D model in Rhino, made 2D line drawings and then saved them as an .ai file with a 1inch = 0.125 conversion. That conversion gave me the best result in Ai and I didn't need to scale the images. From there, I was saving them as a .PNG and I've tried exporting (Export As...) in every resolution option I have, screen, medium and high as well as trying both anti-aliasing options. I should say that I'm then taking the .PNG and putting it on my website and there is where the distortion is really bad. My line drawing is good in Illustrator, smooth even when I zoom in, but it shows terribly on my website. I don't know if its just my screen or something with squarespace (my website host) or what the issue is. I don't how to attach the Ai file for review....