Method and Apparatus for Automatically Optimizing the Loading of Images in a Cloud-Based Proxy Service
A web page is received at a client device. The web page includes at least one reference to an image. The client device determines a display size of the image. The client device transmits a request for the image, where the request includes an indication of a set of one or more requested dimensions for the image that is equal or substantially equal to the determined display size. The client device receives the image having a size that is equal or substantially equal to the set of requested dimensions, and the client device displays the image.
1 . A method in a client device, the method comprising:
receiving a web page, wherein the web page includes at least one reference to an image, and wherein the web page includes a set of one or more client-side scripts or one or more references to one or more client side scripts that, when executed by the client device, perform the following:
determining a display size of the image;
determining that an image placeholder corresponding to the image is in a viewport of a client network application of the client device or within a defined distance from the viewport; and
responsive to the determination that the image placeholder corresponding to the image is within the viewport of the client network application of the client device or within a defined distance from the viewport, causing the client device to transmit a request for the image, the request including an indication of a set of one or more requested dimensions for the image that is equal or substantially equal to the determined display size;
receiving the image, the image having a size that is equal or substantially equal to the set of requested dimensions; and
displaying the image.
2 . The method of claim 1 , further comprising: determining a set of presented dimensions for the image, the set of presented dimensions indicating how the image is configured to be displayed.
3 . The method of claim 2 , wherein determining the set of presented dimensions for the image includes performing one or more of:
analyzing the reference to the image to determine whether it has a width or height variable set; and
examining a Cascaded Style Sheet (CSS) style to determine whether it governs the display size of the image.
4 . The method of claim 2 , wherein determining the display size of the image includes performing the following:
determining a size of a viewport of a client network application of the client device;
determining a set of presented dimensions for the image, the set of presented dimensions indicating how the image is configured to be displayed;
determining that the set of presented dimensions for the image exceeds the size of the viewport; and
setting the display size of the image to not exceed the size of the viewport, wherein the requested set of dimensions does not exceed the size of the viewport.
5 . The method of claim 2 , wherein determining the display size of the image includes performing the following:
determining a size of a viewport of a client network application of the client device;
determining a set of presented dimensions for the image, the set of presented dimensions indicating how the image is configured to be displayed;
determining that the set of presented dimensions for the image is smaller than the size of the viewport; and
setting the display size of the image to be equal or substantially equal to the set of presented dimensions, wherein the requested set of dimensions is equal or substantially equal to the set of presented dimensions.
6 . The method of claim 2 , wherein determining the display size of the image includes performing the following:
determining a set of presented dimensions for the image, the set of presented dimensions indicating how the image is configured to be displayed;
setting the display size of the image to be equal or substantially equal to the set of presented dimensions, wherein the requested set of dimensions is equal or substantially equal to the set of presented dimensions.
7 . (canceled)
8 . A method for automatically resizing one or more images of a web page, the method comprising:
receiving a request for the web page, wherein the request originates from a client network application of a client device;
retrieving the requested web page, wherein the web page includes a reference to an image;
modifying code of the retrieved web page such that when the client network application issues a request for the image, that request will include an indication of a set of one or more requested dimensions for the image; and
transmitting the modified web page to the client device.
9 . The method of claim 8 , wherein modifying the code of the retrieved web page includes modifying the reference to the image such that the client network application will not request that image until after the set of requested dimensions is determined.
10 . The method of claim 9 , wherein modifying the code of the retrieved web page includes adding one or more client-side scripts or one or more references to one or more client-side scripts that, when executed by the client network application, determine the set of requested dimensions for the image.
11 . The method of claim 10 , wherein the one or more client-side scripts or references to one or more client-side scripts that are added to the code of the retrieved web page perform the following operations when executed by the client network application:
determine a size of a viewport of the client network application;
determine a set of presented dimensions for the image, the set of presented dimensions indicating how the image is configured to be displayed by the client network application;
determine that the set of presented dimensions for the image exceeds the size of the viewport; and
cause the request for the image to be issued, wherein the set of requested dimensions does not exceed the size of the viewport.
12 . The method of claim 10 , wherein the one or more client-side scripts or references to one or more client-side scripts that are added to the code of the retrieved web page perform the following operations when executed by the client network application:
determine a size of a viewport of the client network application;
determine a set of presented dimensions for the image, the set of presented dimensions indicating how the image is configured to be displayed by the client network application;
determine that the set of presented dimensions for the image is smaller than the size of the viewport; and
cause the request for the image to be issued where the set of requested dimensions is equal or substantially equal to the set of presented dimensions.
13 . The method of claim 10 , wherein the one or more client-side scripts or references to one or more client-side scripts that are added to the code of the retrieved web page perform the following operations when executed by the client network application:
determine a set of presented dimensions for the image, the set of presented dimensions indicating how the image is configured to be displayed by the client network application; and
cause the request for the image to be issued where the set of requested dimensions is equal or substantially equal to the set of presented dimensions.
14 . The method of claim 8 , further comprising:
receiving a request for the image that originates from the client network application, wherein the request for the image includes an indication of a set of one or more requested dimensions for the image;
retrieving the image;
resizing the image based on the set of requested dimensions for the image; and
transmitting the resized image to the client network application.
15 . The method of claim 8 , further comprising:
receiving a request for the image that originates from the client network application, wherein the request for the image includes an indication of a set of one or more requested dimensions for the image;
retrieving a version of the requested image that has been resized based on the set of requested dimensions for the image; and
transmitting the resized version of the requested image to the client network application.
16 . A non-transitory machine-readable storage medium that provides instructions that, when executed by a processor of a client device, cause the processor to perform operations comprising:
receiving a web page, wherein the web page includes at least one reference to an image, and wherein the web page includes a set of one or more client-side scripts or one or more references to one or more client side scripts that, when executed by the client device, perform the following:
determining a display size of the image;
determining that an image placeholder corresponding to the image is in a viewport of a client network application of the client device or within a defined distance from the viewport; and
responsive to the determination that the image placeholder corresponding to the image is within the viewport of the client network application of the client device or within a defined distance from the viewport, causing the client device to transmit a request for the image, the request including an indication of a set of one or more requested dimensions for the image that is equal or substantially equal to the determined display size;
receiving the image, the image having a size that is equal or substantially equal to the set of requested dimensions; and
displaying the image.
17 . The non-transitory machine-readable storage medium of claim 16 , wherein the medium further provides instructions that, when executed by the processor, perform the following operation: determining a set of presented dimensions for the image, the set of presented dimensions indicating how the image is configured to be displayed.
18 . The non-transitory machine-readable storage medium of claim 17 , wherein determining the set of presented dimensions for the image includes performing one or more of:
analyzing the reference to the image to determine whether it has a width or height variable set; and
examining a Cascaded Style Sheet (CSS) style to determine whether it governs the display size of the image.
19 . The non-transitory machine-readable storage medium of claim 17 , wherein determining the display size of the image includes performing the following:
determining a size of a viewport of a client network application of the client device;
determining a set of presented dimensions for the image, the set of presented dimensions indicating how the image is configured to be displayed;
determining that the set of presented dimensions for the image exceeds the size of the viewport; and
setting the display size of the image to not exceed the size of the viewport, wherein the requested set of dimensions does not exceed the size of the viewport.
20 . The non-transitory machine-readable storage medium of claim 17 , wherein determining the display size of the image includes performing the following:
determining a size of a viewport of a client network application of the client device;
determining a set of presented dimensions for the image, the set of presented dimensions indicating how the image is configured to be displayed;
determining that the set of presented dimensions for the image is smaller than the size of the viewport; and
setting the display size of the image to be equal or substantially equal to the set of presented dimensions, wherein the requested set of dimensions is equal or substantially equal to the set of presented dimensions.
21 . The non-transitory machine-readable storage medium of claim 17 , wherein determining the display size of the image includes performing the following:
determining a set of presented dimensions for the image, the set of presented dimensions indicating how the image is configured to be displayed;
setting the display size of the image to be equal or substantially equal to the set of presented dimensions, wherein the requested set of dimensions is equal or substantially equal to the set of presented dimensions.
22 . (canceled)
23 . A non-transitory machine-readable storage medium that provides instructions that, when executed by a processor, cause the processor to perform operations comprising:
receiving a request for a web page, wherein the request originates from a client network application of a client device;
retrieving the requested web page, wherein the web page includes a reference to an image;
modifying code of the retrieved web page such that when the client network application issues a request for the image, that request will include an indication of a set of one or more requested dimensions for the image; and
transmitting the modified web page to the client device.
24 . The non-transitory machine-readable storage medium of claim 23 , wherein modifying the code of the retrieved web page includes modifying the reference to the image such that the client network application will not request that image until after the set of requested dimensions is determined.
25 . The non-transitory machine-readable storage medium of claim 24 , wherein modifying the code of the retrieved web page includes adding one or more client-side scripts or one or more references to one or more client-side scripts that, when executed by the client network application, determine the set of requested dimensions for the image.
26 . The non-transitory machine-readable storage medium of claim 25 , wherein the one or more client-side scripts or references to one or more client-side scripts that are added to the code of the retrieved web page perform the following operations when executed by the client network application:
determine a size of a viewport of the client network application;
determine a set of presented dimensions for the image, the set of presented dimensions indicating how the image is configured to be displayed by the client network application;
determine that the set of presented dimensions for the image exceeds the size of the viewport; and
cause the request for the image to be issued, wherein the set of requested dimensions does not exceed the size of the viewport.
27 . The non-transitory machine-readable storage medium of claim 25 , wherein the one or more client-side scripts or references to one or more client-side scripts that are added to the code of the retrieved web page perform the following operations when executed by the client network application:
determine a size of a viewport of the client network application;
determine a set of presented dimensions for the image, the set of presented dimensions indicating how the image is configured to be displayed by the client network application;
determine that the set of presented dimensions for the image is smaller than the size of the viewport; and
cause the request for the image to be issued where the set of requested dimensions is equal or substantially equal to the set of presented dimensions.
28 . The non-transitory machine-readable storage medium of claim 25 , wherein the one or more client-side scripts or references to one or more client-side scripts that are added to the code of the retrieved web page perform the following operations when executed by the client network application:
determine a set of presented dimensions for the image, the set of presented dimensions indicating how the image is configured to be displayed by the client network application; and
cause the request for the image to be issued where the set of requested dimensions is equal or substantially equal to the set of presented dimensions.
29 . The non-transitory machine-readable storage medium of claim 23 , wherein the medium further provides instructions that, when executed by the processor, cause the processor to perform the following operations:
receiving a request for the image that originates from the client network application, wherein the request for the image includes an indication of a set of one or more requested dimensions for the image;
retrieving the image;
resizing the image based on the set of requested dimensions for the image; and
transmitting the resized image to the client network application.
30 . The non-transitory machine-readable storage medium of claim 23 , wherein the medium further provides instructions that, when executed by the processor, cause the processor to perform the following operations:
receiving a request for the image that originates from the client network application, wherein the request for the image includes an indication of a set of one or more requested dimensions for the image;
retrieving a version of the requested image that has been resized based on the set of requested dimensions for the image; and
transmitting the resized version of the requested image to the client network application.