[Pro] Image advice?

I typically use whichever image format is best suited for the type of image I’m using. I’ll often use .jpgs for photos and .pngs or .gifs for vectors or images with a lot of solids. But what do you use when your image includes mixed graphics?

For example, I’m working on an image now and the bulk of the image is a photo. However, the image also contains a placed vector. My first thought was to create a 24-bit PNG, but the image size is 462k. The very same image as a .jpg is 62k.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Whatever looks good and gives the smallest file size. Have you tried running the resulting 24-bit PNG through ImageAlpha? You can typically shave ~80% off of a unoptimized PNG with very little degradation.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I just tried TinyPNG and was able to shave 70% off the file size.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Since after market websites seem to reduce pngs considerably, what image file type do most website developers prefer these days and why? Also, do responsive sites care about the image format?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I don’t know if there is any preferred format, PNG seems to be the default for graphics, with JPEG pulling the weight in photographs. I don’t see GIF getting much use anymore unless it’s animated.

SVG’s are a pretty hot thing right now and will likely replace a lot of what PNG’s are used for in the coming years. Not only are they scalable (and look great on retina screens), they can also be styled via CSS (this can be incredibly useful in a responsive website, you can change the appearance based on viewport). For very simple graphics, an SVG is typically smaller than an optimized PNG, however, this changes when you are looking at a complicated graphics with lots of colors and odd shapes. The browser support isn’t great yet, but before long SVG will likely be a very standard graphics format for web work.

Another up and coming format is WebP. This is probably quite a few years away from being really usable, as browser support is quite lacking (Blink only ATM), but it is being created, maintained, and pushed forward by Google. They claim that WebP images are comparable in quality to PNG, but are quite a bit lighter and support animation (like GIF).

My 2¢ prediction is that PNG will largely be replaced by SVG for icons/logos and WebP for screenshots and more complex graphics in the future (5 years?). I don’t see JPEG leaving anytime soon.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Does FWP support SVG?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yep.

I’d recommend using the SVGimage action as it automatically creates a fallback graphic to use for browsers that don’t support SVG. To use, import your SVG file into a graphic item (non-pass-through), and apply the action to it. Easy-peasey.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options