How to Add Images Correctly in Drupal

You’re ready to start administering your Drupal website, and you realize after uploading an image that it looks okay in your draft, but really… wrong on the published page! Turns out your image was only 110x110 pixels -- only a little bigger than a postage stamp. So how do you add images the right way?

Let’s break this down into two sections:

  1. The right image size
  2. The right way to upload that image into Drupal

The Right Image Size

There’s a general rule of thumb when it comes to images on websites, especially during setup. We want to make sure that the image styles defined cover all screen sizes so we have to know the largest an image can be.

For example, if you’re uploading an image to an About Us page, within the body copy you probably want to make sure you upload an image that will follow the setup of your content layout.

We’re going to do some math...I promise it isn’t hard!

In the graphic below, the maximum width of our page is 1200px wide, so we know based on that, our images don’t have to be any larger than 1200px wide.

We can also see that the two graphics on the screen are 25% of the width, and 50% of the width. We’re probably safe to upload an image for either spot at about 600px wide (to make sure it still looks good on mobile)

If you’re wondering how you’ll know what these numbers are, your developer should be including image hints and text around each image field or telling you what ratio the image should be (when we develop at BackOffice, we provide both! You will always know what size image and what to expect).

The Way to Upload

If you’re a Drupal explorer, like me, you know that under the Content menu you may see the Media option, and this does allow you to upload images.

Depending on what you’re doing you probably won’t be adding images that way, you will be adding images directly onto your pages when you add content.

On our Drupal builds we use the Media Library. The Media Library gives you a fool proof, easy way to upload your images and include your alt text.

You’ll note that in my screenshot there is also an option for Remote Video, this is the beauty of the media manager, it can include any type of media you need for your site! In just a few clicks you’re ready to go.

Please email your support email address with any questions.

Related Blog Posts



Technologies for Nonprofits