Image

Image

This article explains how image settings work and provides recommendations for optimizing your Acendy store.

Images On Different Devices

It is possible to upload three different images for three different devices:

• Standard: The image uploaded under "Standard" will be the main image. This is displayed on desktop (PC, Mac).
• Tablet: The image uploaded under "Tablet" will only be displayed when the browser being used has a size corresponding to a tablet.
• Mobile: The image uploaded under "Mobile" is only displayed when visiting the online store through a mobile device, or if you have such a small browser window that the resolution corresponds to a mobile device.

Reuse The Same Image

If you choose to upload an image under "Standard" only, both Tablet and Mobile will use the same image.

If you choose to upload both "Standard" and "Tablet," the image under "Tablet" will be used for mobile resolution.

Each resolution inherits the image from the resolution level above it.

Image Sizes

Example: You upload an image to mobile that is originally 1200px wide. When you load the website on mobile, you will have to load the entire image of 1200px, even if the resolution on mobile is only 400px.

It is therefore recommended to resize it to better fit the device, so that you reduce the size that needs to be loaded.

How to do it:

1. Upload the image you want to use.
2. Click "Edit size".
3. Enter the desired size, ending with pixel. Example: 400px

If you only want to change the width, for example, the height can be set to auto so that the proportions are preserved, although it is recommended to set a fixed size for both height and width.

Lazy Load

This setting ensures that images are not loaded until the section is displayed to visitors.

For example, if the image is a banner far down the website, lazy load should be active so that the first loading is faster and the image is only retrieved when visitors scroll down.

If the section and block with the image are placed at the very top, it is recommended to have this setting turned off so that the image loads when the page loads.

Link

Add a link if you want clicking on the image to lead to a specific page.

Alternative Text

Alternative text, or "alt-text," is a text description added to images on websites, in documents, and in social media. There are several important reasons to use alternative text on images:

• Accessibility:
  • For people with visual impairments or who use screen readers, alt-text is crucial for understanding the content of the images. The screen reader reads the alt-text, so that the user gets an understanding of what the image shows.
  • This helps make websites and digital content more accessible to everyone.
• Seo (search engine optimization):
  • Search engines cannot "see" images in the same way as humans. They use the alt-text to understand what the images contain.
  • By using relevant keywords in the alt-text, you can help your images be found in search results, especially in image search.
  • That is, you use alt-text to make the images searchable.
• Errors and missing images:
  • If an image is not displayed due to an error or slow internet connection, the alt-text will be displayed instead. This gives the user an indication of what the image was supposed to show.
• Universal design:
  • In Norway, universal design of Ict is required by law. This means that digital solutions must be accessible to everyone, regardless of ability. This is one of the reasons why alt-text is so important.

Advanced Settings

With custom classes, you can give the block its own Css class. This can then be used in custom Css to write your own code that changes the appearance.

Related Articles:

• Custom Css