Currently, images in project showcases have two separate images that must be created, one for desktop and one for tablet/mobile, which are switched out using useArtDirection() function in Gatsby image plugin.
This is not ideal because it not only requires multiple images in specific sizes to be created, but the image aspect ratio is not correct on mobile/tablet and must be hacked around in CSS. Ideal solution would be to generate new images, maybe using device mockups, and just select a proper resizing/display mechanism so that one image can be used across all devices.
Currently, images in project showcases have two separate images that must be created, one for desktop and one for tablet/mobile, which are switched out using
useArtDirection()function in Gatsby image plugin.This is not ideal because it not only requires multiple images in specific sizes to be created, but the image aspect ratio is not correct on mobile/tablet and must be hacked around in CSS. Ideal solution would be to generate new images, maybe using device mockups, and just select a proper resizing/display mechanism so that one image can be used across all devices.