Developer Hub » Image Settings

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000019278-developer-hub-image-settings

What are the Image Settings?


The Image Settings of the website determine the final size that images will be saved after being uploaded to the website by members.

The default settings that come with a Brilliant Directories website are designed so that images will fit well in all of the areas of the website in which they display while being optimized for load speed and meeting minimum requirements for social media sharing.


IMPORTANT NOTE: Unless doing heavy customizations to the underlying code of the website's design, there is no need to touch these settings as they will already be optimized for use on a Brilliant Directories website.


How to Access the Image Settings


Access the Image Settings by navigating to ADMIN » DEVELOPER HUB » IMAGE SETTINGS:




This page should look something like this:



General Image Settings Information


Some Definitions:


Lazy Load (Load Images After Scroll / Load Images After Page Load / Disabled)


Lazy Loading is a set of techniques in web and application development that defers the loading of resources on a page to a later point in time—when those resources are actually needed instead of loading them upfront. These techniques help in improving performance, better utilization of the device’s resources, and reducing associated costs with bandwidth consumption.

  • Load Images After Scroll: Images will only start loading once the page scrolls showing new data and images (Best bandwidth consumption efficiency)
  • Load Images After Page Load: Once the first images Above the fold are loaded, it starts loading images below the fold (quickly loads pages, but consumes more bandwidth) Best for Carousels and Streaming Widgets.
  • Disabled: Loads all images by default. 


Ratio


The "Ratio" refers to the Aspect Ratio of the image, which is how large the height of an image will be relative to the width of the image and vice-versa.  


For example, a 1:1 aspect ratio means it will be a square - for every 1 pixel of width, the image will have 1 pixel of height.  As another example, the Aspect Ratio of an HD television is 16:9 (a rectangle that is wider than it is tall), meaning the image on the television will have 16 pixels of width for every 9 pixels of height.  


An "Open" aspect ratio means there is no set aspect ratio at all, meaning the image can be any shape.


For more information about Aspect Ratios, please see the Wikipedia article on the topic.



Max Width


The width of the final image in pixels.



Max Height


The height of the final image in pixels.



Social Media Sharing


When uploading an image, two copies of the image will be saved: one that is optimized for display on the website, and one that is optimized for social media sharing. Currently, Facebook and many other popular social media sites require images to be at least 200px x 200px to be shared on their platform.  One copy of the image will be saved to be at least this size, and another will be saved that is optimized for displaying on the website where a smaller size is required.


Specific Image Settings Information


For more information about the settings available on this page as they apply to different areas of the site, check out the following articles: