Automatic image optimization
Questions:
- How do I upload images?
Description:
The TYRIOS online shop system automatically creates optimised images from the raw material provided. It is therefore advisable to upload images to the media library in as high a resolution as possible. Today's server configurations generally allow images to be uploaded directly from the digital camera without any problems.
Image provision
Standard sizes are stored in the system to ensure a consistent appearance across all products and pages. TYRIOS creates images for these standard sizes from the raw material in a multi-stage process. This process determines
- how high an image should be
- how wide an image should be
- whether and which background colour should be used if the height or width deviates from the default.
In the standard design, an image in the item detail view has a resolution of
- 800 pixels wide
- 600 pixel height
- #FFFFF (white) as background colour
TYRIOS always creates images in this size. If you have stored larger images in the media library, the images will be scaled down accordingly. This does not result in any loss of quality, but the loading speed is significantly increased. However, if the stored image is smaller, it must be scaled up. This results in blurred and pixelated images. You should therefore make sure that you upload high-resolution images. You will see that bad images are marked with an exclamation mark in the media management.
Image optimisation in the editor
You also have access to the media library in the Editor. However, the system is not automatically able to provide images in the optimum size because the possible uses are not known in advance. However, you can define optimally calculated images yourself.
When you select an image from the media image library, the URL for displaying the image is generated automatically. This URL has the following structure:
/media/[ID]-[filename]-[width]-[height]-[version].png
you can set the height and width yourself by changing the URL. The image is always calculated in relation to the actual height and width. The calculated image is therefore the maximum size you want. If you also specify a background colour, the image will be exactly the desired size:
/media/[ID]-[filename]-[width]-[height]-[colour in HEX format]-[version].png
Note in particular in the editor that you can integrate images responsively if desired. To do this, use the CSS class "img-responsive" so that the image automatically adapts to the available width.