Uploaded Image quality after converting to jpeg

szaz

New Member
Hi Guys,

I'm new to designing, so please bear with me.

I have created some vector diagrams in illustrator. I have to use these diagrams in a professional online blog and add in to google docs as well to send it to some students.

The problem is that when i submit the images to those who would publish my blog, they might choose to not have the image published to the 100% size. They might reduce it. And when reduced, the images doesn't look clear or good. The text is unclear. But once I drag the image to 100% size, it looks fine.

Is there a way to maintain the clarity of the images even when it gets published at less than 100% of the original size?

Thanks in advance.
 
As I mentioned, someone else is publishing my blog. I'm not sure of the size that would appear on the page as they would do it as per their requirements. They would probably scale it down and the image would be clear only when clicked on to enlarge. I need an option where even when it's scaled down to let's say 70%, it still maintains the clarity.

I tried to change my original image size to something smaller and play around with the fonts. But that just destroys the aesthetics of my diagram.
 
They would probably scale it down and the image would be clear only when clicked on to enlarge. I need an option where even when it's scaled down to let's say 70%, it still maintains the clarity.
Realistically there is nothing you can do to fix this issue because part of the 'scaling down' process is making things smaller which in turn reduces clarity and/or quality of the image. You have the same issue with any type of thumbnail which is there to be clicked on to show at 100%.
 
I see your point there and that makes sense. Thank you clearing that out. You explanation made more sense than the Mr.Scotty rhetorical point. Don't answer if you can't help a noob.
 
I see your point there and that makes sense. Thank you clearing that out. You explanation made more sense than the Mr.Scotty rhetorical point. Don't answer if you can't help a noob.

I wasn't being facetious nor rhetorical.
Let me explain...

If the diagram isn't legible at a smaller size the "make it bigger".
If it needs to be viewed at a certain size then make it clearer.
If a diagram or info-graphic are not presenting the information in a clear way then it kind of defeats the point.
Practicality sometimes outweigh aesthetics.
I hope that makes it a bit clearer but if not I could always make you a diagram.

By the way...It's "Mr Jackson" to you.
 
Thanks. My issue is that I am not going to be publishing the blog myself. It's being published by a professional online community. I might not be given a chance to view the final output. So I needed to know if there is anything I can do to make sure that the image quality isn't completely degraded when scaled down to 70 or 80 % (Just in case they decide to do so) and it is at least readable.

But thank you. I'm sorry if I misunderstood your intentions. I'm not a designer. I do know how use Illustrator or Photoshop to produce some pretty images, just never had to optimise it until now for professional online publishing.
 
Hi Guys,

I'm new to designing, so please bear with me.

I have created some vector diagrams in illustrator. I have to use these diagrams in a professional online blog and add in to google docs as well to send it to some students.

The problem is that when i submit the images to those who would publish my blog, they might choose to not have the image published to the 100% size. They might reduce it. And when reduced, the images doesn't look clear or good. The text is unclear. But once I drag the image to 100% size, it looks fine.

Is there a way to maintain the clarity of the images even when it gets published at less than 100% of the original size?

Thanks in advance.

Do they allow an .svg format? this will keep the quality and a user can zoom in without the graphic getting fuzzy
 
Do they allow an .svg format? this will keep the quality and a user can zoom in without the graphic getting fuzzy

SVG isn't supported in all browsers though, so you'd need a fallback to a PNG/JPG which I assume the average publisher of the site may not know how to do.

I'd probably just give them a range of sizes that you'd scaled in Illustrator yourself and let them pick the most appropriate. You may have to just deal with what you get given though. :unsure:
 
SVG isn't supported in all browsers though, so you'd need a fallback to a PNG/JPG which I assume the average publisher of the site may not know how to do.

I'd probably just give them a range of sizes that you'd scaled in Illustrator yourself and let them pick the most appropriate. You may have to just deal with what you get given though. :unsure:

true, I guess you can not add your own CSS and set media queries according to different screen-sizes?
 
You wouldn't use CSS for this, you'd need to add a fallback to the mark-up that just detects an error if the SVG doesn't load and replaces it with a JPG version. There's ways to do it, but it depends on what the site is using as a CMS.
 
Back
Top