[Pro] Image resolution

Can someone please explain to me the significance of the Freeway setting Document File/SetUp/Graphics/Quality? From my reading, the resolution of a jpeg image seems to be relatively unimportant for websites. So does this control just relate to pages printed off a website?
With thanks,
Paul


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

It’s not anything to do with resolution, which will either be 72ppi or 144ppi (Retina) if you enabled high-resolution images.

GIF images are always compressed, the format will only show 256 colors total, although you can either choose Adaptive, which means “pick up to 256 colors that are in this photo, and fake the rest with pointillism”, or Mac or Web 216 colors (the so-called Web-safe palette). Time was these palettes made sense, since they were the colors that could be counted on to display more or less alike on the crappy monitors of the late '90s. Nowadays, the only correct reason to use a GIF is for an image of flat solid colors, like a logo or chart. For all other uses, there are much better formats to choose from.

PNG comes in two flavors – GIF-like and “much nicer than JPEG”. In the limited-palette form, PNG is almost exactly the same as GIF. In the Millions setting, the files are huge, but the quality is superior. It’s lossless compression all around, no pixels are ever harmed, just bandwidth and storage. PNG in millions mode has the additional benefit that it can have areas that are semi-transparent, like true soft shadows or ghosted-back white areas, or many other effects. This is because instead of having a single “transparent” color, like GIF, it allows up to 256 (8 bits) colors to calculate opacity. This is known as an Alpha channel.

JPEG is a lossy compression scheme – it throws away image data and you never get it back. That said, Freeway is very smart about how it applies this compression – it always starts from your original file, and never over-saves the original with the compressed copy. When you set the quality high, you are preserving image data at the expense of file size, and when you set it low, you are destroying original image data and replacing it with made-up pixels in “superblocks” according to the fiendish algorithms of the Joint Photographic Experts Group. Because Freeway never alters your original, you can experiment with these settings and see what amount of compression you can stand.

The settings in this dialog are the defaults that Freeway will apply to any image that you drag into your page or import into a normal graphics box (as opposed to a pass-through graphics box). Each photo may have its own modified version of these defaults, which you set in the Image Inspector, so what you set here is your personal favorite or whatever you find will work with the majority of your photos.

The High-res quality setting is quite a lot lower than the regular size, because you can get away with lots more compression if you use a 2X image. The browser squeezes the image down in measured size, and this process increases the apparent quality of the image. With care, you can have a Retina image that appears sharper and cleaner than its 1X (original Web res) counterpart even though it is a smaller file size (and much lower quality). This only comes into play if you check the “Output high-resolution graphics” option (and then, only if your original images are large enough to be used at that size. They have to start out at least twice whatever size you are using them on screen, and ideally are a bit larger than that.

Walter

On Aug 26, 2014, at 9:18 PM, Paul Scott wrote:

Can someone please explain to me the significance of the Freeway setting Document File/SetUp/Graphics/Quality? From my reading, the resolution of a jpeg image seems to be relatively unimportant for websites. So does this control just relate to pages printed off a website?
With thanks,
Paul


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


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

Thank you Walter. Perhaps you could make a recommendation. I have all jpeg files saved with their smaller dimension 1600 px. I would like the web-published photos to be as good a quality as possible, but I would also like my pages to load as fast as possible. Is there a ‘best’ setting to achieve these goals?
With thanks as always,

Paul


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

Great input, Walt. Thanks. Is there a suggested maximum file size for images (25K? 50? ___K?) before they start significantly slowing down page loading speed?


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

Many thanks Walter. (I sent an earlier reply which seems to have got lost in the ether!) I wonder if you could make a recommendation for me. I have jpeg files with smallest dimension 1600px. I would like web images of best quality appearance and pages which load rapidly. What settings do you think I should use? Thanks again, Paul


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

Is there a suggested maximum file size for images (25K? 50? ___K?) before they start significantly slowing down page loading speed?

I think this is more about total page file size than individual images.

BB speeds have changed quite dramatically over even the last couple of years (at least in the West) and a previous recommendation of sub 500Kb (0.5Mb) for the whole page is now being pushed to 1Mb and beyond.

The question really is - who is your target audience? If your visitors are coming to see a photographic site where they are expecting to see quality images then you can push the boundaries but if you are targeting mobile users then you have to consider connection speeds and data plans.

One thing I will say - and probably because it is a pet hate of mine - keep your background images as small as possible. By their nature these are meant to be in the background and not studied in detail and should be kept to the bare minimum ie a 1600px wide jpg sub 200k

I dont know how many times I have seen bg images that are 2Mb plus - totally unnecessary!

There are online services that will squeeze your images for you if you dont want to make use of Preview and its compression settings when you do a Save As

David


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

Thanks, David. And yes, I get good compression results at imageoptimizer.net.


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

Now if you go that step, be sure to bring the image into Freeway as a pass-through. Because Freeway expects (and encourages) you to use high-res originals, and will then scale them down, this can backfire if your image is already compressed. Freeway will apply your default compression settings, and the result will be a LARGER image file with no more quality than the original.

Here’s how I like to work with images. Start by using the high-resolution originals in Freeway, just as you usually would. Let Freeway crop and resample and resize as it will. After the layout is complete, and the client is happy with how the page looks, go back over it and see how much you can push the limits with the quality slider in the Inspector. Squeeze until it hurts, then back off just a little. If the overall file size is still too high for your users, then use one of those compression services in the following manner:

  1. In Freeway, change the output format of your image from JPEG to PNG-Millions. This will effectively output a full-quality image at the precise size that your layout expects.
  2. Control-click on the image, and choose Export from the contextual menu. Give it a sensible name you can remember, and don’t forget to add the .png.
  3. Use that photo as the input on your optimizer site or tool.
  4. Back in Freeway, click once on the photo, press Command -B (clear the image) and then Command -E (import again).
  5. In the Import dialog, locate your compressed version of the file from step 3, and make sure the Pass-through checkbox is checked.

Now you have a perfectly cropped image that is as small as it can be, and because you brought it in as pass-through, no further processing will be done to it. (Seriously, never compress a file as JPEG more than once. It always ends badly. That’s a fine final export format, but never store an original in that format, or press Save while you have one open in an editor. Always Save as… and choose an uncompressed format for your working file.)

Walter

On Aug 27, 2014, at 3:42 AM, Jim Feeney wrote:

Thanks, David. And yes, I get good compression results at imageoptimizer.net.


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


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

Thanks, Walter. I’ll try this on my next new page.


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