Reload NGINX Plus to load the Image‑Filter module into the running instance. load_module modules/ngx_http_image_filter_module.so Obtain the module itself by installing it from the NGINX Plus repository.įor Ubuntu and Debian systems: $ sudo apt-get install nginx-plus-module-image-filterįor RedHat, CentOS, and Oracle Linux systems: $ sudo yum install nginx-plus-module-image-filterĮnable the module by including a load_module directive for it in the top‑level (“main”) context of the nf configuration file (that is, not in the http or stream contexts). The Image‑Filter module is available as a free dynamic module for NGINX Plus subscribers. Installing the Image‑Filter Module for NGINX Plus The procedure for obtaining that Image‑Filter module differs for NGINX Plus and NGINX. It can be time‑consuming to fine‑tune the optimum number and size of each variant, which then leads to difficulty in testing that each image asset variant is accessible.įor more information about the srcset attribute and other techniques for responsive images, see this great blog post. You have to do a great deal of pre‑production image resizing and deploy a much greater number of files on the server. However, it presents challenges in terms of creating and managing the image variants themselves. This approach to delivering responsive images by specifying a range of image asset variants is easy to code and highly effective. The browser determines how much space is available for the image, and selects the image asset variant that best fits the available space, typically “rounding up” to the next width ( w suffix) and internally resizing the image to fill the space exactly. The sizes attribute specifies that the browser renders an image in one‑half of the viewport if the viewport is wider than 10em and uses the entire viewport otherwise. The following more sophisticated example defines a number of image asset variants to display, according to the width of the viewport. In the following example, the src attribute defines a default image for browsers that do not support the srcset attribute and the srcset attribute names two variants – one for displays with standard pixel density ( 1x), and a second for displays with double pixel density, such as Apple Retina™ displays and some 4K monitors ( 2x). Viewport is a generic term for the display space available to the web browser, whether it’s in a window on a desktop or a full‑screen app on a mobile device. We can use it to specify a number of image asset variants for different pixel densities and viewport sizes. The principal tool for delivering responsive images is the srcset attribute of the HTML5 img tag. The information in the post applies to both NGINX Open Source and NGINX Plus (except for the separate instructions in Installing the Image‑Filter Module) for brevity, we refer to NGINX Plus throughout. In this blog post we show how to use the Image‑Filter module for NGINX and NGINX Plus to deliver responsive images without the headache of creating and managing a myriad of image asset variants – instead, we can deploy a single “source” version of each image that NGINX or NGINX Plus resizes on the fly. This improves user experience but it also puts an additional burden on the development and operations teams, who now have to create and deploy numerous image asset variants as well as the default image. Responsive images can therefore allow the web browser to produce a rendering that closely matches the intent of the designer. If the website deploys multiple different sizes of the same image, the web browser can choose the size best suited to its current environment. The HTML5 img tag provides a number of features that enable the browser to select the most appropriate asset if the server provides multiple variants. However, modern devices vary not only in terms of screen size but also pixel density. Responsive web design has become the norm for modern websites and web applications, providing a consistent experience across a wide variety of devices while also optimizing the display for each device. Photo: Phil Roeder Using the Image‑Filter module and srcset tag to resize images on the fly
0 Comments
Leave a Reply. |