How are you exporting your files from PS - do you use save for web?
A possible way to hard sharper images would be to save over your original files with larger files but do not remove the files in your composition. Whne you save over, the images will adjust automatically into the same boundaries of your original files (with something acting as fit-content to frame in InDesign) in Animate and will be sharper. Of course your files will be a little larger but since what you have now is not very big, it should not be a big problem.
I hope this helps.
Do these images contain 'transparency'?
If not, do not use .png. Use .jpg instead from Ps > Save For Web and adjust the 'quality' setting to around 80%.
Good point Darrell, if no transparency then use jpg!
Thanks, but I don't think this will work: an image file is just pixels and ppi at physcial size doesn't "adjust automatically," as the output is always just web resolution, no matter what you do to it.
So, if I import an image that is, say, 300 x 400 pixels at 72 ppi, that's how it shows up. It won't render in any kind of "higher res" format. In InDesign, you are just resizing, but are still dependent upon output device resolution in the end.
Thanks, but no change. I exported as Maximum JPG, but the resultant bitmap doesn't render any more sharply. It's a very strange thing, which if it is indeed some kind of built-in Edge file import problem, will mean that's the end of Edge development for me, at least for the time being.
I am an experienced Flash programmer, just trying to explore non-Flash animation before Flash disappears completely. Most of my clients are far more concerned with how their websites appear on tablets and smartphones than they are with how they look on computers. Since all iOS-based devices don't display Flash, HTML5/CSS solutions are the only real alternative, right now.
1 person found this helpful
i am not sure you understood what I meant.
If you loaded into Animate an image that is for example 100 x 100 when you saved it and leave it in place. If you save over it in your image folder with the same name but now a 200 x200 image, the image will fit into you 100 x 100 area but will be a better resolution because it is fitting into the same space.
I have done this many time when the image was not clear enough. Also if you have a responsive composition, the images will then be clear in a large browser window.
Hope this make sense but you can try it.
To someone like me who works with image files all day long, this is just nuts - but it works!!!
So, what we've got here is that the "default" Edge behavior is that using Import for any kind of image really doesn't work properly.
Do you have any idea as to WHY Edge works like this? You've got to admit that writing over image files used in an Edge animation with higher-res versions of the same files (externally to Edge, of course) in order to achieve decent sharpness is just a CRAZY workflow. It takes the term "unintuitive" to previously unimagined heights...
How did you EVER figure this out?
Frankly I am not sure - this especially happens with png files - It is hard to put together a software that has to work with lots of browsers when HTML5 is a pretty fluid technology changing all the time and browsers updating, adding, and removing stuff all the time. I am happy with the progress that the team has made so far. Next version will be even better I am sure. Remember creating software is not as easy as it may seem to someone who just works with images. I am sure you love PS and all its features but it did not get this great in one day! Same with Animate.
I see your point, BUT since Edge only allows the addition of image files through the Import control, it's really hard to understand how the default behavior of this control really doesn't work correctly.
I spend more time writing bare HTML/CSS/JS these days than I do working just with image files, and I'm no stranger to Premiere, Flash, InDesign, DW, Illustrator (and in the past, Director, Xpress, Freehand, etc etc etc...) Allowing Edge to rely on a crucial UNDOCUMENTED Import configuration is pretty feeble, IMHO. Even in the otherwise excellent Adobe Evangelist video tutorials, there's NOTHING about Import and the resolution "feature" you uncovered.
Maybe creating software is not easy, but Adobe is not exactly giving this stuff away, either...
Anyhow, thanks again for your help.
Maybe you will get a better answer when everyone is back from vacation after the 1st oft he year.
I'm curious, do your images also render the same in Chrome or Safari? The reason I ask is that we have a Webkit-based Stage, and everything that displays is what should be in a browser. If you have images I could play with, I can investigate a little more. That being said, the version of Webkit that is packaged with Edge Animate 2.x (current version of CC) is not Retina-enabled, so that might be what you're seeing.
Hi, Elaine. Thanks for your inquiry. Here's my basic workflow:
Output JPG from Photoshop at intended size, say 300 x 400 px @ 72ppi.
Import to stage in Edge Animate - no options here. Image seems considerably less sharp, right on the stage - I have multiple identical monitors, so I can compare.
Use Edge Animate's Preview in Browser (in this case, Firefox for general testing purposes...) the images are not sharp.
If I DOUBLE the resolution when outputting from PS (600 x 800px @72 ppi), saving with the identical filename, as resdesign suggested, and change nothing in Edge, the outputted images look great. I have tested with many bitmaps and they all exhibit the SAME behavior.
Extremely inconvenient to have to manually re-calculate image output sizes to accommodate this problem in Edge.
Okay, have you also tried looking at the image directly in a browser? The reason I ask is that we actually don't modify the images at all, just serve them up.
That's what I thought - the output is just HTML + JS + CSS. I am still testing and will let you know. Other fires to put out first!
Has anyone figured out an easier solution to this in the last six months? I only just started using Edge Animate but immediately noticed the poor image sharpness of imported PNGs.
What software did you use to output the png's? The quality also depends on the png settings (or preset depending on the host application) you used upon export.
I never see any quality loss when used in Edge Animate.