Skip to main content

Notifications

Announcements

No record found.

Dynamics 365 Community / Forums / Commerce forum / The best image Size an...
Commerce forum
Suggested answer

The best image Size and dimensions

Posted on by 375

Hello every one ,

what's the best image size and dimensions to get the highly resolution in dyanmics 365  e-commerce website

  • Christina Profile Picture
    Christina on at
    RE: The best image Size and dimensions

    Hej Sam, for me the pictures oploaded in the correct dimensions for the single modules (hero, feature, tile) appear in a very poor resolution on the page. They are kind of blurry and using the sitebuilder giving them a 100 in quality does not solve the issue. Any advice?

  • dawidgreen Profile Picture
    dawidgreen 5 on at
    RE: The best image Size and dimensions

    Hi,

    unfortunately, optimization on product images is a tough question. One of the ways to fix it is to set your image to 100% quality using your media module. However, there are plenty of tools and plugins for trading platforms that can help with image optimization of any kind. I also saw 2 or 3 good guides on youtube that describe the ways to deal with it in detail. I also had to resize photo for my own website, so I'm glad that I found the necessary software for that. I didn't think that I would use it that ofter tbh, but it helps to work with plenty of images.

    thanks,

    David.

  • Suggested answer
    Sam Jarawan Profile Picture
    Sam Jarawan on at
    RE: The best image Size and dimensions

    Hi Ahmed, the advice i gave earlier was more around marketing images that you can put on the site.  Now I see you are referring to product images.  The lower quality issue on zoom is a known issue and is being fixed targeting our 10.0.19 release.  In the meantime to fix this, you can set the image quality to 100% on the media gallery module on the PDP page as shown below.

    pastedimage1613688837826v1.png

    thanks,

    Sam

  • AhmedSaeed Profile Picture
    AhmedSaeed 375 on at
    RE: The best image Size and dimensions

    Hi sam ,

    the problem is when try to zoom in the image in media galary in DefaultPdp the image resolution is very bad 

    pastedimage1613679669772v1.png

  • Sam Jarawan Profile Picture
    Sam Jarawan on at
    RE: The best image Size and dimensions

    It depends what you're trying to do, can you elaborate and what your goal is?

    thanks,

    Sam

  • AhmedSaeed Profile Picture
    AhmedSaeed 375 on at
    RE: The best image Size and dimensions

    Hi Sam,

    thanks for your response , in this case did i need to extend Fabrikam theme or i can change directly

    pastedimage1613635857374v1.png

  • Suggested answer
    CRMJetty Profile Picture
    CRMJetty 3,508 on at
    RE: The best image Size and dimensions

    Hello,

    pls refer this article,

    https://community.dynamics.com/365/f/dynamics-365-general-forum/295200/change-size-of-the-image-on-entity-form/848298

    https://docs.microsoft.com/en-us/previous-versions/dynamicscrm-2016/developers-guide/dn817886(v=crm.8)#uploading-image-data

    I hope it helps,

    Thanks.

    Please mark as verified if the answer is helpful. Welcome to join hot discussions in Dynamics 365

  • Sam Jarawan Profile Picture
    Sam Jarawan on at
    RE: The best image Size and dimensions

    Hi Ahmed,

    That's a great question.  You really want to upload the highest resolution image you'll want to render on the site on the biggest screen (view port) size.

    There is an image resizing service that will serve up the best size for each view port and the defaults can be changes using the SDK in your theme in the theme.settings.json file.  See this doc for more information if you want to change the settings: Configure theme settings.

    Each module and their layouts can be configured to an appropriate resolution for each view port size, the below is an example of the "content-block" module "Hero" layout taken from the fabrikam.theme.settings.json file:

    ...

            "content-block": {

                "properties": {
                    "full-width": {
                        "friendlyName""Hero",
                        "description""Image on background with text overlay",
                        "type""layout",
                        "properties": {
                            "image": {
                                "friendlyName""Hero Image Settings",
                                "description""Image settings for the hero",
                                "type""imageSizes",
                                "properties": {
                                    "xs": {
                                        "width"800,
                                        "height"600
                                    },
                                    "sm": {
                                        "width"1200,
                                        "height"900
                                    },
                                    "md": {
                                        "width"1600,
                                        "height"900
                                    },
                                    "lg": {
                                        "width"1600,
                                        "height"700
                                    },
                                    "xl": {
                                        "width"1600,
                                        "height"700
                                    }
                                }
                            }
                        }
                    },

    So for a Hero image, you'll want to upload the highest resolution set above and the images will be scaled down to appropriate sizes at rendering time.  In site builder there is a global setting and module settings to change the quality of the image in percentage, this is useful to serve up more compressed images if  you need to achieve faster download performance for any of the images.  In site builder you can also change the focal point of each image per module so as the size changes different parts of the image can be set as the main focal point to ensure they show up in a smaller resolution of the image.

    Hope that helps,

    Sam

Helpful resources

Quick Links

Replay now available! Dynamics 365 Community Call (CRM Edition)

Catch up on the first D365 Community Call held on 7/10

Community Spotlight of the Month

Kudos to Saurav Dhyani!

Congratulations to the June Top 10 community leaders!

These stars go above and beyond . . .

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 288,420 Super User

#2
Martin Dráb Profile Picture

Martin Dráb 225,672 Super User

#3
nmaenpaa Profile Picture

nmaenpaa 101,148

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans