Optimize default images

Working on it.

Hi @greg-boggs,

I've tried to reproduce this by following the steps you have mentioned, but I didn't get the images of large sizes.
I think, as this issue 🐛 An image in latest content loads an extremely large image Active is fixed so the problem is solved now.

If something is left please do let me know.

Thanks,
Arun

Drupal CMS has been improved to use webp when displaying images. However, some of the source images are still using the wrong file type and some of them are much too large. This file should be under 200kb, instead it's 1.2 MB.

https://git.drupalcode.org/project/drupal_cms_events/-/blob/1.0.x/conten...

The reason to update these correctly is so when someone uses one of the provided images outside of the provided views, it doesn't give them a really slow website.

Ok @greg-boggs, I understood.

It would be very helpful if could you pls tell me the approach we can follow here, as I was thinking to update createDerivative method in Image module but we can't do this here as it is Drupal cms not core.

Yep. The process is to use Photoshop, then use the "save for web" interface to save png files as jpg files. Then to resave any large jpg files at a good compression amount. The amount of compression varies per photo and is a bit subjective, but it's usually between 40 and 60% quality. You have to manually review the image to make sure it looks good and is not pixelated by the compression.

I'm not sure I agree that altering the source image should be the path here. Shouldn't the image tools creative derivative images create the most optimized images? I haven't had a Photoshop license since Photoshop 3. I also encourage our clients to upload large source image to future proof their content.

Large files are good. Ideal even. Most of the provided images with CMS are too small. But, I think that's a separate issue.

Large file still should be saved with the correct image type and compression settings. As far as I know, none of the other image programs save images as well as Photoshop. The last time I tried with GIMP, it gave me an image twice the size that it should be. I do think Google provides a tool to save images directly as WebP which could be a reasonable solution as well.

What we don't want is large source image files that are 10x larger than they need to be for the quality they have because we used the incorrect settings when saving the image in photoshop.

I have no objection to optimising the actual files. @greg boggs would you be able to provide them? I don't have Photoshop :)

Here's some good news for our morning. Gimp 2.10 does a great job at exporting to webp.

My eyesight isn't the best, so I am not the best person to make our images because I can't see the compression artifacts. I think if we save at 75% compression in webp with Gimp, we're good to go. Drupal.org doesn't allow upload of webp images so sharing them is difficult. I'll need to open an MR later.

Hi @greg-boggs,

I've compressed the image and converted it into webp and now it is around 82kb.
The drupal file uploader doesn't allow me share it in the comment section as it doesn't support .webp format.
So how can I share the image could you pls tell.

I actually don't know the process to contribute to drupal cms yet because the code is in two repositories. I think you'll want to open a merge request on this issue's fork, with the "get push access" button above. Once you have that you can update the file and propose a merge.

https://git.drupalcode.org/issue/drupal_cms-3502035/-/blob/1.x/recipes/d...

the code is in two repositories

Not to derail this issue, but can you elaborate on this?? There's only one repository for Drupal CMS (this project that we're posting in right now). Which two repositories are you referring to?

Opened MR and added the file, pls check.

The images need to have their original file name remain the same as they are referenced from default content config entities. If the images file names (and/or extensions) are renamed, then the content entity that references them needs to be updated also.

This MR also has only one image updated. The issue summary mentions "images", but did not provide detail. Running the following command in the recipes folder reveals the following images:

find "$PWD" -type f | grep -Ei '\.(jpg|jpeg|png|gif|bmp|tiff)$'

/recipes/drupal_cms_events/content/file/DrupalCon-Atlanta.png
/recipes/drupal_cms_news/content/file/unsplash_John_Schnobrich.png
/recipes/drupal_cms_case_study/content/file/Government-building-EU-flag-credit-pexels-gintare-kairaityte-11923111-17178100.jpg
/recipes/drupal_cms_case_study/content/file/drupal-cms-logo.png
/recipes/drupal_cms_person/content/file/unsplash_Leilani_Angel.png
/recipes/drupal_cms_blog/content/file/DrupalCon-Barcelona-2024 - credit-Bram-Driesen.jpg
/recipes/drupal_cms_project/content/file/pexels-israel-franca-1108173-2101030.jpg
/recipes/drupal_cms_project/content/file/drupal-cms-logo.png
/recipes/drupal_cms_starter/content/file/drupal-cms-hero.png

Moving to Needs work.

I've updated all the images mentioned above except the logo because its already small in size (13kb), also I've updated the configuration of respective images, but the pipeline is failing due to these changes so could you pls check the changes and pipeline.

All images were changed to webp except for:

/recipes/drupal_cms_case_study/content/file/drupal-cms-logo.png
/recipes/drupal_cms_project/content/file/drupal-cms-logo.png

The test failure was unrelated, all green now. Moving to RTBC, thanks for your contribution!

Looks good to me! Never occurred to me to ship as webp since they get converted in image styles but no harm in doing so.

Merged into 1.x, thanks! Not backporting this one, out of an abundance of caution and since 1.1.0 is going to be released this week.

The images look great!

When I mentioned the secondary repository, here's the other file I wasn't sure on the process of updating:

https://git.drupalcode.org/project/drupal_cms_events/-/blob/1.0.x/conten...

~G

Automatically closed - issue fixed for 2 weeks with no activity.