{"id":6178,"date":"2016-09-19T05:57:42","date_gmt":"2016-09-19T10:57:42","guid":{"rendered":"http:\/\/krisbunda.com\/blog\/?p=6178"},"modified":"2016-10-15T14:17:54","modified_gmt":"2016-10-15T19:17:54","slug":"tips-for-making-graphics-look-smooth-crisp-regardless-of-image-resize","status":"publish","type":"post","link":"https:\/\/krisbunda.com\/blog\/2016\/09\/19\/tips-for-making-graphics-look-smooth-crisp-regardless-of-image-resize\/","title":{"rendered":"Tips for Making Graphics Look Smooth & Crisp Regardless of Image Resize"},"content":{"rendered":"

Tips Listed at End (Long Explanations & Tangents at Start)<\/h2>\n

With the advances in web styling\u00a0(a response to myriad newly-invented viewing-device sizes)\u00a0images are getting stretched and squeezed more than ever. Recently, I reworked a website from only 5 years ago, but I felt like I was cryogenically frozen for decades instead. Like I had suddenly awoke to find\u00a0the\u00a0website–which had been\u00a0a functional\u00a0collection of HTML and CSS files viewed on a rectangular display–was now considered “unresponsive.” It doesn’t respond to viewport size (desktop<\/a>\"\", tablet<\/a>\"\", phone<\/a>\"\", etc.)\u00a0to\u00a0reflow text and images to fill the screen in a more legible manner.<\/p>\n

\"Responsive<\/a>
\"\" Responsive Web Design<\/figcaption><\/figure>\n

A lot has changed in hardware and internet design standards in that time! There’s Apple Retina<\/a>\"\" and many more devices displaying web pages on greater than 1080 x 1920 resolution.<\/p>\n

\"With<\/a>
With Responsive Web Design, We’re gonna need a bigger favicon<\/figcaption><\/figure>\n

It used to be the one square icon you needed to produce for a site was a 16 x\u00a016 pixel favicon. Nowaday you need to have\u00a0512px, 128px, 64px, 32px, and the 16px images. I’m not even sure what they’re all for anymore. Windows tiles, Retina displays<\/a>\"\", phone app bookmarks or browser favicons. It’s why I do WordPress<\/a>\"\" sites now instead of hand code entire CSS sheets, because who can keep up with styling for all the device\u00a0changes? Let a CMS<\/abbr> and “theme” provider<\/a>\"\" worry about it.<\/p>\n

\"WordPress<\/a>
WordPress Site Identity Icon 512px – used for various formats<\/figcaption><\/figure>\n

And because of all the different viewport sizes that have arisen since the 2007 advent of the iPhone<\/a>\"\", many websites are designed with either “responsive” features (site reflows and resizes elements dynamically, depending on screen\u00a0width), or to serve differently-styled versions of the site, depending on which type of device browser is “sniffed” by the server. So your graphics could be served in all sorts of sizes you hadn’t planned on, stretching and pulling pixels to their breaking points (or at least until they look all jagged and amateurish).<\/p>\n

Bigger Is Better (Size Matters …in Branding Imagery)<\/h3>\n
\"Bigger<\/a>
Bigger Is Better<\/figcaption><\/figure>\n

It’s been my experience that when you start making an image much smaller or larger, it looks bad. Computers and smartphones have GPUs<\/abbr> to try to make jagged diagonal lines look smoother (anti alias), but they can only do so much.<\/em> So when I’m making\u00a0or remaking\u00a0a graphic that I know may be reused and\u00a0resized, I try to make the original size large. At least 1920\u00a0pixels. Seems to me that things look better when you shrink\u00a0large images smaller, versus\u00a0blowing up\u00a0a small image 200+%.<\/p>\n

\"Making<\/a>
Here’s one of those graphics that had been copied and recopied before it got to me. When updating old graphics, Take the opportunity to make them large enough not to get resized into oblivion too\u00a0soon.<\/figcaption><\/figure>\n

horrible copying of horrible copies<\/h4>\n

Another reason to make a graphic very large is to help the end users. If you make a logo <\/a>\"\"or branding images<\/a>\"\", you’re probably going to give those files to someone who’ll paste them into a newsletter, email, advertisement proof, internal memo, email signature, sign, PowerPoint, website, etc. (YES, give them multiple sizes and formats, but in my experience, they’ll lose them in short order. So keep the logo pack zipped in the client’s job folder so it’s not hard to send it back to them each year when\u00a0they email because “…the T-shirt printer<\/a>\"\" is asking for a vector file?”)<\/em><\/p>\n

After a few times of pasting the original image into derivative works, it’s probably going to get lost in the darkest corners of a single employee’s PC filing system.<\/p>\n

And another person will try to reuse the image later by copy\/pasting it from an\u00a0old signature\u00a0from the bowels of their saved emails\u00a0(where the image was scrunched to 150 pixels wide and didn’t preserve the aspect ratio). They’ll copy that version of the image and then resize it again, which will look even worse. This horrible copying of horrible copies will continue, sadly. So it’s best to give end users a large version up front, as it may take a little longer for it to look terrible.<\/p>\n

\"Copy<\/a>
Copy of a Copy of a Copy (Rita O, by Patrick R Gilbert) http:\/\/patrickrgilbert.com\/Pin-Ups<\/figcaption><\/figure>\n

V for Vector-y<\/h4>\n

Of course, this could be avoided if a vector format was used, like SVG or DWG, which looks the same no matter how large or small the image is resized. But a lot of people don’t use software that handles these formats well.<\/p>\n

Ironically, PDF, a visual format used in every office in the world, is a format that behaves like vector images in that it looks the same whether you zoom way in or out. (Except for the non-vector elements of the document, like any JPGs, PNGs, GIFs, TIFs, or if the PDF is just a scan of a paper document…) Vectorized text looks crisp and uniform at 100% or 1,000% or 10% zoom size. Same with a vectorized logo that’s embedded in a document that can be correctly exported from the editing software as a PDF.<\/p>\n

\n

Vector Files: Web-Safe at Any Size<\/h4>\n

Notice how even when zoomed in from 75% to 1,000%, there is no pixelization. The edges stay crisp and stark and proportionate. This is because I created all the text, lines, and line art as vectorized assets and exported them in a vector format (PDF).<\/p>\n

\"Example<\/div>
Example of Vector Line Art looking crisp at any zoom 75 percent<\/div><\/div><\/a><\/div>
\"Example<\/div>
Example of Vector Line Art looking crisp at any zoom 100 percent<\/div><\/div><\/a><\/div>
\"Example<\/div>
Example of Vector Line Art looking crisp at any zoom 200 percent<\/div><\/div><\/a><\/div>
\"Example<\/div>
Example of Vector Line Art looking crisp at any zoom 300 percent<\/div><\/div><\/a><\/div>
\"Example<\/div>
Example of Vector Line Art looking crisp at any zoom 600 percent<\/div><\/div><\/a><\/div>
\"Example<\/div>
Example of Vector Line Art looking crisp at any zoom 800 percent<\/div><\/div><\/a><\/div>
\"Example<\/div>
Example of Vector Line Art looking crisp at any zoom 1,000 percent<\/div><\/div><\/a><\/div><\/div> \n<\/div><\/div>\n

But since your average office worker who’s just trying to throw a logo on a bulletin doesn’t use pricey Adobe Creative Suite<\/a>\"\"<\/em> (nor even standalone Acrobat<\/a>\"\"<\/em>) to make bulletins, it doesn’t matter. Many end users\u00a0won’t be using editing tools that handle vector graphics well enough to create documents that preserve vector images’ integrity. It’s still the age of the raster image, for now.<\/p>\n

(See my post about the ironically low-cost [read: free] document editor that exports SVGs [unlike Office Word or Publisher] if you do it right)<\/a><\/p>\n

What is Anti Aliasing?<\/h3>\n

If you’re not familiar with anti aliasing of digital images\/video here’s a nice little video from Linus. The only thing I would’ve liked him to say differently is when he explains how a GPU<\/abbr> “fills in the missing information” on a diagonal line–I would instead describe it as: Changing the color of a pixel to the average color of all\u00a0the pixels around it.<\/em> That’s what makes the gradual gray pixels along the jagged edge of a diagonal black line on a white background, and thus creates\u00a0a smoothing effect.<\/p>\n