Spark Pay online stores supports many file types and extensions to be used for your store and each one has a specific purpose. Here are the basic file extensions that are typically used for images:
GIF Files -
Pros:
- Gifs are typically used for low resolution files for websites.
- Transparency is supported and allows for the gif to be placed over any background or photos, and there is no border or background that will display in the image.
- Gifs support interlacing. This pre-loads the graphic. At first it begins to be rendered as blurry then becomes more focuses and crisp as soon as it has been downloaded. The transition is easier on the viewer's eyes and the images load faster.
- Gifs support animation, but not the level that flash files and jquery does.
- Gif files are also compressed to give a small image file so they work great for small images.
Cons:
- The lower the amount of colors used in the image, the smaller the image file size.
- Using a gif for photos is not recommended because gifs have a limitation of only 256 colors. You would typically want to use a gif for images, logos, text images and graphics with solid areas of color and not for photographic images or graphics that contain gradients.
JPEG Files -
Pros:
- These are typically used for complex images and photographs because they are relatively small in size and still look crisp.
- They offer a wide range of colors without a large file size and support up to 16.7 million colors.
- With the new responsive themes, you can have flexible images without large loading times.
Cons:
- JPEGs lose quality once they have been edited and uploaded anywhere online.
Example:
PNG Files -
Pros-
- These are developed to have similar purpose of gifs.
- They give designers and users the ability to use low-resolution images that load quickly and look great.
- PNG supports transparency but is unique in comparison to the GIF functionality. It can have different levels of transparency from transparent to opaque semi-transparency which works great for logos and images with drop-shadow effects and gradients.
- PNG files do not lose quality during, and after editing. PNG files do not support animation.
- They include over 16 million colors and support 24-bit color. Provides 256 levels of transparency.
- A PNG with an alpha channel can be placed on any color background and maintain its original appearance.
Cons-
- PNGs take up far more disk space.
- Some older browsers do not provide full support of the PNG format.
Optimizing Product Photos and Logos
There are many ways on Spark Pay online stores to alter the way an image is rendered on a page in terms of size and clarity.
Category and Product Thumbnails, Product Images, Slideshow Images can all be resized in the editor of each section.
Using the zoom feature
To make sure that your images show in high definition when partnered with our responsive theme image zoom feature it's a good rule of thumb to make sure that the image is uploaded to a larger scale to avoid pixelation and distortion.
Here is an example of a product primary image that was uploaded with a larger scale when zoomed:
Here is an example of an image that has a smaller scale that was resized to a larger scale when zoomed:
Thumbnails
If a thumbnail is set to be at 200x200 pixels on the page should be within this ratio when uploaded. If a large image is scaled down it may have the following result depending on the file type.
Slideshow Widget
Another good rule of thumb for Slideshow Widgets it to make sure that the image you are loading into the slideshow is the same size as the slideshow image size limits.
For example, here is a default image that is used in the slideshow widget on the Atomic theme.
It is a JPEG file set at 1180x464. If you create an image to put in it's place and it is a smaller size it will render smaller.
You can check out these image optimizing sites here:
Other articles on Image Optimization: