When you upload an image, WordPress creates several versions of the image at different resolutions depending on the thumbnail sizes that are registered by your plugins and themes. Which version is used when your pages load will effect the image size and quality, and the load time for your page.
Using images that are larger than needed for their container is unnecessary and can impact everything from page responsiveness to your Google page rankings.
In previous years, web designers would create images at the exact size they need to appear on screen. With responsive design and the huge number of screen sizes on today’s web devices, this approach is not very practical. A better appoach is to think of your image needing to fit inside a container. The size of the container (in pixels) will vary depending on the display and so we need to give the browser a selection of image files to choose between with varying resolutions to fill the container when the page is rendered.
Dyggrid’s image file resolution settings are designed to give complete control over which images get loaded into your grid.
Fields
Use srcset
Enable this feature and enter a ‘srcset requested resolutions’ value to let your browser choose the best image to load based on the expected container size of your image and the display scaling in your operating system.. To avoid size popping, Dyggrid will only include uncropped image sources with the same aspect ratio as the original. What file your browser chooses can be a little tricky to understand – there is a good explanation here.
You can supply a comma separated list of sizes for each responsive media queries you have configured in cell sizing. If you enter less than the number of media queries, the last number will be used as the default for the rest.
Use thumbnail
Select this option and choose a ‘thumbnail size’ to specify the exact source file to load. Selecting ‘full’ will load the originally uploaded file at it’s full resolution.
Example
As an example of how these settings can impact your site, the following settings result in a blurry image because the image your browser loads is too small and get’s stretched to fill the container :
If you know the expected image container size (in this case 260px), we can let the browser choose the source to load based on your screens pixel density and the available source sizes. In this example, by using the browser’s inspect tools we can see the medium (480px wide) size was loaded. However note that the image is unexpectedly still blurry.
The reason in this case is because the underlying original is a panorama but we have a 16:9 aspect ratio selected for the container. The image is being stretched to fill the container because there is not enough vertical resolution. When resolving srcset options, browser’s only consider the container’s width requirements, not height.
Normally we would recommend that you do use srcet as it will choose the best image in most situations. However, in this particular case where each image in your grid has a very different aspect ratio, the solution is to select a larger source file to make sure the image is crystal clear:
Your can explore these settings yourself in the following demo:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat […]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat […]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat […]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat […]