responsive-images | Generate responsive images to work with the srcset | Computer Vision library

I have very big images in my assets, which slows down the site by a lot for slower networks. (you can read more about the topic on this lighthouse linked page)

• I would like to compress them at build time (ng build --prod).
• For local development, it is irrelevant (ng serve).
• Optimally I would like to generate multiple versions for different screen sizes (example.jpg → should become: example_x265.jpg, example_x128.jpg, ...)

The most promising guide I have found for that is this one here, which describes how to use the imagemin package in combination with the ngx-build-plus package.

Unfortunately, after following the tutorial, I get the following error:

I used picture element for responsive images in different sizes per viewport a long time. it worked fine, but now I am forced to switch over to responsive with srcset and sizes and I try to rewrite my picture element to the IMG-style.

After long searching I found good documentations at:

https://www.dofactory.com/html/img/sizes and more details at: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

The code with picture was like this:

There are many PHP solutions and WP plugins, they all come with additional options that I don't want/need, i.e. how the converted files are served, where they are stored, etc.

I need none of all that and am after pure simple code using GD. I don't want to use a plugin, thank you.

1. When should the encode happen ? At any time you know it is a good point in the hook routine, could be this https://make.wordpress.org/core/2019/11/05/use-of-the-wp_update_attachment_metadata-filter-as-upload-is-complete-hook/ but if you know better or have another solution then use that and possibly let me know why you choose another hook. I would i.e. also be happy with firing a cron job once new images are uploaded if that is better. Also I don't need to have metadata of the converted images in the WP db, fine with having the original .jpeg files and their metadata in the Media Library, the .webp files are just there to be used inside the picture element.

2. Where should the converted files be stored? wp-content/uploads/ default folder structure, .webp files should be next to .jpeg files all in there.

3. GD image engine should be used for the conversion. https://developer.wordpress.org/reference/classes/wp_image_editor_gd/ Lately I find imagick just crashes or takes ages to do anything. In WP 5.2 things still worked just fine with imagick but there must have been changes introduced that make using imagick in later versions of WP useless. I find GD to me quite stable and fast, it does not matter it creates lossy WebP versions. The methods for the GD image engine from WP do not seem to include conversion/encoding https://developer.wordpress.org/reference/classes/wp_image_editor_gd/#methods so I am also happy with any methods using in the GD module https://www.php.net/manual/en/book.image.php concerning encoding to WebP.

4. To get rid of all the extra unneeded image sizes and options WP introduced over time I have these functions/filters in functions.php.

I'm having a few issues with the Pagespeed API. I'm using CURL to handle the JSON like so:

If Implemented successful the srcset attribute for img tags regarding this question about responsive images in apostrophe. I followed the suggestion to include only img elements and not mutliple img and div's with background-image styles. I used the object-position style to position elements with values from focalPointToBackgroundPosition that works pretty good for focal points.

Unfortunately I was not able to pass the cropping values to the image url's in srcset attribute. I mean the numbers and the end of an image name when the image is shown by the default src attribute with apos.attachments.url helper.

/uploads/attachments/imagename.93.10.1745.873.full.jpg

As far as I understood the code in apostrophe-images/lib/api.js it should be possible because you made this function already available with cropRelationship so I think there is something wrong in my code.

I have some question regarding apostrophes apostrophe-images-widgets and its srcset functionality. It's explained in you Documentation under Responsive Images. I've implemented this solution but i think I misunderstood something becuase the delivered image is still one-half size as background of the parent div focal-point-test.

I mean this:

So the actual img with srcset attribute:

I've improved several image widgets by extending 'apostrophe-images-widgets' directly. That may not be the best practice, but I used this since the beginning I've started to code with apostrophe-cms and It worked good. My slide widget for example only uses this lines in index.js: