all

    Understanding Image Resolution: DPI in Print Vs. Web (Part 1)

    user icon

    Emma Davis

    Content Writer

    Jan 9, 20143180 views

    Jan 9, 20143180 views

    Understanding Image Resolution: DPI in Print Vs. Web (Part 1)

    Getting the right image-file size can be a headache for anyone. Uploading images sometimes seems impossible because of website requirements (too large, too small, wrong file type- you name it!). And it’s not unusual to take a beautiful image from your screen and find it completely pixelled in print .

    Optimizing your images' original file for print or web use in advance is the best way to guarantee the results you are looking for. If you’re looking to print, then resolution is a big deal. Scratch that, image resolution is a HUGE deal for both print and web mediums. There are ideal resolution values for every printing size. Printing a poster out of an ID size picture might not turn into great image quality. In fact, in most cases it will not. Sometimes people think, "oh well on the web there’s not such need for optimization; if the image is big it it'll work..." right? Wrong! Image size plays a big role on page loading time and something as simple as naming your image properly could increase visitors. Larger images may look better, but also kill your load times and increase bounce rates.

    Understanding the The Basics

    Before you get started, there are some terms that you should get familiar with:

    Dots Per Inch (DPI): Each dot is a sample of your image. The amount of dots per inch determine the overall quality of your image. The more dots, the more detail. Standard and Professional Printers produce images with tiny dots that mix four colors: Cyan, Magenta, Yellow and Key black also known as CMYK or the subtractive color system. There is space between those tiny dots (less space - crisper image) and the DPI refers to their density.

    Pixels and Pixels Per Inch (PPI): Wikipedia describes them as "the smallest controllable element of a picture represented on the screen". Each pixel is a sample of your image, made up of tiny “sub-pixels” that combine light elements that the naked eye blends into one. In addition, pixels help create images using a 3 or 4 color system. RGB (Red Green and Blue) will display better on screens, whereas CMYK will provide the best results in digital and/or offset printing.

    Resolution: This is your image quality. If your resolution is high, your image becomes clear and sharpened to the eyes. Your image resolution requirements change from web to print. 72dpi would be completely acceptable for a website, but if you’re going to print it will not look its best. Depending on your printing size you could start at any point between 150dpi and 300dpi. (300 dpi is usually the default for most high-quality printed products).

    File Formats

    You have probably found .jpeg, .png and .gif files on different websites. These names indicate the format of the file you are dealing with. Here’s what you should know:
    • JPEG stands for Joint Photographic Expert Group. This format is the most commonly used on the web because it’s ideal for colors and brightness. Photographs are usually saved in this format.

    • PNG stands for Portable Network Graphics. It’s mainly used to preserve transparencies on images. Therefore they become easier to include on graphics, especially if you’re creating buttons or icons.

    • GIF stands for Graphics Interchange Format. It supports animations and is very useful for large blocks of color.

    File Size

    File size refers to how your file is measured in kilobytes (KB) or mega bytes (MB). 1,000 KB is 1 MB. The more MBs the "heavier" the file and the slower the digital load. To improve load times in digital mediums compress images. Compressing a file does not necessarily means lowering its quality. As you can see in the image below, it takes a lot of compressing before visually altering a picture. This 60.4KB was compressed to different sizes using a free online image optimizer. It gives you a set of compressed versions of your original image so you can choose the one to use.

    Resizing an image is especially useful for storing and sharing. Web image resolution is thought to be linked with very large files, which is not necessarily the case. Large files will be harder to send via email and will take lots of storage space from any device. Think of it before using your files for any professional printing project. File sizes and formats are the very basic things to know about image resolution. Defining your print and web needs is the first thing to do to make sure your images are optimized properly. Make sure to keep an eye for our next post on web and print optimization tips. Visit our comment section below and let us know what you think. Are there any specific topics you would like us to elaborate on?

    More from Printing Tips

    How to Implement Webhooks
    story
    How to Implement Webhooks

    Webhooks are a powerful...

    author avatarEmma Davis

    Mar 31, 2023

    50 Best Ideas on What to Say in a Birthday Card: Heartfelt Messages for Everyone
    story
    50 Best Ideas on What to Say in a Birthday Card: Heartfelt Messages for Everyone

    399

    Celebrating a loved one's birthday is a special occasion, and finding the perfect words to express your feelings can make their day even more

    author avatarEmma Davis

    Feb 4, 2023

    What The Size of Your Business Cards Says About Your Brand
    story
    What The Size of Your Business Cards Says About Your Brand

    6968

    A business card can help represent you professionally. These cards contain your contact info, job title, and company details. As a result, the

    author avatarMatthew Prince

    Dec 28, 2023

    The Evolution of Business Cards in the Digital Age
    story
    The Evolution of Business Cards in the Digital Age

    16337

    New digital features have been introduced to business cards, making business connections more effective than they used to be. Technology has r

    author avatarMatthew Prince

    Dec 20, 2023

    Effective Business Card Marketing Strategies
    story
    Effective Business Card Marketing Strategies

    15932

    First impression matters, especially when marketing your small business. An effective business card design will help you impress potential pro

    author avatarMatthew Prince

    Dec 14, 2023

    Creative Business Card Designs That Stand Out
    story
    Creative Business Card Designs That Stand Out

    1847

    Creative branding is critical for many businesses. After all, there’s nothing worse than just blending into the market. But brands can s

    author avatarMatthew Prince

    Dec 6, 2023

    The Importance of High-Quality Business Cards for Networking
    story
    The Importance of High-Quality Business Cards for Networking

    1948

    Low-quality business cards will cost you money. One report published that

    author avatarMatthew Prince

    Nov 28, 2023

    How to Turn Business Cards into Conversation Starters
    story
    How to Turn Business Cards into Conversation Starters

    11749

    You can sell more goods or services with business card designs that start conversations. In contrast, clients forget bland card designs as soo

    author avatarMatthew Prince

    Nov 22, 2023

    Home
    Products
    Favorites
    Cart
    Account