I am new to WordPress, and I started with my own custom theme.
For responsive images in WordPress, I currently use custom html blocks in my theme with picture or img elements that use multiple uploaded images I have custom cropped and compressed to support different resolutions and media sizes (for picture elements with source elements) with x descriptors for srcsets. I have currently disabled WordPress from automatically creating multiple image sizes when uploading an image. It's a lot of work, but I get exactly what I want. I don’t like using srcset with w descriptors and sizes inside img elements since mobile devices with high device pixel ratios (e.g., 3x, 4x) will always request larger image sizes than what I would like to serve them.
I've spent a lot of time online researching solutions on how to implement WordPress responsive images, but haven't found anything really helpful. Some articles suggest uploading your largest image that you have custom cropped and compressed and adding custom image sizes to WordPress’ functions.php file, which will allow WordPress to generate other image sizes for you. However, I do not want WordPress to automatically make every single different image size when I upload one image file. WordPress’ image block also uses w descriptors and sizes, which I am not in favor of using.
If I have to use WordPress’ image block, is there a way to customize srcset with w descriptors and sizes within the image block itself?
I would also like to know if you can group individual .jpg images that I have custom cropped and compressed as a single attachment in WordPress' database when uploading? Is there a hook or are there multiple hooks I can use to accomplish this or is this not possible with WordPress?
Could someone make a suggestion or point me to an article or discussion for a better responsive image solution in WordPress?