At the moment when one of the most important components of your product becomes quickly, reliably, and optimally displaying text and images on your website, you start to wonder: "how can I make this more efficient?". This is the problem we faced as well. This article will discuss the optimization we developed and implemented. CDN for optimized content delivery and distribution At the top level, we use a (Content Delivery Network) - a geographically distributed network infrastructure that allows optimizing the delivery and distribution of content to end users on the Internet. In the initial stage, the user requests an image from the domain , and the request goes to the CDN. If this request is already stored in the cache, it is immediately served to the client; if not, the request goes to our servers. CDN cdn1.yourhost.com Server-Side cache management The request that comes to our servers ( ) is also checked for the presence of a ready cache; if it exists, it is served immediately; if not, the request is passed to the next level ( ) and the response is cached. MediaPRX MediaResize Image transformation and resizing with imgproxy At the resizer, we transform the request by determining the required format and size, and send it to the locally deployed , adding the original image URL to the request. , upon receiving the request, fetches the original image from the same server where the request came from. imgproxy Imgproxy How does image resizing work? All images served through and support dynamic resizing by specifying the necessary parameters in the request URL. We use as the resizer, and the in front of it converts the requested URL into a format understood by . media.yourhost.com cdn1.yourhost.com imgproxy nginx imgproxy The file must have an extension of jpg, jpeg, png, gif, or webp. The primary regex for checking the match (for images from s3) is ~^/s3/(?<a>[^/]+/(.?/)?)(a|w)?(c|b|d|s|w|h|f)(?<size>[0-9]{2,4})(_q[0-9]{2})?/(?<b>[^/]+.(jpg|jpeg|png|gif|webp))$ When setting the size, there are 3 options: If only size is present - crop the image to a square while maintaining proportions. If 2 sizes are specified ( or ) - fit within a rectangle while maintaining proportions. /size1 x size2/ /size1 / size2/ Resize by the larger side (w|a)?(w|h) When resizing, there are several modifiers - : (w|a)?(c|b|d|s|w|h|f) The first optional modifier: - indicates that the requested image needs to be converted to . If this modifier is absent, the image will be served without format conversion. w webp - on , there is already a modifier - , but it is not recommended to use it, as the compression operation takes a long time online. a stg/prod avif The second mandatory modifier: - fit within a square while maintaining proportions without image extension. - fit within a square while maintaining proportions, filling the empty areas with white color, and positioning the image at the bottom. - fit within a square while maintaining proportions, overlaying a watermark with filling over the entire image. c b d - fit within a square while maintaining proportions, filling the empty areas with white color, and positioning the image at the center. s - resize by width, maintaining proportions. w - resize by height, maintaining proportions. h - resize and crop according to the specified "square" dimensions. f Quality control: Depending on the extension, different default quality values are set. , , . ".*" is 95 ".webp" is 80 ".avif" is 50 After the resize modifiers, you can redefine the desired quality level . (w|a)?(c|b|d|s|w|h|f){SIZE}_q({quality}) - numbers from . {quality} 01 to 99 Caching and serving optimized images Upon receiving a request from , checks if the image is in its local cache (this is done to avoid fetching the original image from multiple times when requesting different sizes of the same image). If the image is not in the cache, fetches it from , caching the response. imgproxy nginx S3/MediaOrigin nginx S3/MediaOrigin The result obtained from is then passed back through the chain to the user and cached at each level to speed up subsequent requests to the same URL. imgproxy Benefits of image storage optimization In conclusion, the optimization process we have implemented for image display and resizing greatly enhances the performance and efficiency of our system. By leveraging a CDN, caching, and dynamic resizing, we ensure that images are served quickly, reliably, and in an optimal manner. These improvements not only lead to a better end-user experience but also result in reduced load on our servers and storage systems. Furthermore, the use of and customizable resize options allows for a high degree of flexibility and control over image quality and dimensions. imgproxy By adopting this comprehensive approach to image optimization, you can successfully addressed the challenge of efficiently handling images alongside text information, ultimately contributing to a more streamlined and effective product.
