The image specifications Style guide serves to provide the required image sizes.
All images have aspect ratios that should be maintained regardless of image px
dimensions.
Aspect Ratio: What it is and why it matters
Optimizing Images for the Web: A Practical Guide
Open DocumentPlease note that images may appear to be slightly cropped because of cropping and re-sizing applied by
CSS
View more details in a modal dialog
The smaller the better (without losing clarity)
One thousand kilobytes (1000 kB) is equal to one megabyte (1 MB)
Content Block Medium Images (2 columns) - Max size 100kB
Content Block Small Images (3 columns) - Max size 50kB
Hero Images - Max size 200kB
Large Article - Max size 150kB
The smaller the better (without losing clarity)
One thousand kilobytes (1000 kB) is equal to one megabyte (1 MB)
Actual image size as fully displayed - 676 x 430 (72dpi)
Image in carousel below may appear to be different in size to above image
because of cropping and re-sizing applied by CSS
Click carousel buttons if carousel display is not correctly rendered
Actual image size as fully displayed - 676 x 350 (72dpi)
Image in feature below may appear to be different in size to above image because of cropping and re-sizing applied by CSS
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In fuga reiciendis, aperiam praesentium ad delectus sunt! Eligendi iure molestias repellendus laborum, neque sapiente nulla ducimus nobis excepturi obcaecati adipisci voluptas.
Button Style Three >Actual image size as fully displayed - 585 x 375 (72dpi)
The image below is 72.4kB
Actual image size as fully displayed - 676 x 350 (72dpi)
Images in cards below may appear to be different in size to above image because of cropping and re-sizing applied by CSS
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In fuga reiciendis, aperiam praesentium ad delectus sunt! Eligendi iure molestias repellendus laborum, neque sapiente nulla ducimus nobis excepturi obcaecati adipisci voluptas.
Button Style Three
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In fuga reiciendis, aperiam praesentium ad delectus sunt! Eligendi iure molestias repellendus laborum, neque sapiente nulla ducimus nobis excepturi obcaecati adipisci voluptas.
Button Style Three
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In fuga reiciendis, aperiam praesentium ad delectus sunt! Eligendi iure molestias repellendus laborum, neque sapiente nulla ducimus nobis excepturi obcaecati adipisci voluptas.
Button Style ThreeActual image size as fully displayed - 380 x 210 (72dpi)
The image below is 22.1kB
Actual image size as fully displayed - 1470 x 600 (72dpi)
This image is 268kB
Image in feature below may appear to be different in size to actual banner image because of cropping and re-sizing applied by CSS
Actual image size - 980 x 551 (72dpi)
This image is 56.7kB
Image in Article Detail
This kit contains everything you'd need to respond to a roadside emergency, from a 10-foot, eight-gauge booster cable set to a first aid kit. An emergency warning triangle and an LED flashlight will keep you safe if you find yourself waiting for roadside assistance.Actual image size as fully displayed - 380 x 200 (72dpi)
Image in List Module Feature below may appear to be different in size to above image because of cropping and re-sizing applied by CSS
It is a long established fact that a reader will be distracted by the the lorem ipsum dummy copy. Dummy copy displays here.
Button Style Three
It is a long established fact that a reader will be distracted by the the lorem ipsum dummy copy. Dummy copy displays here.
Button Style Three
It is a long established fact that a reader will be distracted by the the lorem ipsum dummy copy. Dummy copy displays here.
Button Style ThreeActual image size as fully displayed - 300 x 200 (72dpi)
Image in Sidebar CTA Content below may appear to be different in size to above image because of cropping and re-sizing applied by CSS
Tool bar style three allows for copy, image, and call to action as components. Tool bar style three allows for copy, image.
Button Two >Actual image size as fully displayed - 676 x 350 (72dpi)
Images in the Support Module below may appear to be different in size to above image because of cropping and re-sizing applied by CSS
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In fuga reiciendis, aperiam praesentium ad delectus sunt! Eligendi iure molestias repellendus laborum, neque sapiente nulla ducimus nobis excepturi obcaecati adipisci voluptas.
Button Style Three
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In fuga reiciendis, aperiam praesentium ad delectus sunt! Eligendi iure molestias repellendus laborum, neque sapiente nulla ducimus nobis excepturi obcaecati adipisci voluptas.
Button Style Three