What Images Are Best for My Online Store?¶
To ensure faster page loading and correct image display, we recommend the following:
- Uploaded image size — 300x300 to 600x600 px depending on where the image is used;
- Dimensions — max. 3,000 px on the longest side;
- File size — max. 1-2 MB; otherwise, there may be issues with resizing the image in the Admin panel.
Large images require significant amount of server storage space, which may increase hosting fees. Also, large images increase page load time, which may cause users to leave the page before it finishes loading. Additional load also occurs when generating thumbnails based on high-resolution images, which negatively affects server performance. For this reason, there are a number of restrictions on image parameters.
Limitation of a file size:
In the Admin panel, go to Settings → General → Thumbnails. In the Image file size field, specify the maximum size of the uploaded image in megabytes. If the field is left empty, the image size will be limited by the server settings.
In the php.ini file, use the corresponding directives post_max_size and upload_max_filesize.
Please note: if these values differ, the smallest one will be applied.
Limitation of an image resolution: use the max_uploaded_image_dimension tweak in the config.local.php file. This tweak checks that the uploaded image does not exceed the value specified in the tweak for any of its dimensions.
$config['tweaks']['max_uploaded_image_dimension'] = 6000; // Maximum allowed width and height of an image in pixels
Hint
- We recommend using web-optimized images in your store. You can find many optimization addons on the CS-Cart Marketplace, for example, Image Optimizer with CDN Features. If you use CS-Cart cloud hosting, you can optimize images in your hosting account.
- You don’t have to use your own online store to check edited pictures. A free online demo version of a CS-Cart store is always available.
To optimize the performance of your store when working with images (especially if your store contains a large number of images) you can use the lazy_thumbnail tweak. It separates the page generation process from the thumbnail (image icon) generation process on that page. This means that the page is generated and displayed to the user faster, while image processing happens separately.
When using this tweak, consider the following:
- Not all third-party themes work correctly with this tweak (for example, issues may occur with UniTheme).
- All thumbnails will start generating simultaneously. As a result:
- On a server with a powerful multi-core processor, this speeds up performance because resources are used in parallel and image processing completes faster.
- On a low-performance server, generating a large number of images at the same time may create significant load. In this case, either do not enable the tweak or limit the number of images per product.
How to Get the Correct Size of Image?¶
There are numerous online tools you can use for image editing, such as PicMonkey, Pixlr, or 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.
Important
We recommend to specify only one of the thumbnail dimensions (width or height) for each of the thumbnails to keep an orderly look of the product list.
How to Choose the Image Format?¶
There are four common file formats for publishing images on the Internet: JPEG, GIF, PNG and WebP. Each of them affects the image differently:
| Format | Description | Advantages | Limitations / Notes |
|---|---|---|---|
| JPEG (.jpg) | The most common image format on the Internet | Can be significantly compressed without noticeable quality loss | Image quality degrades with repeated re-saving |
| GIF (.gif) | Lower-quality format compared to JPEG | Suitable for simple images (thumbnails, decorative elements); supports animation | Limited color range; lower image quality compared to JPEG |
| PNG (.png) | Popular alternative to JPEG and GIF | Supports more colors than GIF; does not lose quality after multiple re-saves | File sizes are often larger than JPEG |
| WebP (.webp) | Modern raster graphics format developed by Google | Can be a replacement for JPEG, PNG, and GIF | Requires proper PHP configuration with WebP support enabled in GD or Imagick |
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.
Questions & Feedback
Have any questions that weren't answered here? Need help with solving a problem in your online store? Want to report a bug in our software? Find out how to contact us.