For each test, drag the edge of your screen so the page is narrower, and note how the logo displays in different screen widths.
TEST 1.
Responsive banner images from volunteer.hoiunitedway.org
1.a Desktop image 1600×300 with logo 260×202. Logo in this image displays very small as the screen narrows.
1.c Uses both images with coding similar to the volunteer site to swap images when the page width is less than 992 (small image displays) and 993 and wider (large image displays.)
TEST 2.
Our dimension test images
2.a Desktop image 1600×300. Logo in this image displays very small as the screen narrows.
2.b Mobile image 960×360. Logo in this image remains legible.
2.c Uses both images with coding similar to the volunteer site to swap images when the page width is less than 992 (small image displays) and 993 and wider (large image displays.)
TEST 3.
Our new banner images
3.a Desktop image 1600×800, logo size 262×202. Logo in this image displays very small as the screen narrows.
3.c Uses both images with coding similar to the volunteer site to swap images when the page width is less than 992 (small image displays) and 993 and wider (large image displays.)
Note that the logo displays very small even when the large image is replaced by the small image when you make the page narrower.
TEST 4.
Our new banner images, edited to have different aspect ratios for the image but same size logos.
4.a Desktop image 1600×400, logo size same as small image.
4.c Uses both images with coding similar to the volunteer site to swap images when the page width is less than 992 (small image displays) and 993 and wider (large image displays.)