#BEST RESOLUTION FOR PHOTOS FOR THE WEB HOW TO#
#BEST RESOLUTION FOR PHOTOS FOR THE WEB PDF#
#BEST RESOLUTION FOR PHOTOS FOR THE WEB FULL#

#BEST RESOLUTION FOR PHOTOS FOR THE WEB PDF#

We won’t be going over PDF compression in this guide as it’s complex enough to require it’s own post, but we wanted to mention it to include the most common digital assets you’ll encounter that require some optimization for web. It also allows for easy, clean reading as the text in a PDF is scalable and preserved, and the text is also searchable using Ctrl + F (really useful for long, text-heavy documents). Saving a file as a PDF preserves the page layout and design for anyone that downloads the file. When to save it as a PDFĪny design that’s formatted like a page, not just a stand-alone image – a trifold brochure, a 1 or 2-sided sales flyer, a poster, a menu, a case study, and eBook or white paper. If you’re saving a file and trying to decide whether to save as a PNG or a GIF, try both to see which gives your image more clarity and a smaller file size and pick the format that gives you the best result. GIFs are special because they are the format that allows animation ( GIPHY, anyone?). There is a lot of overlap between GIFs and PNG-8 formats.

#BEST RESOLUTION FOR PHOTOS FOR THE WEB HOW TO#

So why not use them for everything? Their file sizes can be HUGE (but we’ll talk about how to compress these later). PNG-24 images are a godsend – they can save complex images in JPG-like quality WITH a transparent background. PNG-8 offers a smaller file size but limits you to a max of 256 colors, and a questionable transparency option (PNG-8 transparent images usually display jagged, ugly edges). If you’re saving a file for web out of Photoshop, there are two PNG formation options: PNG-8 and PNG-24. PNG files are great for logos, vector artwork, solid colored shapes, or any image where you need transparency. JPG file when it’s a photograph, a picture with a lot of colors (more than 256), or an image that contains gradients. When working with your own image, save it as a. PDFs aren’t image files but they’re used extensively as digital asset downloads.

If you download a brochure file, you’re likely to see a FILENAME.PDF. When saving an image from the web to your computer, you’ll usually see it saved as FILENAME.JPG, FILENAME.PNG, or FILENAME.GIF.

#BEST RESOLUTION FOR PHOTOS FOR THE WEB FULL#

If you think anyone is going to download a 120MB anything from your site (unless it’s actually a huge software package), I’ve got some bad news for you: they won’t.Īfter seeing one too many websites loading in a 3.0 MB full width background image, I wanted to take a moment to talk about preparing digital assets, specifically images (PNG, JPG, GIF), for the web. In the end, print file sizes wind up being quite large (I’ve sent a 120MB multi-page catalog file to a printer before).

Print files require high-resolution photographs (generally 300 dpi, or dots per inch), outlined text, bleeds for edge-to-edge color, uncompressed images, transparency settings, all sorts of crazy stuff. Preparing files for print is incredibly different than preparing them for availability on the web. This guide will show you step-by-step how to optimize images for web using both JPG and PNG formats. These files need to be clear, appropriately sized, and most importantly, small (as measured by kilobytes, not pixels). Saving a JPG for Web | Saving a PNG for WebĪs a graphic designer in mid-2016, most completed client projects wind up in digital format – graphics for the website, PDFs for download, social graphics, data sheets, brochures – rather than being sent to a printer. Skip To Section: Image File Types | How Big Should Your Image Be (KB) | How Big Should Your Image Be (WxH)

Best resolution for photos for the web