How does it work vs. srcset?

  • Resolved featuremonkey

    (@featuremonkey)


    1 year, 1 month ago

    Using srcset involves the creation of multiple resized images (such as WordPress thumbnails), 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:

    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

    (@nevma)

    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

    (@featuremonkey)

    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

    1. The HTML starts to load in the browser and a snippet of JS in the <head> writes a session cookie, storing the visitor’s screen size in pixels.
    2. The browser then encounters an <img> 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

    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

    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

    (@featuremonkey)

    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

    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

    srcset can account for this behavior when it is defined to correctly use the viewport width vs. screen size with a <picture> tag.

    adaptive images technique requires execution of JavaScript to detect when the user has resized image beyond a given breakpoint.

    Plugin Author Takis Bouyouris

    (@nevma)

    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

    (@nevma)

    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.