Automatic display of resized images

• US 8,645,860 B2
• Filed: 03/15/2007
• Issued: 02/04/2014
• Est. Priority Date: 03/15/2006
• Status: Active Grant

• Current Assignee: Google LLC (Alphabet Inc.)
• Original Assignee: Google Inc. (Alphabet Inc.)
• Inventors: Brenneman, Shawn, Herf, Michael, Bailey, Robert, Hopkins, Aaron
• Primary Examiner(s): PITARO, RYAN F
• Application Number:
  US11/724,600
• Publication Number:
  US 20070283247A1
• Time in Patent Office: 2,518 Days
• Field of Search: 715800-801
• US Class Current: 715/800
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents
• CPC Class Codes: G06F 40/103 Formatting, i.e. changing of presentation of documents automatic justification G06F40/189; automatic line break hyphenation G06F40/191

Abstract

Systems and methods for automatic display of scaled and/or resized images that fit within pre-defined areas in a web browser are disclosed. The method may be implemented using an image scaling JavaScript component embedded within a HTML document. Upon resizing the a client document browser in which the document is displayed, the component is resized and requests, receives and redisplays a resized image within the resized component from a server. By having the server perform the resizing, the resized image not only fits within the resized component but also maintains the quality of the image without the need for special client-side software.

Claims

1. A method for automatic resizing of an image in a document for display across a network, comprising:

serving, to a client computing device, the document, the document containing instructions for a client document browser, executed on the client computing device, to (a) display the image in a component within the client document browser, the component being embedded in the document, being sized relative to a size of the client document browser, and being configured to await for and trap resize events fired by the client document browser in response to resizing of the client document browser, and, in response to trapping a resize event fired by the client document browser, (b) resize the component and the image to provide a temporary, resized image that is temporarily displayed within the component, (c) determine a size of the component resulting from the resize event fired by the client document browser, (d) determine a size of a resized image based on the size of the component, (e) transmit a request for the resized image, the request specifying only one parameter corresponding to the size of the resized image, and (f) replace the temporary, resized image within the component with the resized image when received; and

receiving the request and, in response;

scaling a stored image at a server based on the only one parameter specified in the request to generate the resized image, the stored image corresponding to the image; and

serving, to the client computing device, the resized image in response to the request for the resized image from the client document browser.

2. The method of claim 1, wherein the component is a JavaScript component.

3. The method of claim 1, wherein the only one parameter is selected from the group consisting of a length, a width, and a resolution.

4. The method of claim 1, wherein the instructions to resize the component and to request the resized image upon trapping the resize event fired by the client document browser are contained in the component.

5. The method of claim 1, wherein the only one parameter is a maximum size of a longest edge of the component.

6. The method of claim 1, wherein scaling the stored image at the server based on the only one parameter specified in the request to generate the resized image is performed further based on a predetermined set of rules defining math for computing valid sizes for the resized image.

7. The method of claim 1, wherein scaling the stored image at the server based on the only one parameter specified in the request to generate the resized image is performed further based on a set of predetermined valid sizes for the resized image.

8. A method for automatic resizing and display of an image in a document received across a network, comprising:

requesting and receiving, at a client computing device, the document and image by a client document browser from a server across the network, the client computing device executing the client document browser, the document containing a reference to the image on the server;

displaying the document in the client document browser;

displaying the image in a component within the client document browser, the component being embedded within the document, being sized relative to a size of the client document browser, and being configured to await for and trap resize events fired by the client document browser in response to resizing of the client document browser; and

in response to trapping a resize event fired by the client document browser;

resizing the component and the image to provide a temporary, resized image;

displaying the temporary, resized image within the component;

determining a size of the component resulting from the resize event fired by the client document browser;

determining a size of a resized image based on the size of the component; and

transmitting a request for the resized image to the server, the request specifying only one parameter corresponding to the size of the resized image; and

receiving, and displaying the resized image from the server, the resized image having been generated at the server by scaling a stored image based on the only one parameter specified in the request, the stored image corresponding to the image, and the resized image replacing the temporary, resized image within the component.

9. The method of claim 8, wherein when the component is initially created within the document, the component requests, receives and displays image sized according to the size of the component from the server.

10. The method of claim 8, wherein the component is a JavaScript component.

11. The method of claim 8, wherein the only one parameter is selected from the group consisting of a length, a width, and a resolution.

12. The method of claim 8, wherein the instructions to resize the component and to request the resized image of upon trapping the resize event fired by the client document browser are contained in the component.

13. The method of claim 8, wherein the only one parameter is a maximum size of a longest edge of the component.

14. The method of claim 8, wherein generating the resized image at the server by scaling a stored image based on the only one parameter specified in the request is performed further based on a predetermined set of rules defining math for computing valid sizes for the resized image.

15. The method of claim 8, wherein generating the resized image at the server by scaling a stored image based on the only one parameter specified in the request is performed further based on a set of predetermined valid sizes for the resized image.

16. A system for automatic resizing of an image in a document for display across a network, comprising:

storage for storing a document that can be served to a client computing device and an image referenced by the document, the component being embedded within the document, being sized relative to a size of a client document browser that is executed on the client computing device, and being configured to await for and trap resize events fired by the client document browser in response to resizing of the client document browser, the component containing instructions for the client document browser to, in response to trapping of a resize event fired by the client document browser;

resize the component and the image to provide a temporary, resized image, temporarily display the temporary, resized image within the component, determine a size of the component resulting from the resize event fired by the client document browser, determine a size of a resized image based on the size of the component, and transmit a request for the resized image, the request specifying only one parameter corresponding to the size of the resized image;

an image scalar based on the only one parameter specified in the request and configured to generate the resized image in response to the request for the resized image, the image being scaled at a server using the image scalar to generate the resized image; and

a network interface configured to receive requests for the document and for resized images and to serve the document, the component, and resized images.

17. The system of claim 16, wherein the storage is further configured to store at least one of the resized images.

18. The system of claim 16, wherein the only one parameter is a maximum size of a longest edge of the component.

19. The system of claim 16, wherein the resized image is generated at the server further based on a predetermined set of rules defining math for computing valid sizes for the resized image.

20. The system of claim 16, wherein the resized image is generated at the server further based on a set of predetermined valid sizes for the resized image.

21. A computer-implemented method, comprising:

receiving, at a server including one or more processors, a first request for a web page from a computing device via a network, the web page including a component configured to (i) display an image and (ii) await and trap resize events fired by a web browser executing on the computing device in response to resizing of the web browser;

transmitting, from the server, the web page to the computing device via the network in response to receiving the first request;

receiving, at the server, (i) a second request for a resized image and (ii) one parameter for obtaining the resized image, from the computing device via the network, the second request being generated at the computing device in response to the component trapping a resize event fired by the web browser;

obtaining, at the server, the resized image using the one parameter in response to receiving the second request; and

transmitting, from the server, the resized image to the computing device via the network, wherein upon receiving the resized image the computing device replaces a temporary resized image displayed by the component with the resized image, the temporary resized image having been generated at the computing device in response to the component trapping the resize event fired by the web browser.

22. The computer-implemented method of claim 21, wherein obtaining the resized image further includes using a predetermined set of rules defining math for computing valid sizes for the resized image.

23. The computer-implemented method of claim 21, wherein obtaining the resized image further includes using a set of predetermined valid sizes for the resized image.

24. The computer-implemented method of claim 21, wherein the one parameter for obtaining the resize image is a maximum length of a longest edge of the component.