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

Post a Comment

Popular posts from this blog

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
Post a Comment
Read more

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
Post a Comment
Read more

Smaller is Better

You often hear the phrase "bigger is better". Sometimes it's true but not when it comes to JavaScript or CSS code in your Yahoo! Store pages. If you include JavaScript code or CSS either as linked files (the preferred method) or embedded inside your pages (obviously not preferred), making these files as small as possible should be your goal. Why? This is no rocket science: smaller files mean faster page loads = happy customers. Ok, so what bloats JavaScript code? In general, white space (tabs, carriage returns, non-used spaces), comments, and the actual code, such as variable and function names. You have control over all of these, however, if you don't use white spaces, carriage returns or comments, it will be immensely difficult to understand and modify your code. And not just for others, you too. There are many commercial JavaScript compression tools around, but I've been using this handy and free utility: http://www.andrewkesper.com/jscrush/ This little utilit
1 comment
Read more