CN113836452A - Picture display optimization method, system, equipment and storage medium - Google Patents
Picture display optimization method, system, equipment and storage medium Download PDFInfo
- Publication number
- CN113836452A CN113836452A CN202110786092.0A CN202110786092A CN113836452A CN 113836452 A CN113836452 A CN 113836452A CN 202110786092 A CN202110786092 A CN 202110786092A CN 113836452 A CN113836452 A CN 113836452A
- Authority
- CN
- China
- Prior art keywords
- picture
- request
- format
- display
- condition
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 50
- 238000005457 optimization Methods 0.000 title claims abstract description 43
- 238000012545 processing Methods 0.000 claims description 48
- 238000007906 compression Methods 0.000 claims description 30
- 230000006835 compression Effects 0.000 claims description 30
- 238000013500 data storage Methods 0.000 claims description 10
- 238000006243 chemical reaction Methods 0.000 description 11
- 230000008569 process Effects 0.000 description 10
- 230000000694 effects Effects 0.000 description 6
- 238000011161 development Methods 0.000 description 4
- 230000008901 benefit Effects 0.000 description 3
- 230000015556 catabolic process Effects 0.000 description 3
- 238000006731 degradation reaction Methods 0.000 description 3
- 238000012559 user support system Methods 0.000 description 3
- 238000010586 diagram Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000013144 data compression Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 230000014759 maintenance of location Effects 0.000 description 1
- 230000008447 perception Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 238000012216 screening Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Abstract
The invention provides a picture display optimization method, a system, equipment and a storage medium. The picture display optimization method comprises the following steps: intercepting the received user request; judging whether the user request belongs to a picture request or not, and judging the display compatibility of the picture under the condition that the client condition belongs to the picture request; under the condition that the display compatibility supports the first picture format, acquiring and displaying a request picture in the first picture format according to a picture request; and under the condition that the display compatibility does not support the first picture format, acquiring and displaying the request picture according to the picture request. By the technical scheme, the loading speed of the picture resources can be increased by adjusting the picture format of the picture to be displayed at the front end, the size of the picture resources and the time required by the picture request can be reduced from the network layer, and therefore the performance of front-end page display is effectively improved.
Description
Technical Field
The invention relates to the technical field of Internet front-end page application, in particular to a picture display optimization method, a system, equipment and a storage medium.
Background
With the continuous development of the internet, the performance requirements of users on applications are higher and higher, the fluent experience appeal of the interactive experience is more and more urgent, and how to provide the users with timely and quick visual effect presentation on a front-end display interface becomes a key factor that the applications can guarantee the retention of the users.
It can be understood that, from the perspective of business publicity, in order to expand a new user group and enhance the stickiness between users and a platform, a relatively colorful and colorful operation activity page is often involved for display. The images are mostly presented in the form of rich color expression, and the more gorgeous and rich pages have more contents, the larger the required image storage space is, and it is likely that the delay of the loading speed and the presentation speed occurs during loading, especially when the network speed is relatively crossed, and the larger the bandwidth is consumed.
In the service scenario, in order to accelerate the loading speed of front-end picture resources, reduce the duration of requesting pictures and the size of the picture resources from the network layer, and ensure that the processed pictures can be displayed normally to optimize the performance of front-end page display, a picture display optimization method is urgently needed to solve the problems existing in the existing application process.
Disclosure of Invention
In view of the defects in the prior art, the present invention provides a method, a system, a device and a storage medium for optimizing picture display.
A first aspect of the present application provides a picture display optimization method, including:
intercepting the received user request;
judging whether the user request belongs to a picture request or not, and judging the display compatibility of the picture under the condition that the client condition belongs to the picture request;
under the condition that the display compatibility supports the first picture format, acquiring and displaying a request picture in the first picture format according to a picture request;
under the condition that the display compatibility does not support the first picture format, acquiring and displaying a request picture according to a picture request;
wherein the picture request includes a picture format of the requested picture.
In a possible implementation of the first aspect, in a case that the display compatibility supports the first picture format, the picture display optimization method further includes:
setting the picture format of the requested picture as a first picture format in the picture request;
and converting the request picture into a first picture format according to the picture request, and returning the request picture in the first picture format.
In one possible implementation of the first aspect, the data storage capacity of the request picture in the first picture format is smaller than the data storage capacity of the request picture in the original picture format.
In a possible implementation of the first aspect, in a case that the display compatibility does not support the first picture format, the method for optimizing picture display further includes:
judging whether the format of the request picture belongs to a second picture format;
under the condition that the format of the request picture belongs to the second picture format, performing lossy compression processing on the request picture and returning the request picture subjected to the lossy compression processing;
wherein the second picture format supports lossy compression processing.
In a possible implementation of the first aspect, in a case that the display compatibility does not support the first picture format, the method for optimizing picture display further includes:
judging whether the format of the request picture belongs to a first picture format;
and under the condition that the format of the request picture belongs to the first picture format, modifying the picture format of the request picture into a second picture format, and returning the request picture in the second picture format.
In a possible implementation of the first aspect, the data storage capacity of the request picture in the second picture format is smaller than the data storage capacity of the request picture in the original picture format.
A second aspect of the present application provides an image display optimization system, which is applied to the image display optimization method provided in the first aspect, and specifically includes:
the intercepting module is used for intercepting the received user request;
the first judgment module is connected with the interception module and used for judging whether the user request belongs to the picture request or not and generating a corresponding first judgment result;
the second judgment module is connected with the first judgment module, judges the display compatibility of the picture according to the first judgment result under the condition that the client condition belongs to the picture request, and generates a corresponding second judgment result;
the storage module is used for storing the request picture;
the first processing unit is connected with the second judgment module and used for acquiring and displaying a request picture in the first picture format according to the picture request under the condition that the display compatibility supports the first picture format according to the second judgment result;
the second processing unit is connected with the second judgment module and used for acquiring and displaying the request picture according to the picture request under the condition that the display compatibility does not support the first picture format according to the second judgment result;
wherein the picture request includes a picture format of the requested picture.
In a possible implementation manner of the second aspect, in the second processing unit, the system for optimizing picture display further includes:
the first judging unit is used for judging whether the format of the request picture belongs to the second picture format or not and generating a corresponding third judging result;
the first processing unit is connected with the first judging unit, and is used for performing lossy compression processing on the request picture and returning the request picture subjected to lossy compression processing under the condition that the format of the request picture belongs to the second picture format according to the third judging result;
wherein the second picture format supports lossy compression processing.
A third aspect of the present application provides an electronic device comprising: a memory for storing a processing program; and the processor is used for realizing the picture display optimization method provided by the first aspect when executing the processing program.
A fourth aspect of the present application provides a readable storage medium, on which a processing program is stored, and when the processing program is executed by a processor, the processing program implements the picture display optimization method provided by the foregoing first aspect.
Compared with the prior art, the invention has the following beneficial effects:
by the picture display optimization method, the format of the front-end picture to be displayed can be automatically identified and adjusted on the network level according to the picture request of the front-end display page, so that the size of picture resources is reduced, the picture request is shortened, the display effect of the front-end page is optimized, and better use experience is provided for a user. Meanwhile, aiming at the condition that the possibly existing picture after format adjustment is incompatible with the display client, the technical scheme provided by the application can also perform degradation compatibility processing on the picture, and reduce the size of picture resources as much as possible under the condition of meeting the display compatibility.
Drawings
Other features, objects and advantages of the invention will become more apparent upon reading of the detailed description of non-limiting embodiments with reference to the following drawings:
fig. 1 is a flowchart illustrating an image display optimization method according to an embodiment of the present application.
FIG. 2 is a schematic diagram illustrating a flow chart of automatic processing of a requested picture in a case where display compatibility supports a first picture format according to an embodiment of the present application;
fig. 3a is a schematic flowchart illustrating automatic processing of a request picture in a case that display compatibility does not support a first picture format according to an embodiment of the present application;
fig. 3b is a schematic flowchart illustrating another automatic processing of a requested picture in a case that display compatibility does not support the first picture format according to an embodiment of the present application;
fig. 4 shows a schematic structural diagram of a picture display optimization system according to an embodiment of the present application.
Detailed Description
The present invention will be described in detail with reference to specific examples. The following examples will assist those skilled in the art in further understanding the invention, but are not intended to limit the invention in any way. It should be noted that it would be obvious to those skilled in the art that various changes and modifications can be made without departing from the spirit of the invention. All falling within the scope of the present invention.
In order to solve the problems that the time required for displaying a front-end page picture is long and the display fluency cannot meet the requirements of a user in the prior art, the application provides a picture display optimization method, a system, equipment and a storage medium. By the picture display optimization method, the format of the front-end picture to be displayed can be automatically identified and adjusted on the network level according to the picture request of the front-end display page, so that the size of picture resources is reduced, the picture request is shortened, the display effect of the front-end page is optimized, and better use experience is provided for a user.
Specifically, fig. 1 shows a schematic flow chart of an image display optimization method according to some embodiments of the present application, which specifically includes:
step 100: intercepting the received user request. It can be understood that, in the process of browsing the front-end webpage by using the browser, a large number of resource requests may be included, including a large number of user requests such as picture requests, text requests, audio requests, video requests, interface requests, and the like, and all the received user requests need to be intercepted before filtering and screening the picture requests.
Step 200: judging whether the user request belongs to a picture request, if so, indicating that the front-end webpage page needs to be subjected to picture display, and turning to the step 300 by applying the picture display optimization method related to the technical scheme; if the front-end webpage does not belong to the picture request, the front-end webpage does not need to display the picture, and the picture display optimization method related to the technical scheme does not need to be applied, so that the process is directly exited.
Step 300: judging the display compatibility of the pictures, if the display compatibility supports the first picture format, indicating that the browser used by the user can display the pictures in the first picture format, and then turning to step 400; if the display compatibility does not support the first picture format, it indicates that the browser used by the user cannot display the picture in the first picture format, and then the process goes to step 500.
Step 400: and acquiring and displaying a request picture in a first picture format according to the picture request.
Step 500: and acquiring and displaying the requested picture according to the picture request.
It is understood that, in the step 200, the request for a picture may include a requirement for a picture format of the requested picture, such as one or more of a jpg format, a png format, and a webp format. Further, in the above embodiment, the display compatibility corresponding to the picture format information included in the picture request may be determined.
It is understood that, in the step 300, the data storage capacity of the requested picture in the first picture format is smaller than the data storage capacity of the requested picture in the original picture format. Specifically, the first picture format may be a picture format having an advantage in a picture compression encoding algorithm. For example, the first picture format may be a webp format. The webp format picture has the advantages on the front-end page display that: the webp format has a better image data compression algorithm, can bring smaller picture volume, and has the image quality which is not different by naked eye identification; the method has the characteristics of lossless and lossy compression mode, Alpha transparency and animation, and can realize unified conversion with main stream picture formats such as jpeg picture format, png picture format and the like. Under the comparison of pictures with the same quality, the size of the pictures in the webp format can be reduced by more than 30% compared with the sizes of the pictures in other formats (such as the jpg format or the png format). For convenience of illustration, the webp format will be described as an example of the first picture format hereinafter.
It can be understood that the webp format pictures have a certain display compatibility problem, that is, the webp format pictures may not be displayed on some browsers with lower versions. In order to ensure that the front-end page can be accurately displayed on any browser, in step 300, it is necessary to determine display compatibility of the picture, and perform corresponding format conversion on the picture under the condition that the webp format picture can be normally displayed, where the display compatibility refers to compatibility of an application (such as a browser) for displaying the picture at the front end. The determination of how to perform display compatibility will be described in detail later.
It can be understood that in the existing practical application scenario, a developer is often required to manually compress or format-convert the picture through a picture processing tool in the page development stage, and the page loading speed is accelerated by manually compressing the picture resource. These image processing operations often take a significant amount of time, reducing the efficiency of the development phase. In step 400 and step 500 of the above embodiment, automatic loading optimization can be realized by performing an automatic format conversion process on the picture material, where a specific implementation manner of the automatic format conversion process will be described in detail below.
Further, in step 400 of the above embodiment, as shown in fig. 2, in the case that the display compatibility supports the first picture format, the step of automatically processing the requested picture may include:
step 401: the picture format of the requested picture is set to the first picture format in the picture request. It will be appreciated that the user request initiated by the user from the front end is often in the form of a request string containing a url link requesting a picture. In the above embodiment, the picture format of the requested picture may be used as a parameter to be spliced into the url link of the requested picture. For example, when the format of the requested picture requires the webp format, the parameters may be concatenated in the url link of the requested picture: is there a imageView 2/0/format/webp.
Step 402: and converting the request picture into a first picture format according to the picture request, and returning the request picture in the first picture format.
In the above embodiment, the picture server for performing cloud storage on the requested picture not only provides a storage space, but also performs format conversion on the requested picture according to the splicing parameter in the picture request. For example, include a concatenation parameter "? And when the imageView2/0/format/webp is adopted, the picture server can perform format conversion on the stored request picture in advance, change the format of the request picture from the stored original picture format to the webp format, and return the converted picture to the front-end application position for display. It can be understood that, because the size of the webp format request picture is reduced by a larger amount compared with the size of the original image format request picture, the time length for requesting the picture from the network layer can be effectively reduced, so that the loading waiting time of the user is reduced, and the display effect of the front-end page picture is greatly optimized.
Further, in step 500 of the above embodiment, as shown in fig. 3a, in the case that the display compatibility does not support the first picture format, the step of automatically processing the requested picture may include:
step 501 a: judging whether the format of the request picture belongs to a second picture format, if so, indicating that the subsequent processing operation can be carried out, and then turning to the step 502 a; if the format of the requested picture does not belong to the second picture format, it indicates that the subsequent processing operation is not possible, and the process goes to step 503 a.
Step 502 a: and performing lossy compression processing on the request picture and returning the request picture subjected to the lossy compression processing. It is to be understood that the aforementioned second picture format is a picture format supporting lossy compression, such as a jpg format. The Jpg format picture supports lossy compression but does not support transparency, the image quality is slightly worse than that of the webp format picture, and the compression ratio is smaller than that of the webp format picture, but almost all existing browsers support normal display of the jpg format picture. For convenience of explanation, the second picture format will be described as jpg format hereinafter.
Under the condition that the display compatibility of the browser does not support the pictures in the webp format, the processing steps of requesting the pictures cannot be completely abandoned, the original pictures with high resource occupancy rate can be directly provided for the front-end page of the user, and the pictures in the jpg format can be utilized to support the characteristic of lossy compression, so that the pictures are subjected to lossy compression to a certain extent, and the time for requesting the pictures from the network layer is correspondingly reduced. Specifically, the picture server for performing cloud storage on the requested picture may perform appropriate lossy compression on the picture in the jpg format, in addition to providing a storage space.
Step 503 a: and directly returning the request picture. It can be understood that, when the storage format of the requested picture is other formats such as png format, the generated file has a small volume because the compression ratio of the picture itself is high, and the picture can be returned to the front-end page from the picture server for display by directly using the original image.
In another possible implementation of the foregoing embodiment, in step 500 of the foregoing embodiment, as shown in fig. 3b, in the case that the display compatibility does not support the first picture format, the step of automatically processing the requested picture may further include:
step 501 b: and judging whether the format of the request picture belongs to the first picture format. If the request picture belongs to the first picture format, it indicates that the request picture is not compatible with the display of the front-end page, and then go to step 502 b; if the requested picture does not belong to the first picture format, it indicates that the requested picture conforms to the display compatibility of the front-end page, and the process goes to step 503 b.
Step 502 b: and modifying the picture format of the request picture into a second picture format, and returning the request picture in the second picture format. It is understood that the picture server does not limit the format of the pictures stored therein, that is, the requested pictures stored in the picture server may be directly stored in the webp format. For such request pictures, there may be a case of incompatibility with the front-end display page, so that the storage format of the request pictures needs to be judged, and the request pictures in the webp format are downgraded and converted into pictures in the jpg format under the condition that the front-end display page does not support pictures in the webp format. Specifically, the parameters may be stitched in the url link of the request picture: is there a imageView 2/0/format/jpg.
Step 503 b: and directly returning the request picture.
It is to be understood that, in the foregoing step 502b, after the webp format request picture is converted into the jpg format request picture, lossy compression may be further performed on the jpg format request picture to further reduce the size of the request picture with reference to the foregoing step 502a, which is not limited herein.
In some embodiments of the present application, as shown in fig. 4, there is further provided an image display optimization system, where the image display optimization system is applied in the image display optimization method mentioned in the foregoing embodiments, and specifically includes:
the intercepting module 1 is used for intercepting the received user request;
the first judgment module 2 is connected with the interception module 1 and used for judging whether the user request belongs to the picture request or not and generating a corresponding first judgment result;
the second judgment module 3 is connected with the first judgment module 2, and is used for judging the display compatibility of the picture according to the first judgment result under the condition that the customer condition belongs to the picture request to generate a corresponding second judgment result;
the first processing unit 4 is connected with the second judgment module 3 and is used for acquiring and displaying a request picture in the first picture format according to the picture request under the condition that the display compatibility supports the first picture format according to the second judgment result;
the second processing unit 5 is connected to the second judging module 3, and configured to obtain and display the requested picture according to the picture request according to the second judging result and under the condition that the display compatibility does not support the first picture format;
wherein the picture request includes a picture format of the requested picture.
Further, in the above embodiment, the second processing unit 5 may further include:
the first judging unit is used for judging whether the format of the request picture belongs to the second picture format or not and generating a corresponding third judging result;
the first processing unit is connected with the first judging unit, and is used for performing lossy compression processing on the request picture and returning the request picture subjected to lossy compression processing under the condition that the format of the request picture belongs to the second picture format according to the third judging result;
wherein the second picture format supports lossy compression processing.
It can be understood that each functional module in the image display optimization system executes the same step flow as that in the above-mentioned congestion identification method, which is not described herein again.
A specific embodiment is now provided to further explain and explain the above technical solutions:
in the above embodiment, the setting scenario is that the user accesses the promotion webpage page through the browser, where the promotion webpage page includes a plurality of pictures, and the pictures are stored in the picture server and are called from the picture server according to the access request of the user and displayed to the user.
In the above specific embodiment, a Serviceworker is adopted to intercept the user request and identify, parameter-splice and forward the picture request. It can be understood that the Serviceworker is an independent thread independent of the JavaScript main thread, runs in the browser background independently, and has a core function of intercepting and processing network requests, including managing response cache in a programming manner, so that the rendering process of the front-end webpage is not affected and blocked, and the page display performance is not affected. As an 'intermediate person' between the front-end browser and the server, the Serviceworker can intercept all requests of the current website and make judgment, if the requests need to be sent to the server, the requests are transferred to the server, if the requests can be directly sent to the server, the requests are directly returned to the cache and are not transferred to the server, and therefore browsing experience of a user is greatly improved.
In the above embodiment, the Serviceworker can intercept all user requests and filter the related picture requests from the user requests. It can be understood that a user may initiate many user requests during front-end web browsing, including a picture request, a text request, an audio request, a video request, an interface request, etc., from which the Serviceworker can filter a picture request. Specifically, the determination may be made by whether a destination (target object) in the request header information in the user request is an image (image), which may be in accordance with a relevant definition in the http protocol request header, and is not limited herein.
In the above specific embodiment, the Serviceworker can determine whether the browser used by the user supports the webp picture format with smaller compressed data according to the picture request. Specifically, the Serviceworker can indicate that the browser currently used by the user supports the webp picture format if the image/webp field is included in the request header field Accept requested by the user. For example, an accept request header supporting the webp picture format may be as follows:
Accept:image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*；q＝0.8
in the above embodiment, if the browser used by the user supports displaying the webp format picture, the Serviceworker performs parameter splicing in the url connection of the requested picture, and adds "? And (4) an imageView 2/0/format/webp' field and sending the field to a picture server. In the above embodiment, the picture server can perform image processing such as format conversion and lossy compression on the stored request picture in addition to storing the request picture. When the picture server receives a picture request of a user and detects "? And when the imageView 2/0/format/webp' field exists, the picture server performs format conversion on the corresponding request picture, converts the request picture into the webp format, returns the request picture to the Serviceworker, and finally displays the picture through the browser client. It can be understood that, in the above processing procedure, developers do not need to perform format conversion or compress processing on the pictures in the development stage, and users do not need any extra operation when viewing pages by using a browser, and have no perception on format conversion of the picture server, and can feel the improvement of the loading speed of the web page pictures.
In the foregoing embodiment, if the browser used by the user does not support displaying of the pictures in the webp format, the format of the request picture stored in the picture server needs to be determined first, and if the stored request picture is exactly in the webp format, the picture server needs to perform degradation processing on the request picture, so as to convert the request picture in the webp format into the jpg format. At this time, the Serviceworker performs parameter splicing in url connection of the request picture, and adds "? And an imageView 2/0/format/jpg' field and sending to the picture server. When the picture server receives a picture request of a user and detects "? And when the imageView 2/0/format/jpg' field exists, the picture server performs format conversion on the corresponding request picture, converts the request picture into a jpg format, returns the request picture to the Serviceworker, and finally displays the picture through the browser client.
Further, in the above embodiment, when the browser used by the user does not support displaying the webp format picture, the image optimization process cannot be completely abandoned, and the original image with a large resource occupancy rate cannot be directly used. The method can utilize the characteristic that the jpg format supports lossy compression, and on the basis of not influencing the overall picture effect, the picture server performs lossy compression on the picture in the jpg format to obtain the picture in the jpg format, which is smaller than the original picture in size, so that the time required for requesting the picture from the network layer is further reduced.
In some embodiments of the present application, an electronic device is also provided. The electronic device comprises a memory and a processor, wherein the memory is used for storing a processing program, and the processor executes the processing program according to instructions. When the processor executes the processing program, the graphics display optimization method in the foregoing embodiment is realized.
In some embodiments of the present application, a readable storage medium is also provided, which may be a non-volatile readable storage medium or a volatile readable storage medium. The readable storage medium has stored therein instructions which, when run on a computer, cause an electronic device comprising such readable storage medium to perform the aforementioned graphical display optimization method.
In summary, based on the description of the foregoing embodiments, it can be seen that, according to a picture request of a front-end display page in a network layer, the technical solution provided in the present application can automatically identify and complete format adjustment of a front-end to-be-displayed picture, so as to reduce the size of picture resources, further shorten the picture request, optimize the display effect of the front-end page, and provide better use experience for a user. Meanwhile, aiming at the condition that the possibly existing picture after format adjustment is incompatible with the display client, the technical scheme provided by the application can also perform degradation compatibility processing on the picture, and reduce the size of picture resources as much as possible under the condition of meeting the display compatibility.
The foregoing description of specific embodiments of the present invention has been presented. It is to be understood that the present invention is not limited to the specific embodiments described above, and that various changes or modifications may be made by one skilled in the art within the scope of the appended claims without departing from the spirit of the invention. The embodiments and features of the embodiments of the present application may be combined with each other arbitrarily without conflict.
Claims (10)
1. An image display optimization method is characterized by comprising the following steps:
intercepting the received user request;
judging whether the user request belongs to a picture request or not, and judging the display compatibility of the picture under the condition that the client condition belongs to the picture request;
under the condition that the display compatibility supports a first picture format, acquiring and displaying a request picture in the first picture format according to the picture request;
under the condition that the display compatibility does not support the first picture format, acquiring and displaying the request picture according to the picture request;
wherein the picture request comprises a picture format of the requested picture.
2. The picture display optimization method of claim 1, wherein in a case where the display compatibility supports a first picture format, the picture display optimization method further comprises:
setting a picture format of the requested picture to the first picture format in the picture request;
and converting the request picture into the first picture format according to the picture request, and returning the request picture in the first picture format.
3. The picture display optimization method according to claim 1, wherein the data storage capacity of the request picture in the first picture format is smaller than the data storage capacity of the request picture in the original picture format.
4. The picture display optimization method of claim 1, wherein in a case where the display compatibility does not support the first picture format, the picture display optimization method further comprises:
judging whether the format of the request picture belongs to a second picture format;
under the condition that the format of the request picture belongs to the second picture format, performing lossy compression processing on the request picture and returning the request picture subjected to the lossy compression processing;
wherein the second picture format supports the lossy compression processing.
5. The picture display method according to claim 4, wherein in a case where the display compatibility does not support the first picture format, the picture display optimization method further comprises:
judging whether the format of the request picture belongs to the first picture format or not;
and under the condition that the format of the request picture belongs to the first picture format, modifying the picture format of the request picture into the second picture format, and returning the request picture in the second picture format.
6. The picture display optimization method according to any one of claims 4 or 5, wherein the data storage capacity of the requested picture in the second picture format is smaller than the data storage capacity of the requested picture in the original picture format.
7. A picture display optimization system, applied to the picture display optimization method according to any one of claims 1 to 6, the picture display optimization system comprising:
the intercepting module is used for intercepting the received user request;
the first judgment module is connected with the interception module and used for judging whether the user request belongs to a picture request or not and generating a corresponding first judgment result;
the second judgment module is connected with the first judgment module, judges the display compatibility of the picture according to the first judgment result under the condition that the client condition belongs to the picture request, and generates a corresponding second judgment result;
the first processing unit is connected with the second judging module and used for acquiring and displaying a request picture in a first picture format according to the picture request under the condition that the display compatibility supports the first picture format according to the second judging result;
the second processing unit is connected with the second judging module and used for acquiring and displaying the request picture according to the picture request under the condition that the display compatibility does not support the first picture format according to the second judging result;
wherein the picture request comprises a picture format of the requested picture.
8. The picture display optimization system of claim 7, wherein in the second processing unit, the picture display optimization system further comprises:
the first judging unit is used for judging whether the format of the request picture belongs to a second picture format or not and generating a corresponding third judging result;
the first processing unit is connected with the first judging unit, and according to the third judging result, under the condition that the format of the request picture belongs to the second picture format, the first processing unit performs lossy compression processing on the request picture and returns the request picture subjected to the lossy compression processing;
wherein the second picture format supports the lossy compression processing.
9. An electronic device, comprising:
a memory for storing a processing program;
a processor, which executes the processing program to implement the picture display optimization method according to any one of claims 1 to 6.
10. A readable storage medium, characterized in that the readable storage medium has stored thereon a processing program, which when executed by a processor implements the picture display optimization method according to any one of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110786092.0A CN113836452A (en) | 2021-07-12 | 2021-07-12 | Picture display optimization method, system, equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110786092.0A CN113836452A (en) | 2021-07-12 | 2021-07-12 | Picture display optimization method, system, equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113836452A true CN113836452A (en) | 2021-12-24 |
Family
ID=78962891
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110786092.0A Pending CN113836452A (en) | 2021-07-12 | 2021-07-12 | Picture display optimization method, system, equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113836452A (en) |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2016095806A1 (en) * | 2014-12-16 | 2016-06-23 | 广州市动景计算机科技有限公司 | Picture data transmission method and device |
| CN107911456A (en) * | 2017-11-17 | 2018-04-13 | 深圳泉眼体育运营管理有限公司 | Flow optimization method, device, terminal device and the storage medium of picture loading |
| CN109684568A (en) * | 2018-12-13 | 2019-04-26 | 珠海天燕科技有限公司 | Image processing method and device |
| CN111159604A (en) * | 2019-12-30 | 2020-05-15 | 北京三快在线科技有限公司 | Picture resource loading method and device |
| CN111259289A (en) * | 2020-01-15 | 2020-06-09 | 北京达佳互联信息技术有限公司 | Picture loading method and device, electronic equipment and storage medium |
| CN112612964A (en) * | 2020-12-31 | 2021-04-06 | 武汉悦学帮网络技术有限公司 | Picture display method and device, computer equipment and storage medium |
| CN112800372A (en) * | 2021-02-03 | 2021-05-14 | 网易（杭州）网络有限公司 | Page loading method and device and electronic equipment |
-
2021
- 2021-07-12 CN CN202110786092.0A patent/CN113836452A/en active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2016095806A1 (en) * | 2014-12-16 | 2016-06-23 | 广州市动景计算机科技有限公司 | Picture data transmission method and device |
| CN107911456A (en) * | 2017-11-17 | 2018-04-13 | 深圳泉眼体育运营管理有限公司 | Flow optimization method, device, terminal device and the storage medium of picture loading |
| CN109684568A (en) * | 2018-12-13 | 2019-04-26 | 珠海天燕科技有限公司 | Image processing method and device |
| CN111159604A (en) * | 2019-12-30 | 2020-05-15 | 北京三快在线科技有限公司 | Picture resource loading method and device |
| CN111259289A (en) * | 2020-01-15 | 2020-06-09 | 北京达佳互联信息技术有限公司 | Picture loading method and device, electronic equipment and storage medium |
| CN112612964A (en) * | 2020-12-31 | 2021-04-06 | 武汉悦学帮网络技术有限公司 | Picture display method and device, computer equipment and storage medium |
| CN112800372A (en) * | 2021-02-03 | 2021-05-14 | 网易（杭州）网络有限公司 | Page loading method and device and electronic equipment |
Non-Patent Citations (1)
| Title |
|---|
| 阮一峰: "Service Worker", 《书栈网》 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP5290487B2 (en) | System and method for digital document processing | |
| US9542501B2 (en) | System and method for presenting content in a client/server environment | |
| AU2011264509B2 (en) | Adaptive image rendering and use of imposter | |
| CN102684986B (en) | Method and system for displaying pictures at terminal | |
| JP2005534108A (en) | Imaging system that provides dynamic viewport tiering optimized for specific client device types | |
| CN110688595B (en) | File online preview method, device, equipment and storage medium | |
| JP2012022695A (en) | Method for digital document processing | |
| JP2008176820A (en) | System and method for content delivery over wireless communication medium to portable computing device | |
| CN111143725A (en) | Page generation method and device and electronic equipment | |
| US10289747B2 (en) | Dynamic file concatenation | |
| WO2010063561A1 (en) | Optimize view elements sizes to maximize most data viewed in a multiple view elements gui | |
| US10110653B2 (en) | Systems and methods for transmitting data | |
| WO2022144016A1 (en) | Application program control method and apparatus, electronic device, and storage medium | |
| KR20140009175A (en) | Partial loading and editing of documents from a server | |
| US20120287116A1 (en) | Anchors For Displaying Image Sprites, Sub-Regions And 3D Images | |
| CN108062336B (en) | Media information processing method and device | |
| JP2023537767A (en) | Image processing method and apparatus, and computer-readable storage medium | |
| CN109272449A (en) | Image display method and device, computer installation and readable storage medium storing program for executing | |
| CN109710783B (en) | Picture loading method and device, storage medium and server | |
| CN116578795A (en) | Webpage generation method and device, storage medium and electronic equipment | |
| CN113836452A (en) | Picture display optimization method, system, equipment and storage medium | |
| EP3495967A1 (en) | Systems and methods for digital content delivery over a network | |
| CN113448649B (en) | Redis-based home page data loading server and method | |
| CN115659087A (en) | Page rendering method, system, device, storage medium and program product | |
| US10296580B1 (en) | Delivering parsed content items |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20211224 |
|
| RJ01 | Rejection of invention patent application after publication |