Uploading Images to the Web

#1

Ok, So I understand raster vs vector graphics. Lets just get that out of the way, lol. I have done mostly print work, do designing for digital is my weak point. Here is the issue I’m having:

I’m making a simple vector graphic that says Happy Thanksgiving to upload to Facebook. I have designed it in Illustrator because it’s vector (maybe should be using photoshop instead?). I have designed it to size 1200px by 630px. It’s just white lettering with an orange gradient background. I would love to save it as an SVG but Facebook does not let me upload that file type. So, I export as a jpg at 150. When I post, it’s blurry. I know jpeg is a lossy format, and it’s not going o be absolutely crisp and perfect, but it seems to be pixelated and discolored around where the white meets the orange. This happens on etsy as well, but no one has a solution. Is all this due to Facebook compressing the images further? Looks great when I open the jpg on my computer, but terrible on Facebook. It doesn’t look professional. Is there anything on my end that can help the situation. I have attached a screen shot of the Facebook post to reference.

Screen Shot 2020-11-26 at 11.45.22 AM
Screen Shot 2020-11-26 at 11.45.22 AM1191×625 138 KB

#2

Yes, probably. Have you seen this Facebook page on the subject:

#3

you could always try to hit the “optimize for type” button

#4

It should also be 72 ppi.

You’re worried about lossy formats when putting on the web? Lossy is just a compression systems, it can’t be undone, but that’s why you keep a master of the file.

For this type of image, however, a PNG or GIF would be preferred due to nature of it’s content.

If Facebook has some sort of parser for converting images on upload, then that’s where you’re falling down.

Follow the guidelines, JPEG at 72 ppi and it should be at the size it’s being displayed at.

#5

Thank you for the help! I appreciate it!

#6