I did a quick search in this forum before posting but sadly I couldn't find a solution so far. I think the problem to begin with is that we don't know what the problem is.
What we tried so far: HDPI, "mobile sized" (not using big desktop images) pngs, jpgs, svgs, ai. Every format we could. CMYK, RGB, 72 and 300 dpi.
Still when we open the design on mobile it looks horrible, jagged edges, pixelation everywhere.
We even tried tutorials we found on this forum on how to export images. I believe WE are making a mistake somewhere but I can't tell what/which/where/why.
I have been making websites with Muse with Beta and this is the first time I have encountered this issue. Also, it doesn't happen with all the images, some work, some don't.
Please help me.
Designer is using a Macbook Pro with Illustrator CS6. I use a Custom PC (Gaming Rig) with CC Membership.
Link to sample :
Before going into details, some annotations:
Now to the underlying „problem“:
But there is one more problem, which has to be mentioned. Unfortunately this is method, how web browsers are working, and there is no way for Muse, to influence this behaviour:
Creating a responsive layout minimises this problem, because mobile browsers will use an according (smaller) breakpoint for rendering the page, but „minimising“ doesn’t mean „avoiding“.
Evidently, in most cases, there will be no breakpoint, which exactly(!) matches the device’s screen size. (If this should be the case, you would have to create hundreds/thousands of breakpoints: one for each known device).
Consequence: The mobile browser normally has to resize nearly every breakpoint/page width, in order to guarantee a screen filling page view. And resizing is inevitably connected to quality losses. As I alread said: There is absolutely nothing, Muse can do, to avoid this behaviour.
• For deeper informations about preserving image quality, read this:
https://forums.adobe.com/thread/1793996 (post #4)
If you think, you are confronted with a completely different problem, please do the following: Create a new site and place one of your "blurry" images onto it. Now let us have a look at this newly created site together with the original(!) image, which you have placed. Please upload the .muse file and the image to a service like Dropbox, and post the download link here. Follow the steps, which are described here: https://forums.adobe.com/docs/DOC-8652
You were right about the svg, we double checked and it works fine.
However jpegs and pngs are giving me a headache and I knew and/or tried everything you wrote + the two links.
I will upload my muse file when I get a chance to do it. Probably tomorrow morning.
A file with one „misbehaving“ image together with the original image is enough!