• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Uploaded Image quality after converting to jpeg


szaz

New Member
#1
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.
 

szaz

New Member
#3
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.
 

Levi

Moderator
Staff member
#4
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%.
 

szaz

New Member
#5
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.
 

scotty

Well-Known Member
#6
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.
 

szaz

New Member
#7
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.
 
#8
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
 

Paul Murray

Moderator
Staff member
#9
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:
 
#10
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?
 

Paul Murray

Moderator
Staff member
#11
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.