“Why You Should Avoid Optimizing Your Images Prior to Uploading Them to Your Drupal Site”, this could have been a possible subheading for this post here! It will just lead to “excessive optimization” and to some blurry or over-sized images (and you definitely don't want that). Especially with a CMS like Drupal, equipped with all the right tools to handle all the image optimization for you, during the upload, it would be a pity not to “lay back and let it do the work for you”, right? Now let's get into details! Let's see which are the best practices when uploading images to your Drupal site and what “handling images in Drupal differently” really means:
There! You're finally “reached” perfection in optimizing your image! You've got it ideally compressed, its quality is just perfect, you're now ready to upload your “state-of-the-art” image to your Drupal site.And here's where the “nightmare” begins! It looks like Drupal's got it compressed once again and over-optimized it and... ruined your “work of art” It's nothing but a blurry mess now.”
Does this scenario sound (way too) familiar to you?
Well, it wasn't really my intention to bring back sad memories, you know. In fact, this post is about pointing out to you the real “culprit” in this story: you optimizing your image before you uploaded it to your Drupal website.
Moreover, I'll also highlight which are the best practices when working with images in Drupal. So, let's get started!
1. Let's Imagine a Scenario You Should Avoid in Real-Life
Here you are, ready to upload your image to you website!
You've already optimized it to your liking in Photoshop: you've turned it into the perfect balance between quality and size.
Moreover, let's assume that you're not happy with the default image style of the category on your site that you'd like to upload your new image on. Obviously, you rush in to create a brand new image style:
Administration/Configuration/Media/Image Styles
There, you'll be ignoring the default image style that Drupal already puts at your disposal and replace it with a new style. Click the “Add Style” link and select, from your drop down menu, the image style effects that you want Drupal to add. Next set your weight and height in the next window that pops up and voila: the selected image style effects will have been applied to your image!
You still need to handle the image display field now, making sure that your new image style gets applied to all the images from the chosen category on your website:
Administration/Structure/Content Types/Article/Display
(assuming, in this case, that it's your blog image's style that you want to predefine)
Now a more than legitimate question that might pop up in your mind would be: “Why should I even bother with Image Styles when I could simply upload my images and use a rich editor instead?”
I have two answers for you:
- because Image styles is such a handy tool for predefining a set of actions be performed automatically on your images (all those corresponding to the content type you will have selected) as they're being uploading to your Drupal site; it “spoils” you with a whole collection of image style effects to pick from: crop, resize, rotate, desaturate etc.)
- because Drupal is all about “streamlining” the editorial experience; the content editor can therefore just predefine the desired image style effects and to automatically streamline the whole image optimization process once new images get uploaded on the same category on the website.
In other words: Image Styles is a “guarantee” of consistency in the way content gets displayed throughout your Drupal site
And now the result of our imagined “scenario” here: a blurry image uploaded to your Drupal website!
Choosing to upload an already optimized image, that Drupal automatically will have optimized once more durring the upload, turns out to be a bad choice! Therefore, not the best way of working with images in Drupal!
2. How Drupal Image Toolkit Works + A Mistake to Avoid
What Image Toolkit does is optimizing the images you will have already uploaded to your Drupal website.
You'll find it if you go to:
Administration/Configuration/Media/Image Toolkit
And now comes the tricky part:
- If in the toolkit window popping up you have the image quality set to 70% and you go ahead and upload your image already optimized in Photoshop, you'll get an “excessively” optimized image. It will have been already been optimized in Photoshop in the first place, then once more in Image toolkit. The result: a, overly optimized blurry “mess”.
- If you set the image quality in your toolkit window to 100%, let's say, then what you'll get will be: an image featuring the proper quality that you will have already set it up to in Photoshop, but with an increased size instead.
Which one of these two “unwanted” scenarios would you go for? If any...
3. In Conclusion: Best Practices In Handling Images in Drupal
As stated in the introductory paragraph: the best way to handle images in Drual is to simply let it “do its work”.
Drupal's already been equipped with image optimization tools aimed at taking this burden off your shoulders and, moreover, at ensuring content consistency throughout your site.
Therefore, instead of striving to optimize and to comprise your images in Photoshop, you should upload them as such, at full quality. To rely on Image Styles and Image Toolkit for instant optimization during the upload.
See? This is what you've probably been doing wrong when you handled your images in Drupal! You've been putting too much effort in comprising and ideally optimizing your images prior to their upload to your site.
And all this just lead to “double optimization” and ultimately to... blurry messes or images which came uncompressed, as if “bewitched”, once uploaded to your site!
Have you been having these problems when uploading images in Drupal? If you so, feel free to share, in the comments below, your own ways of solving them!