Title: How does it work vs. srcset?
Last modified: October 25, 2023
---
# How does it work vs. srcset?
* Resolved [featuremonkey](https://wordpress.org/support/users/featuremonkey/)
* (@featuremonkey)
* [2 years, 7 months ago](https://wordpress.org/support/topic/how-does-it-work-vs-srcset/)
* Using srcset involves the creation of multiple resized images (such as [WordPress thumbnails](https://www.wpbeginner.com/wp-tutorials/how-to-create-additional-image-sizes-in-wordpress/)),
then using media query to load image according to device.
* **Adaptive Images** is theorized to read screen size of user, then serve image
accordingly. **So how does this plugin implement that?**
* Some background information:
- [https://wordpress.org/support/topic/plugin-did-not-work-it-did-not-cache-any-image/](https://wordpress.org/support/topic/plugin-did-not-work-it-did-not-cache-any-image/)
indicates that the plugin’s resizing and compression runs from origin server.
- [https://wordpress.org/support/topic/adaptive-images-dont-appear-to-be-rendering/](https://wordpress.org/support/topic/adaptive-images-dont-appear-to-be-rendering/)
indicates that the detection of user screen size happens from origin server.
- [https://www.php.net/manual/en/book.image.php](https://www.php.net/manual/en/book.image.php)
requirement indicates origin server uses get_image_size to get image size
from server-side PHP execution rather than frontend JS execution. So, request
in order of user -> origin web server -> php -> html -> user. This order is
why plugin “doesn’t work” on CDN, because that would be user -> cdn -> html-
> user, but html doesn’t call to origin web server to run php.
- [https://wordpress.org/support/topic/taking-care-of-all-the-thumbnail-generation/](https://wordpress.org/support/topic/taking-care-of-all-the-thumbnail-generation/)
indicates that images are “only created if and when they are requested by
devices with relevant screen sizes and based on the **breakpoints **set in
its settings”. So, images only resized if loaded by user and then it creates
images at the size of given breakpoint and stores that in the cache. So, images
might end up taking time on new requests.
* So, if you are using breakpoints, why not
1. When image is uploaded, generate all breakpoint image variations.
2. Change all HTML to use srcset, which will also serve “as small, but not too
small, images based on each device’s dimensions” with its media query.
* Plugin doesn’t work with CDN because plugin doesn’t change HTML to use breakpoint
images. So, on first page load, CDN -> origin web server -> html (requests original
image) -> cdn (stores original image) -> user. Then, user -> cdn -> user (always
receives cdn-original-image).
* Or alternatively, CDN receives an “adaptive image” once, then never changes it
to avoid origin server.
* **So how does the plugin work and why not use srcset instead?**
Viewing 5 replies - 1 through 5 (of 5 total)
* Plugin Author [Takis Bouyouris](https://wordpress.org/support/users/nevma/)
* (@nevma)
* [2 years, 7 months ago](https://wordpress.org/support/topic/how-does-it-work-vs-srcset/#post-17152637)
* Hello there, my friend, you are always welcome to dig into the plugin’s code
to find more about the details.
* However, the main idea of the plugin is to work transparently and independently
of any application-specific details like the srcset. What it actually does is
read the size of the device on the client level via Javascript and then set this
in a cookie that is always read by the server. So the server knows what size
of image to use.
* This also gives more flexibility, because not all srcsets are defined correctly
and not all srcsets are close to all device sizes.
* And the tests show that, well, it works and without posing much load on the server
side.
* Hope this helps! 🙂
* Thread Starter [featuremonkey](https://wordpress.org/support/users/featuremonkey/)
* (@featuremonkey)
* [2 years, 7 months ago](https://wordpress.org/support/topic/how-does-it-work-vs-srcset/#post-17154116)
* **Here is more context to the above response.**
* The use of “a cookie set by JS” indicates that — without further specification
from the plugin developer — this plugin is using the implementation of Adaptive
Images listed here: [https://adaptive-images.com/details.htm](https://adaptive-images.com/details.htm)
* > 1. The HTML starts to load in the browser and a snippet of JS in the writes
> a session cookie, storing the visitor’s screen size in pixels.
> 2. The browser then encounters an ![]()
tag and sends a request to the server
> for that image. It also sends the cookie, because that’s how browsers work.
> 3. Apache receives the request for the image and immediately has a look in the
> website’s .htaccess file, to see if there are any special instructions for
> serving files.
> 4. There are! The .htaccess says “Dear server, any request you get for a JPG,
> GIF, or PNG file please send to the adaptive-images.php file instead.”
> The PHP file then does some intelligent thinking which can cover a number of
> scenario’s but I’ll illustrate one path that can happen:
> 1. The PHP file looks for a cookie and finds that the user has a maximum screen
> size of 480px.
> 2. It compares the cookie value with all `$resolution` sizes that were configured,
> and decides which matches best. In this case, an image maxing out at 480px
> wide.
> 3. It then has a look inside the `/ai-cache/480/` folder to see if a rescaled
> image already exists.
> 4. We’ll pretend it doesn’t – the PHP then goes to the actual requested URI to
> find the original file.
> 5. It checks the image width. If that’s smaller than the user’s screen width
> it sends the image.
> 6. If it’s larger, the PHP creates a down-scaled copy and saves that into the`/
> ai-cache/480/` folder ready for the next time it’s needed, and sends it to
> the user.
> _[https://adaptive-images.com/details.htm](https://adaptive-images.com/details.htm)_
* **So, the failure state with this plugin and external CDN’s is present when the
following detail isn’t implemented. **
* > It [the origin server] sends images with a cache header that tells proxies [
> CDN’s] not to cache the image whilst telling browsers they should. This avoids
> problems with proxy servers and network caching systems grabbing the wrong
> image and storing it.
> [https://adaptive-images.com/details.htm#:~:text=the%20approach.-,How%20it%20works,-Adaptive%20Images%20does](https://adaptive-images.com/details.htm#:~:text=the%20approach.-,How%20it%20works,-Adaptive%20Images%20does)
* Unfortunately, this behavior defeats the point of using adaptive images on the
origin server, since a CDN that receives no-cache header for images will always
pass image requests to the origin server (which increases latency of the system).
* The above scenario results in a website that is likely to be slower than a website
that just serves a single image file — however large — from a CDN directly; due
to the increase in latency (from the delivery of the image from the origin server).
* Thread Starter [featuremonkey](https://wordpress.org/support/users/featuremonkey/)
* (@featuremonkey)
* [2 years, 7 months ago](https://wordpress.org/support/topic/how-does-it-work-vs-srcset/#post-17154150)
* **Here is an analysis of the above statement involving srcset.**
* > not all srcsets are defined correctly [1] and not all srcsets are close to
> all device sizes [2]
> takis
* Given that each approach uses breakpoints, there is no difference in the closeness
of srcset vs. adaptive images with respect to the device size.
* > Configure the `$resolutions` variable at the top of the `adaptive-images.php`
> file to match the breakpoints you are using for your designs.
> …
> Set breakpoints to match your CSS’s Media Queries $resolutions = array(1382,
> 992, 768, 480);
> [https://adaptive-images.com/details.htm#:~:text=working%20with%20WordPress-,Installation,-For%20Apache%3A](https://adaptive-images.com/details.htm#:~:text=working%20with%20WordPress-,Installation,-For%20Apache%3A)
* Therefore, the difference between srcset and adaptive images is that srcset requires
images to exist on the server before they are requested without JS, while adaptive
images generates images “on-the-fly” using JS.
* —
* Boht srcset and adaptive images do not address when the browser window is resized
without further configuration.
* > Adaptive Images does NOT work on your browser window size, resizing your browser
> will have no effect on the size of images that are downloaded. It works on
> the screen size.
> [https://adaptive-images.com/details.htm#:~:text=won%E2%80%99t%20be%20sent.-,Common%20Questions,-There%20are%20a](https://adaptive-images.com/details.htm#:~:text=won%E2%80%99t%20be%20sent.-,Common%20Questions,-There%20are%20a)
* srcset can account for this behavior when it is defined to correctly use the
[viewport width vs. screen size](https://stackoverflow.com/questions/73927187/difference-between-viewport-size-and-screen-size)
with a `` tag.
- [https://stackoverflow.com/questions/29346692/srcset-and-viewport-width](https://stackoverflow.com/questions/29346692/srcset-and-viewport-width)
- [https://stackoverflow.com/questions/69035485/img-srcset-doesnt-scale-down-when-viewport-shrinks](https://stackoverflow.com/questions/69035485/img-srcset-doesnt-scale-down-when-viewport-shrinks)
- [https://www.smashingmagazine.com/2013/06/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/](https://www.smashingmagazine.com/2013/06/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/)
* adaptive images technique requires execution of JavaScript to detect when the
user has resized image beyond a given breakpoint.
- [https://sirv.com/help/articles/when-to-use-src-srcset-data-src/](https://sirv.com/help/articles/when-to-use-src-srcset-data-src/)
- [https://sirv.com/help/articles/responsive-imaging/#resize-step](https://sirv.com/help/articles/responsive-imaging/#resize-step)
* Plugin Author [Takis Bouyouris](https://wordpress.org/support/users/nevma/)
* (@nevma)
* [2 years, 7 months ago](https://wordpress.org/support/topic/how-does-it-work-vs-srcset/#post-17154164)
* Hello, again, indeed our plugin was initially based on the original adaptive-
images.com solution, as we state in the FAQ and in the credits. Of, course the
original solution was not a WordPress plugin and, in any case, our solution has
come a long way since that point with lots of added implementation details and
features.
* As far as CDNs are concerned, your explanation pretty much sums up what we know
and is the reason why CDN support is still a feature we are working on. In that
direction we have developed a special, yet still experimental mode, called CDN
Support, which one can find in the plugin settings. We are still working on this,
though!
* Plugin Author [Takis Bouyouris](https://wordpress.org/support/users/nevma/)
* (@nevma)
* [2 years, 7 months ago](https://wordpress.org/support/topic/how-does-it-work-vs-srcset/#post-17154662)
* And a correction: the Adaptive Images plugin does take into account browser window
size dynamically.
* Is there a support question I can help with?
Viewing 5 replies - 1 through 5 (of 5 total)
The topic ‘How does it work vs. srcset?’ is closed to new replies.
* 
* [Adaptive Images for WordPress](https://wordpress.org/plugins/adaptive-images/)
* [Frequently Asked Questions](https://wordpress.org/plugins/adaptive-images/#faq)
* [Support Threads](https://wordpress.org/support/plugin/adaptive-images/)
* [Active Topics](https://wordpress.org/support/plugin/adaptive-images/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/adaptive-images/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/adaptive-images/reviews/)
## Tags
* [adaptive](https://wordpress.org/support/topic-tag/adaptive/)
* [image](https://wordpress.org/support/topic-tag/image/)
* [optimization](https://wordpress.org/support/topic-tag/optimization/)
* [srcset](https://wordpress.org/support/topic-tag/srcset/)
* 6 replies
* 2 participants
* Last reply from: [Takis Bouyouris](https://wordpress.org/support/users/nevma/)
* Last activity: [2 years, 7 months ago](https://wordpress.org/support/topic/how-does-it-work-vs-srcset/#post-17154662)
* Status: resolved