Any benefits over srcset?

Hello, my friend,

Indeed what the plugin does is not very easy to explain in few words and I understand that the description can sometimes be confusing. Here we go:

– does this plugin provide any extra benefits over using images with srcset attribute?

If you implement the src attribute fully and correctly, ie you know all your breakpoints, you have all relevant sizes of your images per per breakpoint and you can actually set the src attribute of every image in your HTML, then the Adaptive Images plugin might not have much to offer!

However, these are exactly the same reasons why you would use the Adaptive Images plugin! Because you cannot handle all these parameters by hand and throughout the whole of your website easily. The goal of the Adaptive Images plugin is to provide a uniform way of simply not caring about these parameters.

– will it override image size provided by srcset attribute?

No it won’t. It will not touch your HtML at all, apart from a very particular case (CDN support, still an experimental mode) where it will add a url GET parameter on the src of an image. Other than that nothing else!

– also how it behaves when images are cropped for mobile? E.g. Revolution Slider.

Actually this is one of the cases where the Adaptive Images plugin really shines. Because it will filter and resize all your images, even the ones that have not been taken care of initially. It’s not that it detects anything magical. It just filters all image requests and, if an images is bigger than the device screen and according to the plugin’s settings, then it downsizes it.

Hope this helps!

Cheers,
Takis

Great. Thanks for quick and detailed answer. Sorry but I have a few more questions:
– do I understand correctly that after installing your plugin I can disable thumbnail creation on image upload and delete most of thumbnails already created. Anyway these images won’t be used most probably. Maybe it makes sense to still generate smaller size for media library
– if plugin can’t detect device viewport will it provide original image or those specified by srcset (of course if that size if thumbnail already exist)
– I can’t get the idea of using breakpoints if plugin is supposed to deliver images of exact needed size. Breakpoints are used for delivering the closest image defined by srcset. But this solution still needs some css scaling. If I understand the idea of your plugin correctly it resizes images to the exact dimension of viewport, so I don’t understand why breakpoints needed
– is there a way to disable plugin for bigger resolutions as I want to use image zoom functionality on desktop?

Hello, no worries, here are my answers:

– do I understand correctly that after installing your plugin I can disable thumbnail creation on image upload and delete most of thumbnails already created. Anyway these images won’t be used most probably

If I understand this correctly, then I would generally advise that you let your theme and plugins choose the thumbnail sizes they need. You might need them in the future, if you ever choose to disable the Adaptive Images plugin and they even might use the thumbnail sizes in places that we cannot predict right now. So best is to let each tool do its job and hope that it does it transparently and independently. I can vouch that the Adaptive Images plugin will do that at least!

– if plugin can’t detect device viewport will it provide original image or those specified by srcset (of course if that size if thumbnail already exist)

In this case the Adaptive Images plugin will serve the original image requested. This could be the full image or any other thumbnail size depending on the case.

– I can’t get the idea of using breakpoints if plugin is supposed to deliver images of exact needed size. Breakpoints are used for delivering the closest image defined by srcset. But this solution still needs some css scaling. If I understand the idea of your plugin correctly it resizes images to the exact dimension of viewport, so I don’t understand why breakpoints needed

Actuall, no, the Adaptive Images plugin does not serve images exactly to the size of any device. It has a bunch of settings to actually help you set some breakpoints and then it will try to deliver images as close to these breakpoints. Otherwise it would be created tons of useless images.

– is there a way to disable plugin for bigger resolutions as I want to use image zoom functionality on desktop?

Actually you control this via the breakpoint settings of the Adaptive Images plugin that I mentioned above. For instance, if you have a maximum breakpoint of 1024px then all screens above that will ultimately be served with the original image requested at each time. So big devices will get bigger resolutions. This is something for you to decide upon and control. And it doesn’t have to be final. It is a setting and it can be changed at will!

Cheers,
Takis

Looks like I finally understood how your plugin works ??
I found your plugin while searching for solution to WP media library mess caused by the way how it creates all the thumbnails on upload – completely unneeded waste of disk space. That’s why I want to disable creation of thumbnails and use your plugin instead. If one day I will have to switch back I will regenerate thumbnails easily, so there’s no need to keep them apart smallest thumbnail size which is used in media library on backend. Do I miss something?

By the way if I don’t set any breakpoints at all will the plugin serve images of exact needed size which do not need css scaling?

Here are some considerations upon what can be improved:
– if you choose to keep thumbnails created by WordPress and your theme you already have most probably more than half of images you will ever need. There are already standard WP medium-large (768px) and large (1024px) thumbnails which can be used for popular breakpoints. But your plugin has it’s own image storage, which will cause unneeded creation of images resulting in slow load when image is requested for the first time and extra usage of disk space. Maybe these images should be kept together? Or at least such an option should exist?
– also would be nice to have an option to disable the plugin for images which have srcset attribute
– having webp support would be great

• This reply was modified 5 years, 5 months ago by titsmaker.

Hello, my friend,

I found your plugin while searching for solution to WP media library mess caused by the way how it creates all the thumbnails on upload – completely unneeded waste of disk space. That’s why I want to disable creation of thumbnails and use your plugin instead. If one day I will have to switch back I will regenerate thumbnails easily, so there’s no need to keep them apart smallest thumbnail size which is used in media library on backend. Do I miss something?

To be honest I do not find the existence of many thumbnails too problematic. That is if they are not too many! If the theme treats the thumbnails respectfully and does not set more than 3-4 or of them, then I usually do not see any problems even in high-traffic content-intensive news websites.

Actually the size of the original images is usually so much bigger than the size of the thumbnails (thumbnails should be no more than a fraction of the total) that I tend to worry more about the original images. I have seen numerous websites using PNGs where they are not necessary or huge JPEGs where it is not needed.

Indeed someone might run into a problem in a hosting where many file reach the limits of the systems inodes, etc, but at this scale we are probably talking about a website with greater (than the usual) needs, so a dedicated hosting would be appropriate there.

By the way if I don’t set any breakpoints at all will the plugin serve images of exact needed size which do not need css scaling?

If you do not set any breakpoints (and in this case you do not need the plugin after all) the plugin will serve the image requested by the browser, whichever that may be depending on the src or srcset of the image element. CSS would only scale an image for the eyes of the user.

– if you choose to keep thumbnails created by WordPress and your theme you already have most probably more than half of images you will ever need. There are already standard WP medium-large (768px) and large (1024px) thumbnails which can be used for popular breakpoints. But your plugin has it’s own image storage, which will cause unneeded creation of images resulting in slow load when image is requested for the first time and extra usage of disk space. Maybe these images should be kept together? Or at least such an option should exist?

We have made a design decision here to keep things separated for reasons of transparency, separation of concerns and uniformity. We thought it would be best to not mix what the Adaptive Images plugin does with what the rest of the WordPress does. The theme might change, the plugins might change, we did not want to count on such things. There is a small redundancy here, I agree, but it is only a small fraction of the total in the end.

Also, the Adaptive Images plugin creates resized versions of images only when and if it is necessary, so it turns out that even less files are created!

As far as the load is concerned, there is absolutely no extra load on the website, other than the small overhead of creating the resized images the first time they are requested (and that is if and when they are requested at all). Practice has shown that this load is generally quite acceptable and even unnoticeable.

– also would be nice to have an option to disable the plugin for images which have srcset attribute

This is technically too complex and actually goes against the transparency and uniformity principle of the Adaptive Images plugin. We do not want to neither touch or be dependent on the website’s HTML. We just want to filter image requests.

– having webp support would be great

Indeed it would and it is in our roadmap already!

Cheers,
Takis

Hi your plugin works as it should, this is great. But I am having troubles with slider – on mobile it is heavily cropped, but the image is resized without taking this cropping into account which leads to very low res image. Image resized to around 400px for mobile is cropped leaving us with maybe 100px image…

Hello, my friend,

I think I understand what you are saying, but the Adaptive Images plugin does not crop images. It only resizes them keeping their original aspect ratio. So I believe what you are describing is more a CSS and/or layout related issue.

Could you show me an example perhaps?

Cheers,
Takis

Actually we have to blame Slider Revolution but I hardly believe they will ever change the way how their plugin works.
The thing is they serve the same image for all devices. So even the tiniest mobile gonna receive full size image (2560px wide in my case). But in options you set crop area for each device size and image is shown soft cropped. So your plugin resize the image according to viewport and then the image is soft cropped be Slider Revolution which leads to very low resolution, something like 100px wide.

I am making some further testing of plugin. And want to ask – do I understand correctly that plugin will always serve 100vw images regardless of how much space image occupies on screen and it’s container size? So in case of good implementation of srcset/size it is possible to achieve better results due to smaller images being served in sizes corresponding to their relative width?

Hello, my friend,

I am not sure I understand the last question totally, but the Adaptive Images plugin will serve an image at the size of the closest breakpoint, choosing from the breakpoints in its settings.

For instance if the breakpoints are set as “480, 768, 1024” and a device of 320px width asks for an image then the plugin will send the image resized to 480px, because this is the available breakpoint that is closer to the device width. (There is also an option in the plugin settings page to take into account the device height, called “Bigger dimension”.)

If the breakpoints are set as “800, 1600” and a device of 320px width asks for an image then the plugin will send the image resized to 480px, because this is the available breakpoint that is closer to the device width.

Edge case: if the original image is too small for the selected breakpoint then (there is not much we can do) the plugin sends the original image itself!

Hope this helps! ??

Cheers,
Takis