• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Some images don't appear in browser preview, and they pixilate themselves

Explorer ,
Feb 19, 2018 Feb 19, 2018

Copy link to clipboard

Copied

I'm building a large site, and nearly all of the images are PNGs.  They show no problem.  Right now, I'm working on our links page.  Every link has a banner ad and text.  The page looks fine in preview mode.  But when I preview in the browser, ALL of the banner ads disappear.  Any image I place that isn't a banner ad will show up, but not the ads.  I've tested this on other pages, and I run into the same problem again.  I'm led to believe they're the pictures themselves, but how?

Every banner ad is adjusted in photoshop to fit specific resolutions, nothing too large.  I know in advanced that resizing will lead to pixilation problems.  For some odd reason, when I'm working with the responsive resizing (turning it all to "none"), the images suddenly get pixilated as if I've enlarged them.  No matter how many times I replace the images, they remain blurry.  I have to resave the original file in Photoshop (no adjustments made) then place them.

I'm led to believe something is wrong with the images.  They won't show in Browser Preview, and they pixilate themselves.  How do I find out what the problem is, and how do I fix it???  Help!!!

Views

1.5K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Explorer , Mar 13, 2018 Mar 13, 2018

Okay, I found the solution to the initial problem, and I'll post it here in case someone else has this same problem.

Even when I uploaded a temporary page to the business catalyst so my client could see my progress, I still could not get the banner ads of the resources page to load.  They loaded fine on Edge, but not on Chrome.

Turned out, after hours of harrumphing and searching an endless array of threads, I discovered the problem:

The Adblock Plus extension.

Disable that extension, and suddenly a

...

Votes

Translate

Translate
LEGEND ,
Feb 19, 2018 Feb 19, 2018

Copy link to clipboard

Copied

Well, how did you place your images/ads? Within a rectangle (M)? Within a frame (F)? With CMD+D / STRG+D?

To see it better and faster, we would ask for a .muse. Please reduce it to one page with maybe one image and one ad.

Delete other pages and very important, save as with a new name (your file doesn`t get overwritten and the filesize gets small enough for sending and downloading).

Share this muse via CC or dropbox. To share it via CC, simply save the file / or drag it into the Creative Cloud Files folder.

By right clicking this file you get prompted to share a link

Bildschirmfoto 2018-02-19 um 14.39.09.png

Best Regards,

Uwe

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 20, 2018 Feb 20, 2018

Copy link to clipboard

Copied

Thanks for the fast response.  I did as asked, and here's the link:

Adobe Creative Cloud

Let me know if it worked right.

I have three images on there:

Poison Control Center (banner ad I had to make) with link

Apple CX (banner ad given to me)

and our Updates icon.

For some reason, the Poison Control doesn't load.

When I place an image, I go to File>Place.  I never had a problem, and I still don't with other pictures.  Just every banner ad on our resource page.  If I placed another image, they load.  Simply the specific ones do not.

I have another two banner ads that were given to me.  They do not load either.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 20, 2018 Feb 20, 2018

Copy link to clipboard

Copied

There is nothing, what we cal tell about this issue without having the originals of these three images. So please give us the original image files, which you have placed in Muse.

I don’t understand what you mean with "Any image I place that isn't a banner ad will show up, but not the ads."

What is the difference  in your eyes between an „image“ and a „banner ad“?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 20, 2018 Feb 20, 2018

Copy link to clipboard

Copied

Sorry about the images:

Adobe Creative Cloud

Adobe Creative Cloud

Adobe Creative Cloud

Those are the three images.

Yes, banner ads are the same as images.  But I distinguish them as such because some of the banner ads were  graphics given to me for advertising, while others I simply made.  I use the term banner ad to signify the image for a link.

I had to make the Poison Control image: screenshot the website, clip out the logo, shrink it to size, then save it as png so the Poison Control link has an image.  I had to do that with most of the banner ads.

The Apple CX was given to me from that company's graphics department.  Some others were given to me, probably copied off their websites.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 20, 2018 Feb 20, 2018

Copy link to clipboard

Copied

  • First of all: I have no problem at all with „disappearing images“. All images are shown as they should in layout, in browser preview, in exported HTML and on the published site.
  • Second, your „pixelation“ issue:

I can’t say any more, as that, what I said for example here: https://forums.adobe.com/thread/2371157

  • First step in your case: If you are using PNG files, as you do, and you don’t want them to be converted to JPG during output, go to „Site Properties/Content“ and deselect „Convert opaque PNG to JPEG“.
  • Second step: You will have no pixelation issue, if you place your images without any scaling (100 %) in Muse. If you do so, Muse won’t touch your images in any way. The output quality is exactly the input quality. If you create a HiDPI site, the images should be exactly twice the pixel size of your image frame in Muse.

What I did (and I recommend to reproduce this by yourself):

  • Deselect „Convert opaque PNG to JPEG“ in „Site Properties/Content“
  • Place your three sample images on a newly created page without any scaling. Simply click with your „image loaded“ cursor onto the page.
  • Now choose menu „File/Export as HTML …"
  • Go to the exported „images“ folder on your local drive and compare size and quality of the exported images with the originals. You will find no difference at all. The images are identical. Additionally, you may open the exported site in your browser and drag the images from the browser window onto your machine. You will see: The browser uses the original images without any quality losses too.

So you see: Muse only „touches“ your images, if you don’t place them in 100 % original size. If you need to do this, you’d better rescale the images in Photoshop before placing them in original size in Muse. Photoshop doubtlessly is the better „image cruncher“.

Additionally:

  • If you zoom in your browser window, the images necessarily will become blurry, because the browser only has the image in its placed size, not in its enlarges size.
  • When you resize the browser window, the image quality during resizing isn’t under control of Muse. This is completely up to your browser’s/operating system’s image calculation algorithms.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 20, 2018 Feb 20, 2018

Copy link to clipboard

Copied

I've tried deselecting "Convert opaque PNG to JPEG".  Poison Control image still doesn't load on browser preview.

I place the images without scaling (I use photoshop to make adjustments).  Poison Control image still pixilated itself for no apparent reason (along with all the other banner ads I'm using for the page's links).

I'll see if exporting the error.muse file has any effect on the Poison Control picture loading or not on my screen, but as it stands I still don't have it appearing on my end when I do browser preview.  I've cleaned out my Chrome cache, and it still didn't load.  There wasn't even a placeholder for where the image was supposed to load.  And this happens on almost all of my banner ads.

Now I am trying to figure out why the Poison Control image loads for you, and not for me.

Here is what I see:

Muse Preview:

Adobe Creative Cloud

Browser Preview:

Adobe Creative Cloud

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 21, 2018 Feb 21, 2018

Copy link to clipboard

Copied

Did you try to follow the steps, I told you? You didn’t say anything about this.

If the output image is identical with the input image, this can’t be a Muse issue.

Which browser exactly do you use to preview the site? Did you try a different browser? Did you try to publish a temporary and free site on Businesscatalyst, using the „Publish“ button top right of Muse’s application window?

Again: Let us repeat the procedure: Create a new site, place only this image and nothing else, look, if the issue is still present and share this .muse file together with the original „Poison Control“ image with us. I think, we will not have a different result as the one I described in my last post, but let us try!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 21, 2018 Feb 21, 2018

Copy link to clipboard

Copied

Okay everything you suggested did not work, but exporting as HTML did in fact work.  Why would this happen?  I don't trust Muse Preview because small measuring adjustments are made between the two that really screw things up.

The only issue that seems to persist is the links don't want to stay on the same set style, but I haven't messed much with that because I was more focused on the images.

Thanks a bunch for clearing this up.  I learned much (I'm also knew to CC, so thanks for the tuts on using Cloud).

Y.D.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 21, 2018 Feb 21, 2018

Copy link to clipboard

Copied

That is the difference“ You don’t trust Muse, I don’t know, if I can trust, that you have been able to reproduce exactly, what I said!

If you can’t give us a file, which shows your issue clearly, nobody will be able to assist.

The file, you shared with us in post 4 didn’t show a disappearing image and the pixelation issue, I think, is explained in depth.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 21, 2018 Feb 21, 2018

Copy link to clipboard

Copied

I struggle to trust Muse when coded tables appear differently in Muse than in browser preview, among other minute measurement details throughout the whole site.  Small differences, but enough to drive me insane with the disproportions.

I find it odd that the files I shared show no problem, when they still show an error on my end.  The screen shot I uploaded tells you what I see, as opposed to what apparently you see.  I've never had this issue before, and it's only on the banner ads.  Any other image I've made is fine.

Likewise, the random pixilations only ever happened on those same banner ads.  No problems with resizing; I use photoshop for all of that.  But adjusting the responsive sizing choice (making it "None") caused pixilation, and I never touched the scaling.

Either way, it shows in export.  If I have to export that page just to see a decent preview, then so be it.  But at least it works.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 21, 2018 Feb 21, 2018

Copy link to clipboard

Copied

You definitely are the only one with this issue in this forum, believe me. But we can’t solve it this way. You know, what is necessary …

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 13, 2018 Mar 13, 2018

Copy link to clipboard

Copied

LATEST

Okay, I found the solution to the initial problem, and I'll post it here in case someone else has this same problem.

Even when I uploaded a temporary page to the business catalyst so my client could see my progress, I still could not get the banner ads of the resources page to load.  They loaded fine on Edge, but not on Chrome.

Turned out, after hours of harrumphing and searching an endless array of threads, I discovered the problem:

The Adblock Plus extension.

Disable that extension, and suddenly all my banner ads are appearing!  Apparently, Chrome detects my own creation.  I guess that means I'm doing a great job making the links page! 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines