How to set product page Layout and Image Size in Pearl Theme for Magento 2

1. Select Product Page Version

You can select between 4 product page types as you can see in Pearl Theme Demo Store.

Product Page design V1 is built on default Magento product page structure. Product Page 2/3/4 are using custom design and existing admin options may be slightly different than in V1. 

Note: When you are changing between different Product page versions make sure to do this on store view level and not on default config; On store view level changing product page version will pre-populate the existing product page options with settings specific for each product page version. On default config this is not available.   

2. Set Product Page Image size

You can control the Product Page Image Size for all available product page designs using below Pearl Theme admin options :

Store > Configuration > WeltPixel > Product Page > General Settings

• Image area width [%] - set width for image section [ in % ], For example you can set it to 60% of the width of the website. 
• Product info area width [%] - set width for product info area [ in %], for example you can set it to 40% of the width of the website

Note: The sum of Image Area width and Product Info Area width, should not exceed 100%. This settings is applied only on desktop, on mobile devices the columns will automatically take advantage of the responsive design.

3. Product Page Galley Images - optimization and quality

You can also control the resolution for product page gallery images. Depending on the page layout and the General Settings > Image Area Width you configure, you may need to change the Main Image Width used in product page. 

By default magento caches product images at a specific resolution, but for cases where you increase product gallery width you may need to serve images cached at a higher resolution in order to keep the image quality unaltered. 

You can set the Product Page gallery image resolution by using below admin options and magento will create cached product images at the resolution specified:

Store > Configuration > WeltPixel > Product Page > Images 

• Main Image Width [px] Insert width for main image [in px]. Example: 1200
• Main Image Height [px] Insert height for main image [in px]. Example: 1200

Note: If you set an Image Width smaller than Image Area Width defined under Product Page > General Settings, your image will be stretched to match the main container size and you will experience image quality loss. In order to avoid this make sure to use a main picture size width that is equal/greater than the image container defined. 

• Example1: If image area width is 60% of a full screen 1920px page width, image width should be at least 1152px in order to avoid picture stretching.
• Example2: If image area width is 60% of a 1400px page width, image width should be at least 840px in order to avoid picture stretching.

4. Product Page Width 

Pearl Theme allows you to also control Product Page Width as well as the width for multiple page types from your magento 2 store.

This comes in handy when you want to display product page content centred, with left and right margins. For this cases you can set Product Page section width to 1200px / 1400px / 90% etc and all the gallery, product information , description will be contained in in a section with a max-width specified.

For reference, Product Page Width can be controlled under WeltPixel > Frontend Options > Section Width > Product Page as explained in below article:

How to customize the width for your store sections in Magento 2 Pearl Theme