Bespoke has optimized the images to load quickly by taking advantage of features within Shopify's code and common practices for responsive images.
In this section...
Overview
There are 2 considerations for images:
Static: Is it a standalone image like a logo? The image container will take on the dimensions of the image
Background: Is it used as a background? The image will be cropped to use the available container. This will reduce the size of the rendered image by only loading what the customer will see:
Settings
Each section and template has the following setting:
Show image sizes
When enabled, it will display the minimum recommended width for each image in the upper left. If applicable, the height* will display after the width. Size is displayed in the Theme Customizer only, customers will not see this.
* NOTE: Height is approximate, and the actual height is dependent on the individual screen.
The code tries to anticipate the height of the container, but since it is a percentage of the individual screen, there is no way to be 100% accurate for images. This will affect background images or full width sections. It may help to measure this height using browser tools:
Lazy Loading
Sections and templates have a 'Lazy load image(s)' setting. This will give complete control for "above the fold" images. Disable for any image that is not visible on the initial page load. Adjusting these per section or template will help your Google Lighthouse and Shopify Speed Score.
Focal Points
Sections and templates that utilize an image picker will have an option to set a focal point on the image. After selecting the image, click 'Edit' to add a focal point, and set custom alt text. Learn more
Some images like the featured images for collections and blog posts do not have the option to set the focal point using the edit method, so you will have a 'Focal point' theme setting dropdown with broader options
Logo's
When possible, it is always best practice to use a PNG file for your logos. JPEG may reduce file size, but they will also reduce clarity and you want your brand looking sharp.
It is recommended to use an image width double the 'Max logo width' setting to keep your logos sharp.
* NOTE: May not be available on all sections, blocks or templates