Skip to main content

Choosing your image type is now possible

With a recent feature release, Yahoo! Store finally gave us the option to choose the format in which images are generated on the template-based store editor pages. Previously, unless you displayed an image unaltered (meaning in its original size, and without manipulating it with the RENDER or FUSE operator), the Yahoo! Store editor converted images into GIFs no matter what. What is wrong with that? Well, the GIF format, while small in file size, is best for graphics or clip art, and not for photographic images. The reason lies with the fact that GIF can only display up to 256 colors. With the new release, we can now choose among GIF, JPEG, or PNG.

JPEG is generally better for photos, but JPEG uses what is called a "lossy" compression - meaning that in order to reduce file size, the image is compressed by merging like pixels thereby reducing the image quality to varying degrees.

PNG is a relatively new format and is generally far superior to both GIF and JPEG. PNG uses "lossless" compression much like GIF, however, unlike GIF, a PNG image supports millions of colors along with transparency (support for transparency is spotty at best in Internet Explorer prior to 7.0. There are workarounds for earlier version of IE, here is one: http://www.howtocreate.co.uk/alpha.html. )

On the Variables page, you will find two variables that deal with image types:

uploaded-img-default-type: this setting is what controls the images you upload (such as your product images.) Now that we have the option to change this, I routinely set this variable to JPEG. I tried PNG as well, but in all my tests PNG resulted in a larger file than JPEG, and the JPEG version was of good enough quality. You may just have to try it for yourself, and if you find that JPEG doesn't give you as good a quality as PNG, then go with PNG. And while sometimes GIF is ok, because it only supports 256 colors, it will probably hardly ever give you a nice outcome.

generated-img-default-type: this setting controls the generation of other, non-uploaded images such as buttons and text. Because these images are typically not photographic, GIF is a good choice, and since it is the default, you can leave it unchanged.

A Catch...

Here is something I've discovered through trial and error: while all "regular" variables take effect immediately after changing their values (and hitting Update on the Variables page), these two new variables do not... If you change uploaded-img-default-type from GIF to JPEG for example, you can wait in vain if you expect your product shots to change too... Changing these variables only affect images uploaded AFTER you changed the variables' setting. For any of your existing photos you will have to upload them once again to see them change from GIF to JPEG or PNG. For larger stores this may not be feasible unless you have all your existing images available and named by the ID of the corresponding product. In such a case, you can put all the images into a zip file, click on "Controls" in the store editor, and upload them under "Multiple-Image Upolad".

And Another Catch:

If you are using the Version 2 templates and change uploaded-img-default-type to JPEG or PNG, you may notice a gray border by your images on your section pages. This is a minor bug that was introduced by the two new variables. To fix it, you will have to be sure that wherever you use the FUSE or RENDER operator with a margin, you also specify :transparent or white for background. In particular, if in Editor V2, you should edit your copy of the contents-table template, find the only IMAGE expression in it, and change the background-color attribute of the FUSE operator there from transparent to :transparent (notice the missing colon.)

Similarly, in your copy of the inset-image template, change the same transparent value to :transparent.

Comments

Popular posts from this blog

Catalog Request

You may have noticed that both the Catalog Request and Catalog Request Confirmation pages are now customizable through Checkout Manager. If you have already customized your Checkout Manager pages (or had someone customize them for you), and would like to have the same custom look applied to your Catalog Request and Catalog Request Confirmation forms, all you have to do is this: Go into Checkout Manager, click Page Configuration and then look at how your Shipping, Billing, Review, etc. pages are set up; in particular, check if you have the Top Navigation and Left Navigation enabled. Click over to the Catalog Request tab, and make sure you have the same settings next to Top Navigation and Left Navigation. Don't forget to hit Save or Save & Preview , otherwise your changes will be lost. Click over to the Catalog Request Confirmation tab and there too, make sure you have the same settings next to Top Navigation and Left Navigation (so if those are enabled on your other checkout p

CPR for a Yahoo Store on Google's Supplemental Index

Recently a client of mine came to me and said that most of his store pages disappeared from Google, and he did not do anything to make this happen. I was a bit skeptical, so I went to Google, did a search on his store, and sure enough, there were only two pages indexed, his home page and his site map (ind.html) page. The rest were in the supplemental results, which means that Google thought the rest of the pages were not much different than these two pages. When I looked at the supplemental results, the little excerpts under each link were exactly the same, and I also noticed that what Google showed under each result was actually text from the ALT tags of the header image. I looked at some of these pages in my client's store, and they were actually different. This was a bit puzzling, but then I thought perhaps Google saw that the header and left navigation was the same throughout the site (which is pretty normal), but that the text that made each page different was too far down ins

Auto-update Copyright Year

This is one of those minor, recurring questions I'm always asked (each year): to update the copyright year in sites. Whether this is the "right thing" to do or not I don't know, but here is how you can make it automatic: First, go to the Variables page (these instructions are for Yahoo! Stores), and do a search for the word "copyright" or the year that's currently displayed next to your copyright message. If you can't find it there, chances are you have a custom template and the copyright message might be coming from some place else. In that case, you'll have to track it down, but because custom templates can be set up in any which way, unfortunately you'll be on your own. Assuming you found it, replace the year with this JavaScript code: <script>document.write(new Date().getFullYear())</script> Hit Update and you should be all set!