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

Slow loading

New Here ,
Jan 01, 2017 Jan 01, 2017

Copy link to clipboard

Copied

Just having completed my new web-site, I was trying it out in a web browser, and found it too heavy - the pages loading way to slowly. On the pages are many single photos and slide-shows. I guess one problem-solving act would be to diminish them - but how small can they be not to give a low-quality appearance? And are there other things I can do to solve this problem? There are no other heavy ingredients in the web-site, just text. Lisa

Views

426

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

LEGEND , Jan 01, 2017 Jan 01, 2017

Concerning images:

If you make your images in pixel dimensions exactly(!) as big as you need them, you have total control over its quality.

If you place your images at 100% pixel size without any scaling, Muse won’t touch these images at all. Output quality will be exactly the same as input quality.

Best practice to achieve this: Don’t place an image

image.jpg

into your layout, but an image placeholder

placeholder.jpg

Now scale your original image in Photoshop to exactly the dimensions of this placeholder, and place this ima

...

Votes

Translate

Translate
LEGEND ,
Jan 01, 2017 Jan 01, 2017

Copy link to clipboard

Copied

Concerning images:

If you make your images in pixel dimensions exactly(!) as big as you need them, you have total control over its quality.

If you place your images at 100% pixel size without any scaling, Muse won’t touch these images at all. Output quality will be exactly the same as input quality.

Best practice to achieve this: Don’t place an image

image.jpg

into your layout, but an image placeholder

placeholder.jpg

Now scale your original image in Photoshop to exactly the dimensions of this placeholder, and place this image directly into the placeholder frame.

Do this by using the biggest representation of your image (at widest breakpoint, if you use responsive layout). Muse will optimise the picture automatically for the smaller breakpoints. (If necessary, you may want to optimise the images in smaller breakpoints as well by yourself. You can do this, by right clicking onto the placed image in a smaller breakpoint and choose "Hide in Breakpoint", then place your self optimised image instead, right click this one and choose "Hide in Other Breakpoints".

Note: If you are creating a HiDPI site, do the same, but instead of pixel size, use double pixel size for your images. That means: if you need 300 x 400 px, place an image with 600 x 800 px.

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
New Here ,
Jan 01, 2017 Jan 01, 2017

Copy link to clipboard

Copied

Thanks for this informative answer! Now I just need to know: what exactly is a placeholder and how do you make it?

Lisa

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 ,
Jan 01, 2017 Jan 01, 2017

Copy link to clipboard

Copied

Look at the little screenshots!

An image placeholder simply is an empty image frame, which can be filled later by dragging an image into it or using the "Place"command.

There are 2 ways to apply these "placeholders":

1. Select the "crossed out" rectangle from the vertical toolbar and "draw" a rectangle onto your page.

2. Place an image, double click onto it to select the image within its container and press backspace to delete the image content. What remains, is an empty image container (= placeholder) waiting to be filled later on.

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
New Here ,
Jan 01, 2017 Jan 01, 2017

Copy link to clipboard

Copied

I´m sorry - but there still are some things that I don´t understand. The pictures on my pages have a certain size, chosen by me. All my original photos I have made 567 pixels high, for then to up- or down-size them on the pages.

So. If I do as you say - copy one of those, let´s say, up-sized photos on one of the pages, double-click on it and delete the picture, I then have a place-holder of the correct size. But how do I then get it into PhotoShop? I tried to copy/paste it, but that didn´t work. So I still don´t understand the connection with the pictures of the sizes that I have chosen in Muse and how to get them exactly right-sized in PhotoShop. I don´t find any information of the pixel-size of the place-holder, and don´t know how big it is, where it is.

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 ,
Jan 01, 2017 Jan 01, 2017

Copy link to clipboard

Copied

Hm. You don’t get me, I think.

If you want to optimise your image assets:

Before placing an image, use placeholders in Muse to check the optimum size.

You obtain the pixel size by looking at the upper command strip, the transform panel or the tool tip, appearing, when resizing the container:

Screen.jpg

In Photoshop create an image in exactly this pixel size, save it and place it into the corresponding placeholder frame in Muse.

This may be quite a lot of work, and is only necessary, if you want your assets to have the very best compromise of "size" (kb/mb) – what means load time – and quality.

Normally Muse does this for you, but since Photoshop produces significant higher quality, it is highly recommended to do this job in PS instead of leaving it to Muse, if you want to obtain best possible quality.

If this procedure doesn’t help in reducing load times, you could try to use some jpg optimiser tools like the highly effective "JPEG mini (http://www.jpegmini.com)

The next step, if nothing helps, is reducing the amount of images on one page and eventually relinquish fashionable and fancy "one pager" in favour of an "old school" multi page site.

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
New Here ,
Jan 01, 2017 Jan 01, 2017

Copy link to clipboard

Copied

LATEST

Now I get you! - quite a lot of work, you´re right. But thank you for all the information and your patience.

:)Lisa

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