Okay
  Public Ticket #2684733
Recommend image dimensions
Closed

Comments

  • riponad2 started the conversation

    Hello,


    I am having issues second-guessing image-specifications and dimensions, its driving me crazy. All full page width.


    Can you please refer me to documentation where all the image specifications and dimensions are specified.

    Or provide the details for recommended image specifications and dimensions:

    Example:

    • Slider
    • full width divaders (background images)
    • full width background image for row components
    • full width Footer
    • full width Header
    • Inline images for each image component

    Including mobile full width dimensions, and large screens.

    Thank you



  •  8,848
    Tahir replied

    Hey Again,

    For all Full Width Images, 1920x1080 would be sufficient. For the Portfolio, we use these dimensions: 

    1945673058.pngClick To Open Larger Image.

    Thanks


    ThemeNectar Support Team 

  •  1,075
    ThemeNectar replied

    Hey riponad2,

    Anything that is being used full width would be similar in the sense you would want to provide the image large enough to be crisp on most desktops. Tahir's recommendation of 1920px wide is a good general rule. However, the height of the image would depend on how you're using the image. There are many cases, and no one size fits all solution. For example, some things to take into consideration would be: 

    1. Is the image standalone, or is content present in the row on top of the image which will change the row aspect ratio on mobile vs desktop?
    2.  Are you trying to display the image in its natural aspect ratio without clipping? 
    3. Are you using a parallax effect on the image?

    In regard to images which are placed using the "Single image" page builder element - those images will expand to fit the width of the column that they're contained inside and will keep their natural aspect ratio. Therefore, you would just need to ensure the size you're using is large enough to fill the column you're placing it in.

    If you can share a specific page URL and let us know what section(s) you're struggling with, we'd be happy to provide specific sizing recommendations. 

  • riponad2 replied

    Excellent, thank you.


    yes, I was having issues with getting the dimensions right for the stage visual section, or main header background. For example the image on the home page https://www.surfstr.com 


    What size would you recommend for this - 1920x1080? I just want to make sure it looks crisp clear, so thought i'd have to double the size 2x.


    Thanks again, you guys are fast in replying!

  •  1,075
    ThemeNectar replied

    Hey,

    Are you referring to this specific image? If so, that's contained within a Revolution Slider instance, and Salient is not handling any of the sizing.

    In any case, that image could be uploaded a little larger if you're concerned with large, high pixel density desktop displays. The main concern with larger images is the file size, however since you're using a simple image with only a few colors, the file size will remain small enough to be suitable for web even if you bump up the resolution a bit more.

  • riponad2 replied

    Excellent, thank you. I will give that a shot.


    One last question about images,  whats the recommended size for a footer image. I wanted to place my own image as a footer that has a good pixel display and works for both desktop and mobile.


    It's just a footer background image.


    Thanks again

  •  1,075
    ThemeNectar replied

    Hey,

    Can you show me the image you're trying to use as the footer background, so that I can get an idea of what you're trying to achieve? 

    The footer will drastically change its aspect ratio from desktop to mobile due to the text content stacking from all of your 3 columns, so the BG image will get quite clipped.

  • riponad2 replied

    Thanks,

    I will get back to you on this one. In essence, i was looking for your recommended dimensions for a footer image - As I would then design it. feel free to close the ticket, I can open again at a later stage. 

    Thanks,

    Adam