Browse DevX
Sign up for e-mail newsletters from DevX


Optimizing the Graphics File : Page 5

Finding the right graphic is just the first step in putting graphics into your Web site. Once you've created or found the graphic, you need to prepare it for online use, structuring it to display quickly at the maximum quality. Optimizing the File shows you how to make the balance between file size and quality level.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Use Screen Resolution

Save your graphic at a resolution appropriate for screen display

You readers are going to be viewing your pages&3151;and the graphics within them—on a computer monitor. Monitors typically display data at 72 dpi. Therefore, save your files at 72 dpi.

If you are using graphics files which were originally created for print media, they are typically saved at a higher resolution. If you use a larger resolution one of two things will happen: if you've specified the image size in your image tag, the extra data will just be thrown away but your readers will get to experience the joy of a long download time. If the image size isn't specified, all that data will display and you'll end up with a huge image on the screen.

So forget the print rules and stick to the lower resolution—you'll get the same quality, far, far smaller files, and no size surprises.

Original physical size = 1.68 x .96 inches
Original resolution = 150dpi
Number of pixels = 252 x 144
Physical size on a Web page = 3.5 x 2 inches
This image increases to more than twice its original size because the resolution is too high.
  Original physical size = 1.68 x .96 inches
Original resolution = 72dpi
Number of pixels = 121 x 69
Physical size on a Web page = 1.68 x .96 inches
This image is the right size because the resolution is 72dpi.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date