12 Replies Latest reply on Mar 13, 2018 12:50 PM by Yellow Duckie

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

    Yellow Duckie Level 1

      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!!!

        • 1. Re: Some images don't appear in browser preview, and they pixilate themselves
          fotoroeder Adobe Community Professional

          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

          1 person found this helpful
          • 2. Re: Some images don't appear in browser preview, and they pixilate themselves
            Yellow Duckie Level 1

            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.

            • 3. Re: Some images don't appear in browser preview, and they pixilate themselves
              Günter Heißenbüttel Adobe Community Professional

              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“?

              • 4. Re: Some images don't appear in browser preview, and they pixilate themselves
                Yellow Duckie Level 1

                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.

                • 5. Re: Some images don't appear in browser preview, and they pixilate themselves
                  Günter Heißenbüttel Adobe Community Professional
                  • 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.
                  • 6. Re: Some images don't appear in browser preview, and they pixilate themselves
                    Yellow Duckie Level 1

                    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

                    • 7. Re: Some images don't appear in browser preview, and they pixilate themselves
                      Günter Heißenbüttel Adobe Community Professional

                      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!

                      • 8. Re: Some images don't appear in browser preview, and they pixilate themselves
                        Yellow Duckie Level 1

                        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.

                        • 9. Re: Some images don't appear in browser preview, and they pixilate themselves
                          Günter Heißenbüttel Adobe Community Professional

                          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.

                          • 10. Re: Some images don't appear in browser preview, and they pixilate themselves
                            Yellow Duckie Level 1

                            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.

                            • 11. Re: Some images don't appear in browser preview, and they pixilate themselves
                              Günter Heißenbüttel Adobe Community Professional

                              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 …

                              • 12. Re: Some images don't appear in browser preview, and they pixilate themselves
                                Yellow Duckie Level 1

                                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!