Highlighted

What is the best way to handle repetitive images assets used in different size on the same page?

Community Beginner ,
Dec 02, 2017

Copy link to clipboard

Copied

I'm using the logo of the company in multiple place on the same page.

Some place, it is around 50x50 pixels, while in an other section, the image is 700x700 pixels.

The logo came from Illustrator, and I exported it in different size.

Will the website be faster to load if I use only VersionBig.png of the logo (700x700) resized differents places, or should I also use the VersionSmall.png file possible for each time I place it on the page?

Would using a .SVG would be more efficient?

Thanks for your help!

Love to all

Views

131

Likes

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

What is the best way to handle repetitive images assets used in different size on the same page?

Community Beginner ,
Dec 02, 2017

Copy link to clipboard

Copied

I'm using the logo of the company in multiple place on the same page.

Some place, it is around 50x50 pixels, while in an other section, the image is 700x700 pixels.

The logo came from Illustrator, and I exported it in different size.

Will the website be faster to load if I use only VersionBig.png of the logo (700x700) resized differents places, or should I also use the VersionSmall.png file possible for each time I place it on the page?

Would using a .SVG would be more efficient?

Thanks for your help!

Love to all

Views

132

Likes

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
Dec 02, 2017 0
Guide ,
Dec 02, 2017

Copy link to clipboard

Copied

Will the website be faster to load if I use only VersionBig.png of the logo (700x700) resized differents places, or should I also use the VersionSmall.png file possible for each time I place it on the page?

Muse allows you to experiment to find answers without help . Just export to html and look in the images folder. You will see that your logo has become the size you set for it in Muse. Thus, the initial size of the image is only relevant for performance within the program, but does not affect the final site in any way. Therefore, you can use one image (VersionBig.png) for all variants.  The exception is the HDPI mode.

Would using a .SVG would be more efficient?

Generally, svg is the code and of course it should load faster than the image. But for Muse, I did not notice a performance improvement when using svg. However, the obvious plus svg is good image quality with any scaling

Likes

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
Reply
Loading...
Dec 02, 2017 2
Community Beginner ,
Dec 03, 2017

Copy link to clipboard

Copied

Thank you Pavel for your answer

  The exception is the HDPI mode.

What is the exception for the HDPI mode?
-I answered myself with the html export -(thanks for the hint!)  :
Answer: So HDPI does a second copy of twice the size used on the page.

Is it an exception? - (if I was, I would have to handle my images used in an other way than normal)

In this case, I should still use the larger image and let Muse do its magic !

And also, what happens for pictures I set to "Stretch to Browser Width" ?

Answer: Muse creates a version of x1,5 size of the one used. 

- could this create a problem, in case the newly bigger image stills doesn't reach the width of the client browser?

Likes

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
Reply
Loading...
Dec 03, 2017 0
LEGEND ,
Dec 03, 2017

Copy link to clipboard

Copied

Please read my answer 4 in this thread: https://forums.adobe.com/thread/1793996​. It should answer most of your question.

More deeper diving answers about image quality you’ll find, if you follow the links mentioned in this thread: https://forums.adobe.com/thread/2416435

Likes

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
Reply
Loading...
Dec 03, 2017 0