Working with Images

Drupal gives you tons of flexibility to create just about anything—and adding images is no different. There are multiple ways to get images onto your website. You can also use the handy Image/Video block for quick adds or add an image using the Insert Media icon in the text editor toolbar within a Beyond Basic Block. Images also boost the visual appeal of more advanced blocks like Card blocks, Banner blocks, or Image with Description blocks. The big question is: under what circumstances would you want to use either option, and why.

Using an Image/Video block versus a Beyond Basics Block.

• If you want to wrap text around an image, or add a caption to an image, use the Beyond Basic Block.
• If neither of these apply, use the Image/Video block.

Tips on working with images and things to consider

• Size the image appropriately before uploading the image on the website. You cannot manually resize images within the text editor once they have been uploaded. A good rule of thumb is to reduce the image size to 800 x 600px. (This also helps to reduce the size of the image to under 1 MB for faster loading speeds). Optimizing images on your website is a best practice for several reasons, but page speed and improved user experience are the two most important ones.
• The image block is a great option if you are still working with the design of a page and need the ability to retain flexibility in your design. While you can still drag a BB block around the screen, it can be more cumbersome once you add text in addition to your image within the beyond basics block – if that is the intention.
• I recommend adding images using both methods until you find what works best consistently with your workflow and final use of images. 

As always, give your work a quick check on mobile devices, not just your desktop, to make sure your creative vision shines just the way you imagined!