On the other side, I've also seen extremely large JPGs get posted to websites where it's clear no care was taken to optimize for resolution or file size.
TLDR - Use JPGs for photos, PNGs for logos, and SVGs where large, clean graphics are required.
JPG Process
JPGs are great for compressing photographs and complex images with plenty of detail. While they can be used for print, they are better for web. Always use JPGs at the resolution they will be viewed at and adjust the quality to achieve the best bang for your buck.
How your computer makes a JPG
- Convert color space to YCbCr
- Y=Luminance, Cb=Blue difference, Cr=Red difference
- Human eye is more perceptible to changes in value more than color. Separating this helps optimize by perception.
- Downsample
- 4:4:4 - No downsampling
- Export as 51% or higher, Save as Q7 or higher
- 4:2:2 - Reduce CbCr resolution 50% horizontally
- 4:2:0 - Reduce CbCr resolution 50% both axes (total of 75% pixel reduction)
- Export as 50% or lower, Save as Q6 or lower
- Divide into 8x8 blocks
- Convert blocks to discrete cosine transform
- Quantize data
- High frequencies get smoothed out at lower quality settings. Higher quality settings allow for higher frequencies.
- Huffman encoding sometimes used (Optimize checkbox in Photoshop)
These 5 steps are then performed in reverse to display an image on your monitor. The JPG standard has been around for ages, but I've seen few documents on how to effectively optimize JPGs.
How to properly save a JPG
- Use Photoshop Save For Web
- Compare file sizes and quality at 50% and 78%. If 50% is acceptable, use that.
- Export as 50% gets you downsampled colors and a higher quantization. If 50% can be used, this is most optimized and most ideal.
- If 50% is not acceptable, compare file sizes and quality at 70% - 80% to find "best bang for your buck."
- 75%-78% is usually best bang for buck, but depending on the image this can skew further down.
PNG Process
PNGs are amazing at compressing logos and graphics. Plus, they support transparency!
How your computer makes a PNG
- Color reduction (only with 8-Bit mode)
- 8-Bit mode reduces the image to a single 8-Bit channel referencing a color palette with a max of 256 RGBA colors. Images with less colors can be better optimized in further stages, but use the same technique.
- Filter determination
- Computer finds the most optimized filter to encode the data. The filter represents the pattern of how the image is processed. It makes sense to use a pattern with the least repetition. For instance, a 1000 x 1000 image with a gradient from left to right makes more sense to optimize with a filter that handles 1000 pixels of the same color at a time and a predictive math function to take care of the rest. Instead of many MBs for that, it can possibly compress down to a few hundred bytes.
- The reason PNGs take so long to process is because the computer has to compress an image hundreds of times to figure out the best filter for saving.
- Deflate + Huffman encoding
- Repetition does not deflate well, which is why PNGs are terrible for photos, but incredibly good for more predictable graphics with solid colors and gradients.
How to properly save a PNG
- Determine if colors can be reduced.
- Full color PNGs are usually VERY expensive, but most cases where PNGs are used do not require a full range of colors.
- If saving as full color, use Photoshop Save As (Slowest) setting.
- Determine export program
- I found compresspng.com works better than Photoshop for PNG 8. Use the above technique to save PNG in full color and upload to compresspng.com. You can adjust color reduction in the settings and reprocess before saving the file, but the automated settings really do get you the best bang for your buck.
- Photoshop's Export As 8-Bit
- Photoshop's best process is entirely automatic with no options.
If you drag any PNG 8 into Photoshop, you can go to Image > Mode > Color Table to view the colors used in that image's color table.
Bitmap Test Results
Here are the results for a basic 128 x 128px logo at different export settings. As you can see, the worst quality, smallest JPG file possible still does not hold a candle to the quality and file size PNGs across the board. And PNGs compress even better when discarding unused colors.
OK! So Compresspng.com or Photoshop Export As PNG 8 are both great options for most graphic PNGs...
SVG Process
...Until you zoom in and the whole thing becomes a blurry mess. That's when you realize no matter how many pixels you have, bitmaps do not look good zoomed in, especially when sitting next to text. Vector is the other graphics format designers work with: computers save vector files as a bunch of math that gets performed to draw the file. Vectors support infinite quality for often a much smaller file size, but exact results depend on the scenario. Typically SVGs require a few KB to store all the data, but once you hit that mark you end up with perfect quality at any scale, big or small.
Usually PNGs are better for small icons and logos going on websites, SVGs for larger logos and graphics, and a more appropriate digital format to give to pros so they can reproduce a logo cleanly at any size.
How your computer makes an SVG
- Draw paths
- Shapes are drawn using a variety of path points on a coordinate system relative to the overall document size. Numbers are terminated by rounding to the decimal place specified by the user. Increasing one decimal place increases file size slightly, but improves truncation quality by 10x.
- Original pixel size of the document does affect truncation: a 1500 x 1500 px document at 2 decimal places is the same as 150 x 150 px at 3 decimal places.
- Bezier shapes include angles and strength at each point.
- Complex shapes can feature negative sections that are cut out.
- Coloring is handled as hex codes.
- More complex features like gradients are also supported.
- Draw bitmaps
- Images can be included in SVGs, though it is definitely not recommended and antithetical to the purpose of the pure vector format.
- Complex features not supported are converted to bitmaps automatically.
- Draw text
- Text can either be outlined (converted to vector, supports all computers) or remain as text (individual characters of a font, font must be installed on host computer to view).
Some SVGs include code for animation, to change color or translucency, or even various transforms over time.
How to properly save an SVG
- Determine font handling
- Convert to outlines
- Works on all computers, but yields a larger file size.
- This option is recommended for most uses.
- SVG fonts
- Requires the font to be installed on the host computer, but yields smaller file sizes.
- Corporate logos using premium purchased fonts like Helvetica cannot use this option. Helvetica includes MANY different variations of thickness and styles, some of which may not be on other computers. There is no guarantee anyone besides a graphic designer would have the exact copy of the Helvetica font installed.
- Determine decimal places
- Consider resolution of document. 3 places is very good for most purposes, but you can save 1/4 to 1/3 the file size stepping down to 2. Stepping up increases truncation quality by 10x. Decimal places do not affect rendering complexity of the SVG, only the position of anchor points.
- Always use Responsive
- Sizes are relative, allowing SVGs to scale. File sizes are also reduced.
- Always use text format UTF-8
- Achieves best file size for SVGs
- Always use Minify
- Removes blank spaces from SVG files. Makes them difficult to read in text editor, but few people would edit SVG code directly.
SVG Test Results
That logo blown up 16x requires 29,591 bytes in Photoshop's Export As PNG 8, but all the vector versions are much smaller:
2,016 bytes - SVG 1.2 Tiny Outlined, 2 decimals
905 bytes - SVGZ 1.2 Tiny Outlined, 2 decimals
893 bytes - SVG 1.2 Tiny Text (requires font to be installed on host computer), 2 decimals
414 bytes - SVGZ 1.2 Tiny Text (requires font, must be inflated before viewing), 2 decimals
If this logo was any larger, or the demand for quality any greater, an SVG file like this would certainly be the way to go. Zoom in to your heart's content!
No comments:
Post a Comment