A Picture is Worth a Thousand Words, A Featured Image Needs to Be the Right Size

So we all know that a lot of communication is visual (and thanks to Dr. Merhabian, we know it’s 93% visual) so it makes sense that the photos on your site need to be right.  You need to make sure you’re using the right type of image (.jpb vs .png  vs .svg vs .bmp) and that the file size is not too big (slow load times = no bueno) and you need to make sure you’re offering an alternative image for different screen sizes.

Since people can look at your page with the image on it on various sized devices, you need to test it out and see how that picture of your dog wearing a scarf and sunglasses, or that burly worker restoring a brick wall, will look on a phone.  If you don’t write some css specifying a different photo for that different screen size, your site will not come across as as well-made as you intend.

Lauralee Flores has some great overall tips.

Sally wants us to remember to choose an image with the subject at the center.  Then, no matter the size of the screen showing the image, the most important part of the photo is going to be shown.

“This is the simplest and least expensive way to ensure that your hero image works across multiple screen sizes–least expensive, because your designer only has to produce one crop of the image and your developer only has to code one set of media queries.”

Her second, more comprehensive but more tedious suggestion, is to go the “art direction” route, select different crops of an image for different screen sizes and/or orientations. ;

“The up side of art direction for your hero images is much greater control. The down side is that someone has to generate those different versions of your hero image and then code them.“

In Beaver Builder you’ll need to upload the mobile image (or mobile and tablet images), add a css class to the module in question and then add this css snippet to the Tools > Layout CSS and Javascript section of that page.  You can add the css site wide in Customizer, but you’ll need a different bit of code for each page so I’d do it on each page.   But please tell me you think that’s too clunky, I appreciate feedback!

In Divi, say what you will about their shortcode clutter, but they handle this stuff for you a lot easier.  I will explore that in a later edit to this post.