all

    TABLE OF CONTENTS

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

      user icon

      Emma Davis

      Content Writer

      Jan 9, 20143154 views

      Jan 9, 20143154 views

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

      TABLE OF CONTENTS

        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...

        Emma DavisEmma 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

        347

        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

        Emma DavisEmma 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

        6937

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

        Matthew PrinceMatthew Prince

        Dec 28, 2023

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

        6306

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

        Matthew PrinceMatthew Prince

        Dec 20, 2023

        Effective Business Card Marketing Strategies
        story
        Effective Business Card Marketing Strategies

        15888

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

        Matthew PrinceMatthew Prince

        Dec 14, 2023

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

        1789

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

        Matthew PrinceMatthew Prince

        Dec 6, 2023

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

        1889

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

        Matthew PrinceMatthew Prince

        Nov 28, 2023

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

        11693

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

        Matthew PrinceMatthew Prince

        Nov 22, 2023

        Home
        Products
        Favorites
        Cart
        Account