
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. 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. BTW, images must be 5 MG or smaller to shrink.Skip To Section: Image File Types | How Big Should Your Image Be (KB) | How Big Should Your Image Be (WxH)

These images, blown up, still look great. However, somehow, these guys have got the technology down. You WANT your images to be of highest quality.

Before, when I’ve loaded in smaller sized images to my site, they don’t look so hot when they’re enlarged. The best part is there is no noticeable difference in the quality of the images. Within seconds after dragging and dropping your image into their dropbox (on the main page, btw you don’t have to navigate around), your image is compressed and ready to download to your computer OR directly to Dropbox! And FREE! You don’t have to log in or sign up you just get on to the site and start using it, immediately. (Well, I’m working on it in my spare time.) It’s GOING to help my site load faster…soon! I love you, TinyPNG!!!! Here’s a beautiful new tool that is helping my site run faster:
