UNDERSTANDING IMAGE RESOLUTION FOR THE WEB
When optimizing a website, it is best practice to use as few resources as necessary without compromising quality. This improves your site load time, and as a result, your user’s experience is improved, which Google likes!
When you’re adding images to a website, it is best to make the file sizes precisely the size you need. If your image is being displayed at 700×500 @ 72 PPI it doesn’t make sense to display it as a 6000×6000 300 DPI image. It can be time-consuming to compress your images properly, but it is definitely worth it in the long run. We use a website called https://tinyjpg.com/ to compress our images when we are doing web design.
| PHYSICAL IMAGE SIZE (INCHES) |
IMAGE SIZE IN PIXELS @72 PPI (IDEAL FOR WEB) |
IMAGE SIZE @ 300 PPI (IDEAL FOR PRINT) |
| 4" x 6" |
334×432 |
1391×1800 |
| 5" x 7" |
360×466 |
1500×1941 |
| 8" x 10" |
576×745 |
2400×3106 |
| 8.5" x 11" |
612×792 |
2550×3300 |
| 11" x 14.235" |
792×1025 |
3300×4271 |
| 18.544" x 24" |
1335×1728 |
5563×7200 |
IMAGE RESOLUTION FOR CREATING BILLBOARD IMAGES AND EXTREMELY HIGH RESOLUTION
When creating a billboard image, it is important to realize a couple of factors:
Billboards are typically not viewed up close, and creating a resolution of 72000 x 93182 pixels at 300 PPI is not practical for several reasons.
- Most rendering engines will cap out around 10000 x 10000 pixels
- Design programs like Photoshop may run out of memory at such a size
- The final file size will be around 20 gigs
All of this makes the previously mentioned standards for print impossible. With this, the question arises, what is the best file resolution for large-scale printing projects?
The answer to this is working in high PPI and scaling that back once the image is ready for print.
For example, you would start by creating an image in as high of a resolution as practicable, like 8000 x 8000 @ 400 PPI.
This would technically give you excellent quality at 20 inches x 20 inches, which can be used for proofing or alternate marketing material.
Once the image has been finalized, you scale the PPI from 400 to 40.
The image should now be suitable for 20′ x 20′ at 40 PPI, which is an acceptable resolution for a billboard-sized image. Because billboards are likely to be viewed from further away, your need for a tighter pixel grid is reduced.
Image Resolution for texturing 3d objects
When it comes to texturing a three-dimensional object, it is essential to consider what the final resolution will be in relation to where the object will sit compared to the camera. For example, if the resolution of the image will be 1028x1028 pixels and the texture of the object takes up 100% of the screen, you would want at the very least 1028x1028 texture size. With that in mind, it is relatively easy to estimate the appropriate texture size you will need based on this. (Final image resolution x (screen % or estimated proximity to camera)
Keep in mind textures occupy a 3D space, so you must factor in the closest element of the texture to the camera when considering the texture resolution to avoid a drop in texture quality.
For more 3d texturing information, please view our 3D Texturing Guide and Tutorial.
