What Images Are the Best for My Online Store?¶

How to Get the Correct Size of Image?¶

There are numerous online tools you can use for image editing. Here are some of them:

• PicMonkey;
• Pixlr;
• FotoFlexer.

You can also use offline graphic editors such as GIMP or Adobe Photoshop. The latter allows you to optimize multiple images at once through the File → Save for web feature.

The free add-on Detailed Images Size can help you to resize product detailed images during image upload.

How to Resize Images on the Storefront?¶

CS-Cart doesn’t show images in their original form. Product photos are shrinked in size after uploading to the online store. Then thumbnails are generated automatically from the uploaded images. You can set the target image size on different pages (catalog, shopping cart, product card, etc.) on the Settings → Thumbnails page.

How to Choose the Image Format?¶

There are three common file formats for publishing images on the Internet: JPEG, GIF, and PNG. Each of them affects the image differently:

• JPEG (.jpg) is the most common image format on the Internet. JPEG images can be considerably compressed without losing quality.
• GIF (.gif) images are lower quality than JPEG images. This format is used for more simplistic images, such as icons and decorative images. GIFs also support animation.
• PNG (.png) images are a popular alternative to GIF and JPEG . PNGs support many more colors than GIFs, and they don’t degrade over time with re-saves, like JPEGs do. But the file sizes can still be much larger than JPEG images.

Here are some tips to remember when choosing file types:

• In most cases in ecommerce, JPEG is the best image format.
• Never use GIFs for large images. It will greatly increase the file size.
• Be very careful with PNGs. PNG-24 full color image is over three times larger in file size than the PNG-8.
• You can use the Tinypng service to compress PNG images. For other formats, try Image Optimizer.

What Alternatives Are There to the Common Formats?¶

Nowadays Google recommends using WebP, JPEG 2000, JPEG XR formats for website optimization.

But these formats are not a complete replacement for JPEG and PNG since many browsers don’t fully support them. So you will always have to maintain image backups in commonly-used formats.

The CS-Cart Marketplace has add-ons that convert images to WebP and JPEG 2000 formats.

What Graphics Library Should I Use on My Server?¶

There are different graphics libraries on your server: Imagick, GD. The latter is available almost at any hosting. But we recommend Imagick, because it offers better performance and quality of the processed images.

What’s the Best Size for a Logo?¶

The logo size always depends on the purpose of the logo. But you should never upload too large images. For example, in the demo version of the CS-Cart store, the logo size is 176x34 px. On the storefront, the logo size is limited by the width of the block in which it is located.

The logo also appears in emails. By default, the size of the logo in the emails is not limited, so it is better to use an image of an appropriate size. But if necessary, you can limit the max size of the logo in the emails in Administration → Notifications → Snippets → Header. Replace this part of the code:

<img src = "{{logos.mail.image.image_path}}" alt = "{{company_data.company_name}}" width = "{{logos.mail.image.image_x}}" height = "{{logos. mail.image.image_y}} "/>

with:

<img src = "{{logos.mail.image.image_path}}" alt = "{{company_data.company_name}}" style = "max-width: 300px; max-height: 300px;" />

Then the maximum size of the logo in the emails will be 300x300 px.

What Else Can I Read on This Topic?¶

• Thumbnails
• How To: Manage Thumbnails
• How To: Change the Image Size on the Storefront
• How To: Add a Banner to the Homepage
• How To: Add a Banner to the Storefront
• How To: Change the Company Logo