Back to top

Display Grids & Image File Size Reduction using Drupal Image Styles

LogsLong Story Short:
Large photos get reduced in size to conform to the Style Guide and to reduce network bandwidth during page display.

The Full Story In Detail:

During the content creation process Image derivatives are created for both Mobile and Desktop displays. The HTML5 <picture> tag is used within the display views to call a properly sized image. Smaller files are called for mobile, larger for Desktop. Google search will rank a site higher if it's speeds are optimized for mobile content delivery.

ORIGINAL:
/sites/snowmaid.com/sample.jpg 1,314px × 876px
954.6 KB

WIDTH @100%
/sites/snowmaid.com/files/styles/99/public/sample.jpg 1,200px × 800px
157.03 KB

WIDTH @75%
/sites/snowmaid.com/files/styles/74/public/sample.jpg 900px × 600px
96.47 KB

WIDTH @50%
/sites/snowmaid.com/files/styles/49/public/sample.jpg 600px × 400px
46.25 KB

WIDTH @25%
/sites/snowmaid.com/files/styles/24/public/sample.jpg 300px × 200px
13.25 KB

Image styles needed for the Page Grid display
100% -> Scales to 1200px
75% -> Scales to 900px
50% -> Scales to 600px
25% -> Scales to 300px

Display Width "Token Rewrite"
Within the content display View, a small portion of the full file path is "Rewritten." This "rewrite" redirects the file path of an image to an image with the proper file size and proportions.


The [field_content_width] is replaced, this will cause the properly sized image to load.

img src="https://snowmaid.com/sites/snowmaid.com/files/styles/[field_content_width]/public/[filename]"