Method for transforming an image and maintaining transparency information for content transfer

Transforming images with transparent sections into high-compression formats like JPG by setting sections to a least-present color and using browser filters maintains transparency, addressing the limitations of existing formats and improving data efficiency.

WO2025252726A1PCT designated stage Publication Date: 2025-12-11POPIOLEK ROY +3
View PDF 1 Cites 0 Cited by

Patent Information

Application Number
PCT/EP2025/065331
Authority / Receiving Office
WO · WO
Patent Type
Applications
Current Assignee / Owner
Priority Date
2024-06-03
Filing Date
2025-06-03
Publication Date
2025-12-11

AI Technical Summary

Technical Problem

Existing image formats like JPG support high compression rates but not transparency, while PNG supports transparency but low compression, and integrating a new format requiring user-side modifications is impractical.

Method used

Transform images with transparent sections into formats like JPG by setting transparent sections to a least-present color, storing transparency transformation information, and using browser-supported filters to maintain transparency during rendering.

Benefits of technology

Enables high compression rates with transparency in existing browsers without modifying them, reducing data storage and bandwidth while preserving image quality.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure EP2025065331_11122025_PF_FP_ABST
    Figure EP2025065331_11122025_PF_FP_ABST
Patent Text Reader

Abstract

Disclosed is a method for transforming an image and maintaining transparency information. The method may comprise the steps of obtaining an image comprising at least one section defined as transparent, determining a color value that is least present in the image, assigning the color value to the at least one section defined as transparent and storing transparency transformation information comprising the color value as a surrogate for a transparency value. In addition, a method for providing web content including an image with transparency information, a method for displaying an image in a browser, a method for web content transfer as well as corresponding data-processing devices, a data-processing system and computer program are disclosed.
Need to check novelty before this filing date? Find Prior Art

Description

[0001]June 3, 2025 Roy Popiolek et al. E173313WO CKA / Lkm / dzdMETHOD FOR TRANSFORMING AN IMAGE AND MAINTAINING TRANSPARENCY INFORMATION FOR CONTENT TRANSFERTECHNICAL FIELD The present disclosure generally relates to the field of image processing and more particularly to techniques for transforming an image and maintaining transparency information. BACKGROUND In the realm of digital imaging and multimedia, there exists a constant demand for strong compression to enable efficient transfer of image and video data over computer networks, like the internet. On the other hand, a demand to provide or maintain a high image quality and the support for encoding transparent areas in an image or in a frame of a video exists. One wide-spread image format that supports high image quality as well as transparent areas is the Portable Network Graphics (PNG) format. Unlike some other formats, PNG preserves the original image quality during compression and decompression processes. This makes PNG ideal for situations where precise representation of details is crucial. PNG's transparency support is a standout feature, enabled by information in a part of the RGBA data called an “alpha channel”. This means pixels can be fully or partially transparent, enabling seamless integration into various backgrounds. To be able toencode images with both color and transparency information, PNG is based on the 4channels RGBA (red, green, blue, alpha (=transparency)) color space. The combinationof lossless compression and advanced transparency makes PNG a preferred choice for a range of applications, from web development to digital graphics, where maintainingboth image fidelity and transparency is paramount. However, since the compression ofPNG is lossless, the compression rate of PNG is rather low. An image format that supports high compression rates is the Joint Photographic Experts Group (JPEG) format, commonly known as JPG, which is a widely used image compression standard designed for photographs and realistic images. Key features ofthe JPG format include lossy compression and broad compatibility. Since JPG employs lossy compression, some information is discarded during compression resulting in a relatively high compression rate. However, JPG does not support alpha channels and thus lacks support to define regions to be displayed as transparent. Both JPG and PNG files are highly compatible and widely supported across various platforms, devices, and software applications, like web browsers. Almost all modernweb browsers have built-in support for displaying JPG- and PNG-encoded images.Hence both formats are a standard choice for storing and sharing images on the weband in digital media. JPG is typically chosen for storing images when high compression and no transparency support is required, whereas PNG is chosen when a lower compression rate is acceptable, and transparency is required. Furthermore, WEBP is an image format from Google with increasing prevalence and the possibility of compression plus an alpha channel (e.g., PNG). Against this background, it is immediately clear that an image format that supportsboth high compression rates and transparency would be advantageous. Preferably, thisformat should also be widely supported and browser compatible. However, if one would develop and introduce such a new image format, then most software applications as well most of the known modern web browser would lack support for rendering and displaying images encoded in the new format. Hence, software applications and web browsers would need to be patched or the capability to display and render images of the new format would have to be integrated by means of a software extension, e.g., by means of a plugin that would have to be installed by all users. However, since users are typically reluctant with respect to installing plugins and since the integration of built-in support into existing applications and web browsers would be time-consuming and expensive, it is almost impossible to ensure that the new format would be supported by the majority of existing applications and web browsers. There thus exists the need for providing a possibility to display images or videos in existing applications and web browsers with high compression rates and transparency information, without having to modify or extend the built-in capabilities of said applications or web browsers. It is therefore an objective of the present disclosure to provide a method and system that allow to provide images or videos with a high compression rate and transparency information and to allow displaying of such an image or video in existing applications and web browsers without having to modify them or extend their built-in image or video display capabilities. SUMMARY OF THE DISCLOSURE The objective is solved by the subject-matter defined in the independent claims. Advantageous modifications of embodiments of the present disclosure are defined inthe dependent claims as well as in the description and the figures. Combinations offeatures from the dependent claims may be combined with features of the independent claims as appropriate and not merely as explicitly set out in the claims. As a general overview, certain aspects of the present disclosure provide transforming an image of a format that supports transparent sections, e.g., in terms of an alpha channel, into a format that does not natively support transparency but higher compression rates, while maintaining transparency information such that the image of the format that does not natively support transparency can be displayed in a browser or software application showing transparent sections. Thus, the present disclosure allows displaying an image transformed this way in software applications and / or web browsers, without having to extend the built-in image displaying capabilities of said software applications or web browsers. In other words, the present disclosure providesmethods for processing electronic image data (images or frames of videos) that enableusers to visualize this image data to an extent that was previously impossible. As a result, a combination of image transparency and high compression rates withoutspecial requirements on the user side is now possible.One aspect of the present disclosure relates to a computer-implemented method for transforming an image and maintaining transparency information. The method may comprise a step of obtaining an (original) image of a first format comprising at leastone transparent section. The method may comprise a step of determining a color valuethat is least present in the image. The method may comprise a step of converting the image from the first format to a second format, wherein the second format provides a higher compression rate than the first format, wherein converting comprises setting the transparent section to the color value. The method may comprise a step of storing transparency transformation information comprising at least one value for setting the color value to transparent. The image of the first format as mentioned within this disclosure may be referred to as a “source image”, whereas the image of the second format (i.e., into which the source image is to be converted) may be referred to as a “target image”. This way, an image with one or more transparent sections can be transformed into an image which does no longer comprise the one or more transparent sections, but comprises one or more sections defined as transparent by means of a specifically determined color value. More precisely, “defined as transparent” means that a section to be rendered as being transparent is indicated by a determined color value that is to be replaced by transparency during rendering and displaying. Thus, when rendering the transformed image, the determined color value may be replaced by transparency. This allows the usage of image formats that support high compression rates but no native transparency information, resulting in less data space required for storing the images but at the same maintaining the transparency capabilities.During rendering, the transparency transformation information provides the requiredinformation that indicates which section is to be replaced by transparency. Preferably, the first format (“source image”) may be a format with an alpha channel and lower compression capabilities (i.e., lossless which may thus require higher data storage compared to the second format), whereas the second format (“target image”) may be a format without an alpha channel and higher compression rates (i.e., lossy which may thus requires less data storage compared to the first format). Preferably, the firstformat is PNG, whereas the second format is preferably JPG or WEBP. It is to be notedthat instead of the PNG image format, any other format that supports transparent areas may be used. According to another aspect of the present disclosure, the at least one value comprisesone of the color value assigned to the at least one section defined as transparent, or oneor more filter coefficients configured to set transparency of the section defined as transparent to maximum. This way, an image of the first format which comprises a transparency section can be transformed into the second format which does not comprise a transparent section, but a section defined as transparent by means of a specific color code. If the at least one value is the color value assigned to the at least one section defined as transparent, all areas of the image of the second format that have assigned said color code may be filtered to become transparent. If the at least one value is one or more filter coefficients configured to set transparency of the section defined as transparent to maximum, the image may be filtered based on a filter operation that uses the coefficients to set an alpha or transparency value to maximum such that these areas are no longer visible.According to another aspect of the present disclosure, the step of converting the imagefrom the first format to the second format may comprise a step of removing an alphachannel of the first format indicating the at least one section defined as transparent.The second format may not comprise an alpha channel. The step of converting theimage from the first format to the second format may further comprise a step ofperforming a lossy compression of the image.This way, data storage required for storing and / or bandwidth required for transferringthe image is reduced because the image after converting does no longer comprise an alpha channel. In addition, the lossy compression allows compressing the image down to a desired or acceptable resolution with the benefit of further reducing the required data storage and / or bandwidth required for storing / transferring the image. Accordingly, instead of defining transparency via the alpha channel, a defined color (e.g., the color least present within an image) is alternatively determined from the RGB channels (e.g. #FF00FF). This color is then dynamically visualized transparent in the further course of the application (e.g., in the browser of a client).According to another aspect of the present disclosure, determining the color value thatis least present in the image may comprise a step of performing a histogram analysis onthe image indicating a frequency for each color value included in the image. Determining the color value that is least present may further comprise a step of selecting the color value as the least present one that has the lowest frequency. This way, a color value can be identified that can be used as a surrogate for transparency does not negatively affect the image quality (e.g., in case the color value least present in the image does not occur at all in the image) or only affect the image quality as little as possible (e.g., in case the color value least present in the image is only used for small number of pixels or areas of the image).One aspect of the present disclosure relates to a computer-implemented method forproviding web content including an image with a section defined as transparent andcorresponding transparency transformation information. The method may beperformed by a webserver. The method may comprise a step of obtaining the imagetransformed according to the method for transforming an image and maintainingtransparency information of any one of the aspects described herein. The method may comprise a step of receiving a request from a client for a website including the image. The method may comprise a step of providing website code of the website, wherein thewebsite code comprises a transparency transformation statement configured to set thesection defined as transparent to transparent based on the transparency transformation information. This way, web content (e.g., the image, the website code and / or the transparency transformation statement including the transparency transformation information) can be provided to a client in an efficient manner. Due to the reduced data capacity of the web content (e.g., due to the reduced image size) providing the web content requires less bandwidth and / or can be done more faster when using the same amount of bandwidth (i.e., reduced delay). However, the transparency capabilities are generally maintained as the section defined as transparent (by the surrogate value) can be, during rendering, set to fully transparent. According to another aspect of the present disclosure, the transparency transformation information is either retrieved from a header of the image or is directly coded into the transparency transformation statement. Including the transparency transformation information in the website code (e.g., by hardcoding it into the transparency transformation statement) may be beneficial in terms of computational effort if every image within the website has the same color value assigned as a surrogate for transparency values. If included / hardcoded, the transparency transformation statement must be written only once into memory and is then available for using it for transforming each image within the website. As a result, the number of computational steps (e.g., searching and / or processing transparency statements) is reduced. Including the transparency transformation information into the header of the image may be beneficial in terms of flexibility if images within the website have different color values assigned as a surrogate for transparency values. In this case, the transparency transformation statement may be adjusted for each transparency transformation information retrieved from the headers of images. Adding the transparency transformation information into the header does not cause a substantial increase of computational steps as the header of an image is read out anyways during processing and rendering of the image and of the website. Accordingly, a dynamic and flexible way of transforming a plurality of images within a website is provided, wherein the surrogate value varies between the different images. In other words, image quality of the images may be kept high as for each image a suitable surrogate value may be chosen that does not appear in the original image or that only appears with a low frequency in the original image.According to another aspect of the present disclosure, obtaining the image maycomprise a step of retrieving, by the webserver, the transformed image and thetransparency transformation information from a data storage. Alternatively, obtaining the image may comprise a step of performing by the webserver the method for transforming an image and maintaining transparency information of any one of theaspects described herein to obtain the transformed image and the transparencytransformation information. Retrieving the generated image and the transparency transformation information froma data storage implies that an original image has been previously processed using themethod for transforming an image and maintaining transparency information according to the present disclosure. While the storing of the processed / generated image requires data storage, a client requesting corresponding content may be served faster as the generated image is already ready (i.e., no more processing is required). Having the image processed beforehand also allows the processing to be performed by another entity than the webserver (e.g., a cloud server with higher processing capacity than the webserver and communicatively coupled to the webserver). Generating the image upon receiving a client request may save additional transmission bandwidth but requires the image to be processed accordingly before being able to be transferred to the client. In this case, it may be preferable that the webserver performs the method of transforming the image to avoid additional signaling overhead (e.g., a request to another cloud server). However, depending on the overall system capabilities, it may also be possible to have another entity to perform the image transforming (e.g., the webserver receives a client request, the webserver issues a further request to the other entity such as a cloud server, the webserver receives the transformed image from the other entity and then provides the web content to the client).One aspect of the present disclosure relates to a computer-implemented method fordisplaying an image in an application, preferably a web browser. The method may comprise a step of obtaining website code including a transparency transformationstatement operating on transparency transformation information associated with theimage The method may comprise a step of obtaining the image. The method may comprise a step of rendering the website and the image based on the website code. The step of rendering may comprise a step of filtering the section defined as transparentaccording to the transparency transformation information. The method may furthercomprise displaying the filtered image.This way, a user device accessing a website can – once the website code including thetransparency transformation statement and the image are obtained – render thewebsite based on the transparency transformation information to display the section defined as transparent to be transparent. This is achieved by filtering. Accordingly, when displaying the filtered image, original transparent sections are also displayed even though the image as obtained did not comprise transparent sections, but only section defined as transparent.Accordingly, the method may be applied in applications or browsers that have built-insupport for the second format which does not natively support transparency.According to another aspect of the present disclosure, the transparency transformationstatement is based at least one of a feColorMatrix statement and / or afeComponentTransfer and / or a script, e.g. a JavaScript routine. One aspect of the present disclosure relates to a computer-implemented method forcontent transfer, preferably web content. The method may comprise a step of receivinga request from a client for a website including an image. The method may comprise astep of providing, to the client, website code of the website and the image according to the method for providing web content including an image and corresponding transparency information of any one of the aspects described herein. The method maycomprise a step of receiving, by the client, the website code of the website and theimage. The method may comprise a step of displaying the image in a browser of theclient according to the method for displaying an image in a browser of any one of theaspects described herein.According to another aspect of the present disclosure, the (web) content transfer maybe performed for one of the following applications: heatmaps, image layer, geodata,cropped product images, raster images, medicine applications, logistics or military applications. However, the application of the present technique is not limited to the aforementioned examples and may instead be applied to any application involving visual representations.According to another aspect of the present disclosure, the (web) content transfer maybe performed within a public network, preferably internet, and / or within a privatenetwork, preferably an intranet.According to another aspect of the present disclosure, the original image and / or thetransformed image may be part of, but not limited to, an image file, a video file, a 2D or3D file, an augmented reality, AR, file or a virtual reality, VR, file.One aspect of the present disclosure relates to a data-processing device or system,comprising means for performing the methods of any one of the aspects described herein. One aspect of the present disclosure relates to a computer program comprisinginstructions, which when executed by a computer cause the computer to perform themethod of any one of the preceding claims. BRIEF DESCRIPTION OF THE DRAWINGS Various aspects of the present invention are described in more detail in the following by reference to the accompanying figures without the present invention being limited to the embodiments of these figures.Fig. 1: An example of transforming an image while maintaining transparencyinformation when displaying the transformed image in accordance withembodiments of the present disclosure.Fig. 2: An example of a data-processing system in accordance with embodiments of thepresent disclosure.Fig. 3: An example histogram indicating a frequency for each color value includedwithin an image in accordance with embodiments of the present disclosure.Fig. 4: A diagram illustrating the relationship between image size and image qualitywhen compressing an image in accordance with embodiments of the present disclosure.Fig. 5: An exemplary header file including a transparency transformation statement inaccordance with embodiments of the present disclosure.Fig. 6: A compatibility and capability overview of common image formats and an imageformat in accordance with embodiments of the present disclosure. DETAILED DESCRIPTION In the following, representative embodiments illustrated in the accompanying drawings will be explained. It should be understood that the illustrated embodiments and the following descriptions refer to examples which are not intended to limit the embodiments to one preferred embodiment.According to an embodiment of the present disclosure, a source image (e.g., *.PNG)with at least one transparent section may be analyzed by means of a histogram analysisto determine a color value that is not used in the source image or that is least used inthe source image. The source image may then be converted into a compressed targetimage (e.g., a JPG-compressed image) and the determined color value or correspondingfilter coefficients derived from said determined color value are stored in terms of transparency transformation information either in the header of the compressed targetimage (in this case, the file extension, e.g., *.JPG or *.WEBP, may be changed to *.CPRto indicate that the header includes an additional information which is not defined in the respective file format, e.g., the *.JPG or *.WEBP standard) or aside from the compressed target image in a data storge. The latter one requires that a link of reference between the compressed target image and the transparency transformation information is maintained. In the compressed target image, the at least one section that correspond to the at least one section of the source image that was transparent is set to the determined color value since the compressed target images do not natively support transparency information. By storing the transparency transformation information, a browser (or another client-side application) may reconstruct the at least one transparent section. Generally, web browsers are capable of displaying image files withthe *.CPR file extension as they are compressed according to a standard (e.g., JPG orWEBP). The only difference between for example a true *.JPG or *.WEBP image file and a *.CPR-file is the additional information that may be stored in the header. In a non-limiting example, the aforementioned steps may be performed either by a webserver or by a cloud server communicatively coupled to the webserver. If performed by a cloud server, the transformed images together with the transparency transformation information is communicated to the webserver, e.g., over the internet. The webserver then generates website code, e.g., using PHP, wherein the website code includes either a JavaScript routine that is capable of replacing the determined color value according to the transparency transformation information by transparency, or a filter-statement supported by modern web browsers that is capable of filtering the areas of the target image (e.g., JPG) that have a color value according to the determined color value based on the above-mentioned filter coefficients. If a client requests the website from the webserver including the target image, the website code and compressed target image is then transferred from the webserver to the client, e.g., a web browser. When the client renders the website according to the website code, either the JavaScript routine or the filter-statement is executed by the client to render the sections of the compressed target image transparent according to the transparency transformation information. Hence, when the browser displays therendered target image, it has at least one transparent section that correspond to the atleast one transparent section of the (original) source image (e.g., PNG). Hence, from avisual point of view, it looks at client-side like that the (original) source image is displayed. Since the compressed target image is much smaller in size compared to the (original) source image, the present invention significantly reduces bandwidth and storage requirements by at the same time maintaining transparency capabilities. In this embodiment, the present disclosure benefits from the fact that modern webbrowsers support the encoding of compressed target images and support the executionof JavaScript routines or filter-statements. Hence, a modern web browser is capable of displaying the compressed target image with transparent sections without having to be patched or extended by plugins since no real new image format must be supported by the web browser. Instead, built-in functionality of modern web browsers is used to support high compression rates and transparency of images at the same time. It is to benoted that instead of the PNG image format as source image format, any other formatthat supports transparent areas may be used. The visual result outlined with respect to the previous embodiment is further explainedwith respect to Fig. 1, illustrating several visualizations of images. Source image 102 ispreferably in the PNG format (e.g., a first image format comprising an alpha channel) and has transparent sections. Hence, a background layer (not part of the actual PNG image), including circular elements depicted in image 102, shines through the transparent sections and thus look like being part of the PNG image. The position of the transparent sections in image 102 correspond to the position of the black sections in image 104. Image 104 is a JPG-compressed version of image 102, wherein the transparent sections have been set to black as black has been determined as a color that is not used in the other non-transparent sections of the image 102. The image 102 in this example has a file size of 34 MB. Image 104 shows the image 102 converted into the JPG format (e.g., with conventional conversion methods). Image 104 in this example was compressed to a file size of 1.5 MB due to the better compression capabilities provided by the JPG format compared to the PNG format. However, during converting, the transparency information in the image 102 was lost. As a result, in this example, the section of image 104 that was originally transparent, was set to black during conversion and is thus also displayed in black. Hence, the background layer including the circular elements is thus not visible anymore as it cannot shine through. However, the information that the black background section of image 104 shall be displayed as transparent during rendering is stored in terms of transparency transformation information. This information may either comprise the color code (in this case black) or filtering coefficients that allow setting the black background section to transparent during filtering. In this example, the file size of image 106 was reduced from 34 MB to 1.5 MB. The filtering or color replacement result is shown as image 104’, i.e., when image 104 is rendered and filtered, or black is exchanged by transparency, according to aspects of the present disclosure. To indicate that the transparency transformation information is included in the header of the JPG-compressed image, the file extension of image 104 may be changed from JPG to e.g. CPR. Due to the filtering (or color replacement) based on the maintained transparency transformation information, the black background is turned to transparent and is thus not visible. Hence, the visual results of displaying the original image 102 and of image 104 are essentially the same. It becomes apparent from this example, that the present disclosure allows displaying highly compressed images, like JPGs, with sections defined as transparent. This has the benefit that applications or web browser can display such images without having to extend their image display capabilities by means of plugins or the like as applications and modern browser have the capability of rendering and displaying compressed target images. What is required is code that is transmitted along with the image that performs the filtering, as already discussed above and discussed below in greater detail. The application or the browser must be able to execute the code. However, code execution functionality as well as specific language constructs for performing image filter operations are typically available in modern applications and web browsers. Fig.2 illustrates an example of a data-processing system 200 in accordance with anembodiment. System 200 comprises an element 202 that may be referred to as a client.The client may be a modern web browser or a software application with image rendering and filtering capabilities, whereas element 204 may be a server, e.g., an Apache webserver. However, other server implementations are also possible. Tasks that could be performed by server 204 may be shifted to another element 206,e.g., a cloud server or any other computing device to relieve the webserver from taskthat are computational intensive. Hence, the image transformation described in the following could either be performed by element 204 or could be shifted to element 206. The transformed image together with transparency transformation information may the afterwards transferred from element 206 to element 204. Either the element 204 or the element 206 performs the transformation of an original image of a first format (e.g., PNG format) into another image of a second format (e.g., JPG format). If done by element 206, the transformed images and corresponding transparency transformation is afterwards transferred from element 206 to element 204. During transformation, independent whether executed by element 204 or 206, a transparent section of the original image of the first format is set in the another image of the second format to a color value that is least or even not used in the original image, e.g. black. How it is determined that black is least or even not used in the original mage is further described with respect to Fig.3. The information that black is used in the another image to represent the transparent section is either stored in the header or aside from the image in terms of transparency transformation information. The transparency transformation information may comprise just the color value (in this example black) or may comprise filtering coefficients allowing to filter the black values in the another image to be transparent during displaying. The conversion of the original image into the another image is explained in the following. In this example, it is assumed that the first format is PNG and that the second format is JPG. To perform the transformation, ImageMagick®, which is a free, open-source software suite for editing and manipulating digital images, may be used. It can be used to create, edit, compose, or convert bitmap images, and supports a widerange of file formats, including JPG and PNG. Once installed on element 204 and / orelement 206, the following CMD shell prompt may be used to transform a plurality of PNGs into JPGs, wherein the transparent sections are removed and replaced by black (color code #000000). The image quality of the resulting JPGs is set to 90: „FOR / R %a IN (*.png) DO convert "%~a" -background #000000 -alpharemove -alpha off -quality 90 "%~dpna.jpg" The result is a plurality of JPG files in which the formerly section defined as transparent are replaced with the assigned color value, in the example above black. It is to be understood that any other image processing software capable of assigning the color value is usable instead of ImageMagick®. Element 202 may transmit a request for a website including an image and element 204may receive the request from the element 202 for the website including the image.Element 204 may create and transmit website code including a reference to an image that has been transformed as outlined above. To enable element 202 to properly display the JPG-compress another image, the preferred way is to use the feColorMatrix language construct included in the SVG standard as the transparency transformation statement, i.e., filtering may be done by executing a feColorMatrix-basedtransformation at element 202.The feColorMatrix transformation is a SVG filter element that changes colors based on a color transformation by a matrix of coefficients weighting the three color channels R, G and B as well as transparency information in terms of an alpha channel. It is supported by almost all modern browsers as well as by applications suitable for displaying images. One transformation can be done for a single, but also for a whole group (class) of image files (1:1), wherein for each image of the group the same color was determined as being least present. Individual feColorMatrix transformations can also be performed for multiple image files (m:m), wherein each image has a differentcolor which is least present. In case the feColorMatrix transformation is used, thetransparency transformation statement including the transparency transformation information may be hardcoded into the website code for example as follows: <feColorMatrix color-interpolation-filters="sRGB" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 2 2 -30.5 0">< / feColorMatrix>. The values indicated in the above example may be displayed in a matrix wherein each row of the matrix represents a certain channel: ^1 ^2 ^3 ^4 ^5 1 0 0 0 0^^1 ^2 ^3 ^4 ^5^1 ^2 ^3 ^4 ^5 ^ => ^ 0 1 0 0 00 0 1 0 0^ ^1 ^2 ^3 ^4 ^5 2 2 −3 0.5 0As one can see, the first row comprises 5 values (r1-r5) for the red channel, the second row 5 values (g1-g5) for the green channel, the third row 5 values for the blue channel and the fourth row 5 values for the alpha / transparent channel. If one applies said feColorMatrix transformation onto an image, the calculations performed are as follows: wherein the vector comprising R, G, B and A represents the color and alpha channelsettings of one pixel of an image and its corresponding red, green, blue and alpha channels and wherein the vector comprising R’, G’, B’ and A’ respectively represents the color and alpha channel settings of the pixel after the feColorMatrix transformation. The feColorMatrix transformation is applied to each pixel of an image. Said calculation illustrated for one exemplary pixel of the image are performed as follows, wherein R, G, B, and A represent the current values of the pixel and R’, G’, B’ and A’ the respective values after the transformation: ^^ = ^1 ∗ ^ + ^2 ∗ ^ + ^3 ∗ ^ + ^4 ∗ ^ + ^5^^ = ^1 ∗ ^ + ^2 ∗ ^ + ^3 ∗ ^ + ^4 ∗ ^ + ^5^^ = ^1 ∗ ^ + ^2 ∗ ^ + ^3 ∗ ^ + ^4 ∗ ^ + ^5^^ = ^1 ∗ ^ + ^2 ∗ ^ + ^3 ∗ ^ + ^4 ∗ ^ + ^5As explained above, a color least present within the image is determined. Said color may comprise certain values for red (R), green (G) and blue (B). For the above identified transparency transformation information, the color may be pink with the rgb(238,0,255) values. As the image does not comprise an alpha channel, the A value of the pixels are 1 (i.e., not transparent). If one applies the values of the transparency transformation information defined above, the first three equations reduce to: 238 = 1 ∗ 238 + 0 ∗ 0 + 0 ∗ 255 + 0 ∗ 1 + 01 = 0 ∗ 238 + 1 ∗ 0 + 0 ∗ 255 + 0 ∗ 1 + 0255 = 0 ∗ 238 + 0 ∗ 0 + 1 ∗ 255 + 0 ∗ 1 + 0resulting in the R, G and B value of the pink pixel remaining unchanged. The same is true for pixel having colors different than pink. For the transparency value (e.g., the alpha value) this is different as the result is to achieve a new transparency value A’ forthe pixels being pink (e.g., an alpha value that equals or is less than zero as the alphavalue is clipped to a value between 0 and 1, wherein 0 indicates full transparency and 1 indicates not transparent). As one can see below, this results in the following equation for the transparency transformation information being the coefficientsa1: 2, a2: 2, a3: -3, a4: 0.5, a5: 0:−288,5 = 2 ∗ 238 + 2 ∗ 0 + −3 ∗ 255 + 0,5 ∗ 1 + 0Hence, the transparency value for pink pixels is below zero and thus indicates full transparency. Due to the transparency transformation information comprising certain values for the a1-a5 values, a pixel having the surrogate color (e.g., pink) is displayed as transparent, because the transparency value for the pixel is set to zero resulting in transparency for said pixel. In addition, several different transformations for each image can also be executed insuccession (m:1). This may be done if not only one color value was used as a surrogatebut a plurality of color values as surrogates for a plurality of transparency values (e.g., wherein each transparency value represents a certain and / or different percentage of transparency, i.e., a transparency value between zero and one). As an example for the target image in form of a *.JPB, the transparency transformation information in terms of the coefficients a1-a5 may be stored in the header of the imageusing the PHP function “iptcembed” or any other suitable function. Fig. 5 illustratessuch an embedding. However, the transparency transformation information may also be stored at another location as long as a link or reference between the image and thetransparency transformation information is maintained. Using other target file formatssuch as e.g. *.WEBP, the same effect can be achieved by using different functions, e.g. “exiftool”, or any other suitable function. Besides using the the feColorMatrix transformation, it is also possible to include in the website code script, e.g., a JavaScript routine that replaces the color code (for theexample pink this is rgb(238,0,255) in an image to be rendered replaced bytransparency. Then, the transparency transformation information may just comprise the RGB-values of the color to be replaced by transparency. Alternatively, a combination of the SVG filter transformations feColorMatrix and feComponentTransfer can also be used: <feComponentTransfer> <feFuncR type='discrete' tableValues='value' / > <feFuncG type='discrete' tableValues='value' / > <feFuncB type='discrete' tableValues='value' / > < / feComponentTransfer> <feColorMatrix type='matrix' values='value' result='TransparenceColor' / > <feFlood flood-color='value' / > <feComposite operator='in' in2='TransparenceColor' / > <feComposite operator='xor' in2='SourceGraphic' / > In general, one may distinguish between three cases on how to implement the transparency transformation statement. For the first case, it is assumed that each image within the website has the same, least present color value. In this case, it may be preferable to include (e.g., hardcode) the transparency transformation statement into the website code. For the second case, it is assumed that images within the website have different, least present color values. In this case, one could either include a corresponding transparency transformation statement for each image into the website code and link each image to its corresponding transparency transformation statement using a corresponding identifier. In this example, when rendering the images, the corresponding transparency transformation information may be used using the identifier to identify which transparency transformation statement is the correct one for the respective image. The corresponding transparency transformation statement may then look like this: <filter id="f1"> <feColorMatrix color-interpolation-filters="sRGB" type="matrix" values="100 0 00 1 0 0 0 0 01 0 0 2 2-3 0.5 0">< / feColorMatrix>< / filter> In this example, the identifier filter id=“f1” may allow to link a first image within the website code with its corresponding transparency transformation statement. The other images within the website may be linked in the same way with corresponding identifiers (e.g., filter id=”f2” for a second image, filter id=”f3” for a third image etc.). Linking the filter to the images may then be programmed as follows: <use xlink:href="#firstimage" filter="url(#f1)" / > For the third case, it is assumed that images within the website have different, least present color values. However, different to the second case the corresponding transparency transformation statements may not be hardcoded into the website code.Instead, the transparency transformation statement(s) may be dynamically generatedusing a programming language (e.g., JavaScript). Dynamically generating the corresponding filters is of course also generally applicable to the first and second case. In a further aspect, the transparency transformation statement may be locally included in a web browser by means of a user-enabled stylesheet. Modern browsers support local stylesheet-based scripts that could be integrated into the browser which are then only applied to specific URLs / websites. Using such a user-enabled stylesheet that includes the transparency transformation statement, it is no longer necessary to deliver the transparency transformation statement from the server to the browser. This aspect may be particularly useful in corporate networks, e.g., in intranets where a plurality of images are retrieved from the same website / URL.The method(s) performed by the elements 204-206 within the data-processing system200 provide(s) an uncomplicated combination of image transparency and highcompression rates (with variable quality losses - analogous to the compression methodof JPG). With compression rates ~75% (depending on the raw material up to 95%), the method(s) may improve web content transfer between the element 204 (e.g., content provider, website owner, webservers in general) and the element 202 (e.g., end user, user devices in general) by reducing the storage size of the images, reducing the bandwidth and / or time needed to transfer the content from the server to the user'sdevice (e.g., mobile, tablet, desktop etc.).The method(s) work with all common operating systems, independent of the end deviceof the end user and in any modern browser (see Fig.6). Implementing the method(s) does not require any special hardware or software capabilities of the correspondingdata-processing devices of the elements 202, 204 and 206. Instead, these method(s)may be implemented using commonly used programming / scripting languages such as JavaScript and / or PHP. JavaScript, often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2023, 98.7% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries. All major web browsers have adedicated JavaScript engine to execute the code on users' devices. PHP, introduced in1995, is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. The main prerequisite is that element 202 supports displaying of corresponding content (e.g., a JPG) andexecuting the corresponding filter statement such as the feColorMatrix statement or acomparable filter statement. Since all modern browsers support displaying of JPGs and support the feColorMatrixstatement and the feComponentTransfer statement, the present disclosure isparticularly well suited for modern web browsers, allowing them to retrieve compressed targe images (e.g., according to the JPG standard), resulting in small image size, by at the same type supporting transparent sections as known from the PNG format. Fig.3 illustrates an example histogram 300 indicating a frequency for each color valueincluded within an image in accordance with an exemplary embodiment. The examplehistogram 300 may be a histogram obtained by performing a histogram analysis in an image in accordance with aspects of the present disclosure. As one can see, section 302 of the histogram 300 indicates colors of high frequency. In other words, these colors do often occur within the image. In contrast, section 304 of the histogram indicates colors of low frequency. In other words, these colors do not often occur within the image. Accordingly, based on these frequencies for each color value included within the image, a color value least present (i.e., with the lowest frequency value) can be determined. This may also be a color which does not occur once within the image (i.e., with afrequency value of substantially zero). In case two or more color values are identified asthe color least present (i.e., each color has the same low frequency value) selection of one color value of these two or more color values may be done randomly or based on apredefined preference (e.g., some color values -such as very bright color values- may bemore important with respect to the overall image quality or image perception than others -such as muted color values).With respect to the histogram analysis, due to the use of the alpha channel, e.g., in aPNG image file, the actually transparent areas are also evaluated in a histogram,because a pixel that is marked as transparent by means of a high alpha value, this pixelstill has an RGB color value assigned (in addition to the high value in the alphachannel). A transparent area could, for example, consist of nothing but black pixels with a high alpha value. Theoretically, there could also be an individual RGB value foreach transparent pixel (in addition to a high alpha value). In the histogram 300, thesetransparent pixels must therefore be excluded from the evaluation and the histogram300 must be calculated using the remaining pixels. In other words, pixels defined astransparent in the PNG image are ignored for the histogram analysis. Fig.4 shows a diagram 400 illustrating the relationship between image size and imagequality when compressing an image in accordance with an exemplary embodiment. Inthe present example, the diagram 400 illustrates how the file size of an image saved as JPG compared to the image saved as JPG for web depends on the image quality (i.e., the compression rate). Fig.5 illustrates an exemplary header 500 of a transformed image including transparency transformation information in accordance with an exemplary embodiment. The header 500 is illustrated in HEX-view with the transparency transformation information 502 included into the header 500 of the image. This is possible because headers typically comprise empty field entries into which the transparency transformation information can be included without requiring additional structural adaptations of the header format. The transparency transformation information 502 in HEX is also shown on the right side of Fig.5, where it is transformed into a transparency transformation statement 504 in decimal to ease the readability for illustration purposes.Fig. 6 illustrates a compatibility and capability overview 600 of modern browsers withrespect to common image formats and an image format in accordance with anexemplary embodiment. As one can see, the image format “CPR” 602 which is obtainedby performing the method(s) according to aspects of the present disclosure and by storing the transparency transformation information in the header of the image together with the most commonly used JPG and PNG formats is the only image format which is compatible with all modern web browsers. However, JPG is not able to support transparency and PNG is not able to support high compression rates. As used herein the term “and / or” includes any and all combinations of one or more of the associated listed items and may be abbreviated as “ / ”. Although some aspects have been described in the context of an apparatus, it is clear that these aspects also represent a description of the corresponding method, where a block or device corresponds to a method step or a feature of a method step. Analogously, aspects described in the context of a method step also represent a description of a corresponding block or item or feature of a corresponding apparatus. Embodiments of the present disclosure may be implemented on a computer system. The computer system may be a local computer device (e.g., personal computer, laptop, tablet computer or mobile phone) with one or more processors and one or more storagedevices or may be a distributed computer system (e.g., a cloud computing system withone or more processors and one or more storage devices distributed at various locations, for example, at a local client and / or one or more remote server farms and / or data centers). The computer system may comprise any circuit or combination of circuits. In one embodiment, the computer system may include one or more processors which can be of any type. As used herein, processor may mean any type of computational circuit, such as but not limited to a microprocessor, a microcontroller, a complex instruction set computing (CISC) microprocessor, a reduced instruction set computing (RISC) microprocessor, a very long instruction word (VLIW) microprocessor, a graphics processor, a digital signal processor (DSP), multiple coreprocessor, a field programmable gate array (FPGA), or any other type of processor orprocessing circuit. Other types of circuits that may be included in the computer system may be a custom circuit, an application-specific integrated circuit (ASlC), or the like, such as, for example, one or more circuits (such as a communication circuit) for use in wireless devices like mobile telephones, tablet computers, laptop computers, two-way radios, and similar electronic systems. The computer system may include one or more storage devices, which may include one or more memory elements suitable to the particular application, such as a main memory in the form of random-access memory (RAM), one or more hard drives, and / or one or more drives that handle removable media such as compact disks (CD),flash memory cards, digital video disk (DVD), and the like. The computer system may also include a display device, one or more speakers, and a keyboard and / or controller, which can include a mouse, trackball, touch screen, voice-recognition device, or any other device that permits a system user to input information into and receive information from the computer system. Some or all of the method steps may be executed by (or using) a hardware apparatus, like for example, a processor, a microprocessor, a programmable computer or an electronic circuit. In some embodiments, some one or more of the most important method steps may be executed by such an apparatus. Depending on certain implementation requirements, embodiments of the present disclosure can be implemented in hardware or in software. The implementation can be performed using a non-transitory storage medium such as a digital storage medium, for example a floppy disc, a DVD, a Blu-Ray, a CD, a ROM, a PROM, and EPROM, an EEPROM or a FLASH memory, having electronically readable control signals stored thereon, which cooperate (or are capable of cooperating) with a programmable computer system such that the respective method is performed. Therefore, the digital storage medium may be computer readable. Some embodiments according to the present disclosure comprise a data carrier having electronically readable control signals, which are capable of cooperating with a programmable computer system, such that one of the methods described herein is performed. Generally, embodiments of the present disclosure can be implemented as a computer program product with a program code, the program code being operative for performing one of the methods when the computer program product runs on a computer. The program code may, for example, be stored on a machine-readable carrier. Other embodiments comprise the computer program for performing one of the methods described herein, stored on a machine-readable carrier. In other words, an embodiment of the present disclosure is, therefore, a computer program having a program code for performing one of the methods described herein, when the computer program runs on a computer. A further embodiment of the present disclosure is, therefore, a storage medium (or a data carrier, or a computer-readable medium) comprising, stored thereon, the computer program for performing one of the methods described herein when it is performed by a processor. The data carrier, the digital storage medium or the recorded medium are typically tangible and / or non-transitory. A further embodiment of the present disclosure is an apparatus as described herein comprising a processor and the storage medium. A further embodiment of the present disclosure is, therefore, a data stream or a sequence of signals representing the computer program for performing one of the methods described herein. The data stream or the sequence of signals may, for example, be configured to be transferred via a data communication connection, forexample, via the internet.A further embodiment comprises a processing means, for example, a computer or a programmable logic device, configured to, or adapted to, perform one of the methods described herein. A further embodiment comprises a computer having installed thereon the computer program for performing one of the methods described herein. A further embodiment according to the present disclosure comprises an apparatus or a system configured to transfer (for example, electronically or optically) a computer program for performing one of the methods described herein to a receiver. The receiver may, for example, be a computer, a mobile device, a memory device or the like. The apparatus or system may, for example, comprise a file server for transferring the computer program to the receiver. In some embodiments, a programmable logic device (for example, a field programmable gate array) may be used to perform some or all of the functionalities of the methods described herein. In some embodiments, a field programmable gate array may cooperate with a microprocessor in order to perform one of the methods described herein. Generally, the methods are preferably performed by any hardware apparatus.

Claims

1June 3, 2025Roy Popiolek et al. E173313WO CKA / Lkm / dzdClaims 1. A computer-implemented method for transforming an image andmaintaining transparency information, comprising the steps of: obtaining an image comprising at least one transparent section; determining a color value that is least present in the image; converting the image from a first format to a second format, wherein the second format provides a higher compression rate than the first format; wherein converting comprises setting the transparent section to the color value storing transparency transformation information comprising at least one valuefor setting the color value to transparent.

2. The computer-implemented method of the preceding claim, wherein theat least one value comprises one of: the color value assigned to the at least one section defined as transparent; or one or more filter coefficients configured to set transparency of the section defined as transparent to maximum.

3. The computer-implemented method of any one of the preceding claims,wherein the step of converting the image from the first format to the second format comprises: removing an alpha channel of the first format indicating the at least one section defined as transparent, wherein the second format does not comprise an alpha channel; and / or performing a lossy compression of the image.

24. The computer-implemented method of any one of the preceding claims,wherein determining the color value that is least present in the image comprises: performing a histogram analysis on the image indicating a frequency for each color value included in the image; and selecting the color value as the least present one that has the lowest frequency.

5. A computer-implemented method performed by a webserver forproviding web content including an image with a section defined as transparentand corresponding transparency transformation information, the methodcomprising the steps of: obtaining the image transformed according to the method of any one of theclaims 1-4; receiving a request from a client for a website including the image; providing website code of the website, wherein the website code comprises atransparency transformation statement configured to set the section defined as transparent to transparent based on the transparency transformation information; and transmitting the website code and the image to the client.

6. The computer-implemented method of the preceding claim, wherein thetransparency transformation information is either retrieved from a header of the image or is directly coded into the transparency transformation statement.

7. The computer-implemented method of any one of the preceding claims5-6, wherein obtaining the image comprises: retrieving, by the webserver, the transformed image and the transparencytransformation information from a data storage; or3 performing by the webserver the method of any one of the claims 1-4 to obtainthe transformed image and the transparency transformation information.

8. A computer-implemented method for displaying an image with a sectiondefined as transparent in an application, the method comprising the steps of:obtaining website code including a transparency transformation statementoperating on transparency transformation information associated with theimage; obtaining the image; and rendering the website and the image based on the website code, wherein rendering comprises: filtering the section defined as transparent according to the transparencytransformation information; and displaying the filtered image.

9. The method of the preceding claim, wherein the transparencytransformation statement is based at least one of: afeColorMatrix statement and / or a feComponentTransfer and / or a script,preferably a JavaScript routine.

10. A computer-implemented method for web content transfer, the methodcomprising the steps of: receiving a request from a client for a website including an image; providing, to the client, website code of the website and the image according to the method of any one of the claims 5-7; receiving, by the client, the website code of the website and the image; and4 displaying the image in a browser of the client according to the method of any one of the claims 8-9.

11. The method of the preceding claim, wherein the web content transfer isperformed for one of the following applications: heatmaps, image layer, geodata, cropped product images, raster images,medicine applications, logistics or military applications or visual representations.

12. The method of any one of the preceding claims 10-11, wherein the webcontent transfer is performed within a public network, preferably internet, and / or within a private network, preferably an intranet.

13. The method of any one of the preceding claims, wherein the image ispart of an image file, a video file, a 2D or 3D file, an augmented reality, AR file or a virtual reality, VR, file.

14. A data-processing device or system, comprising means for performingthe methods of any one of the claims 1-13.

15. A computer program comprising instructions which when executed by acomputer cause the computer to perform the method of any one of the precedingclaims 1-4, 5-7, 8-9, or 10-13.

Citation Information

Patent Citations

  • Image display method and device, electronic equipment and storage medium

    CN115660978A