Better quality images on your Drupal website | When using Insert module

(Available as freelancer)

Joris Snoek

Business Consultant
/ Drupal Developer

The Drupal Insert module is a convenient module to easily place images in content, without hassling around with a WYSIWYG editor. It is rightly a popular Drupal module (nearly 80,000 active installs). We are also using it in our blogs; in combination with Markdown you can easily and quickly format content.

How Insert works in a nutshell:

1. Upload an image in an Image field, select the desired image style and click ‘Insert’.
2. The required tag is automatically inserted in the place of the cursor in the text.

Now you don’t need to fiddle around anymore with WYSIWYG editors that most of the time don’t do what you want anyway. Also useful is that the Insert module can scale images automatically in accordance with a defined image style in Drupal.

Quality images not optimal

The only problem is that the images are not looking good. The quality of the scaled images can be set in Drupal (Administration > Configuration > Media > Image toolkit), but I noticed they are never really good enough. Also because you have to deal with many different kinds and sizes of screens of visitors: you would like everybody to see a nice image (mobile, tablet, desktop, retina etc).

Solution for better quality images

This can be solved as follows: don't use an Image preset, but let Insert place the original image. Then make sure a css class is automatically given, which ensures the responsiveness of the image – this class is depending on the css you use. In our case this is ‘img-responsive’, since we are using the bootstrap html framework.

The Insert module setting of the relevant Image field will look like this:

(In our case it is under the link /admin/structure/types/manage/blog/fields/field_blog_images)

Directly place the original image, but make sure you upload an optimal quality/file size. A too large file is not beneficial to your Drupal SEO. First, I always resize the image in Photoshop to a maximum of 1280 px wide, as to be prepared for large and high resolution screens in future.

This will lead to an image that scales with all screens and that is nicely displayed.

Result

Look at the difference in quality of images between this blog and the Dutch translation hereof. The difference is clearly visible in the image under ‘3. Group activity stream’.

Wrap up

That’s all folks, questions or feedback? Let me know.

Credits header photo: Andrew Coelho