Working with Images in DrupalPosted: April 23, 2013 under Drupal
Working with images is a bit different on a Drupal website. Most of the differences make it much easier to use images consistently across a site, particularly once you turn things over to non-technical content editors. But there are a few things to watch out for that can really throw a wrench into things.
For example, most web designers are in the habit of optimizing images before adding them to a site. Using Photoshop or a tool like Smush.it is standard operating procedure. In this tutorial we're going to take look at why that may not be the best practice when working with Drupal. We'll also go over using the image toolkit, creating image styles and using styles with the IMCE module.
Here's the Set Up
As with many things Drupal, there are several moving parts involved and so we'll step through them one at a time in this example. We're going to begin by doing something I think is fairly typical for someone not familiar with Drupal - add an already optimized image to our site - and take a look at the results.
Our example scenario is this - we're working with Friendly Machine's Foundation theme (available for free) and let's say we aren't happy with the default blog post image style. It would make sense to just edit that style, but it wouldn't make as good a tutorial, so we're going to create a new image style from scratch.
The first thing we'll do is head over to:
There you should see the screen shown in the image below:
Image styles are a very useful tool in Drupal. You can use them to create a predefined set of actions to be performed on images during the upload process. This helps make sure they conform to a particular editorial style and keeps things consistent throughout your site. The most common image style effects are resize and crop, but you can also desaturate images, rotate them and more. It's very useful.
You'll see that we have a style already configured called blog_post. We won't look at those settings, but I'll mention that style is set to automatically resize and crop images to 785 x 330 pixels. It also has the adaptive image style applied, but we'll skip that in this example for the sake of simplicity.
We'll replace blog_post with a style that has slightly different dimensions - 785 x 400 pixels. Not a big change, but it will alter the aspect ratio enough so that it will render better on a mobile, something we may reasonably want to do.
Begin by clicking the "Add style" link. The first thing you'll be prompted for is the image style name. I'm going to get really creative and call this style blog_post_2. On the next screen add the scale and crop effect using the drop down.
After saving you'll be directed to a second screen where you'll be prompted to add the desired height and width for the final image. Once you've saved those settings, you should see that your effect has been successfully applied as in the image below.
Now that we have our image style created, we need to apply it whenever a new blog image is uploaded. This means we'll have to edit the article content type, specifically the image field display. We can manage the display of this field by going to:
You should see something similar to the screen below.
Now a good question pops up here - why is it that we use these image styles? Can't we just add our images using a rich text editor?
Well, we could, but as I mentioned earlier, by defining the image as a field it allows us to have more editorial control over content so that it is presented consistently across the site. We'll look at using image styles with a rich text editor in bit. For now, click the little gear button to the right of the text that reads, "Image style: blog_post".
You'll see an edit form load with a drop down for our image styles. Let's select our new style blog_post_2 and then save.
OK, now when we add a new image to a blog post, this style will be automatically applied. Let's test it out.
You can add a new blog post by clicking the "Add content" menu item and then select the Article content type. I'm going to use some filler text in this example, but remember that the image we're using has already been optimized for the web using Photoshop. Let's take a look at what we end up with in the screenshot below.
We see the image is quite blurry with pixelation especially noticeable in the area of the sky. Also, we should note that the original size of the image we uploaded was 45 KB, but the new file is 37.19 KB. Smaller files are usually a good thing, but not when it reduces image quality so much that we lose focus.
What's going on here?
The Image Toolkit
Drupal supports the GD image toolkit which is used to optimize images uploaded to your site. The settings page for the toolkit is located at:
As you can see, it's a very simple form.
In the case of Foundation, the image quality is set to 70% in the toolkit, so by uploading an already optimized image, we ended up with an image that was blurry due to it being double optimized - once in Photoshop and again when we uploaded it to the site.
Now what if we had the toolkit JPEG quality set to 100% when we uploaded our image? In that case the image would look as it did when we saved it from Photoshop, but the file size would have actually increased. That's not what we want at all!
Best Practice for Drupal Images
The best way to handle images on your Drupal site is to upload them at full quality and let the Image toolkit and Image styles do the work for you. Of course you can do some basic editing. For example, you can get the images set at an optimal aspect ratio so you don't have to worry about them being cropped in a weird way, but don't compress them.
I'll try uploading my image again, this time without optimizing in Photoshop, and see if I get better results. Here's what we end up with:
The image above is definitely crisper. This time the file I uploaded was 349 KB in size, but after Drupal's Image toolkit optimized it, the file size was only 37.21 KB. That's pretty impressive!
If we wanted to have an even crisper image, we could go into the toolkit and bump the number from the current 70% to perhaps 75 or 80%. Unless you know your audience it going to have high speed connections, you wouldn't want to set it to 100% - you'd end up with some really huge pages that would be no fun at all for mobile users.
Using IMCE for Text Editor Image Styles
Most of the time you'll want to have some editorial styles set for images used in the body of your content. This is where the IMCE module comes in. With Foundation, we've already defined a style we can use in the body of our content, this time using the IMCE configuration settings which you can view here:
One thing to note is that IMCE has the ability to define multiple profiles that you can assign to different roles. In this example we're just going to use the default for user-1, but you would probably create different profiles for other roles if you wanted to restrict the types of things those users could do - creating new folders or deleting files, for example.
Take a look at the screenshot below and note the style "Post body image".
Let's see how this style is used when adding an image to the body of our content. We'll go to the same post we were working with before, only this time we're going to insert the image directly into the body of our content and use IMCE to optimize it.
You'll notice in the area highlighted in green that I've checked the "Post body image" style. Not only will the original image be uploaded, but an additional optimized image will be created that uses the style we defined in the IMCE settings.
You'll see in the screenshot above that the image has been inserted into our post. We were careful to select the optimized version that had the prefix post_ (which was set on the IMCE config page). Instead of the image being the 349 KB original that we uploaded, it has been reduced to a mere 17.17 KB.
A very common rookie mistake is to upload large images and then just change the height and width to make them fit the content. Don't do this! It doesn't have any effect on the actual file size and ends up making your pages unnecessarily bloated and not very friendly to your users with slower Internet connections.
Better Editorial Control with Image Styles
Using Drupal's built-in tools can help enormously by providing automatic editorial control for images. It's true that inexperienced content editors could still use IMCE to insert some problematic images, and if that's the situation you're facing, there are some alternatives.
One option is to disable the image button under the Wysiwyg profile and then add a module like Field Injector that allows you to insert an image field into a set location of the content body. You might also try the Insert module, which is also very useful for handling images.
As usual, Drupal provides multiple ways of solving a common site building challenge. Play around a bit and find the one that works best for your site.