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

What to expect when your redesign goes live

At Y-Times we roll out new designs, redesigns and other major upgrades to Yahoo stores on a fairly regular basis. Some of the main questions our clients ask are how to prepare for a roll-out and what to expect in terms of SEO and conversions when the changes go live? For any functional Yahoo store how well the site ranks and how well it converts are probably the two most important metrics. Since pretty much ANY change you make to any page can potentially alter either or both of these metrics, merchants may understandably feel nervous about far reaching alterations to their sites. However, when those functionality and design changes and additions are done right, there is really very little to fear. First off, what does it mean for a design or redesign to be "done right?" From the technical stand point, search engines look at the underlying structure of your site (the HTML, and increasingly also the CSS and JavaScript code) to try to extract information and meaning from i

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!