Background hotspot image not displayed correctly

Submitted by Teaming on Wed, 05/21/2025 - 12:29
Forums: 
Bugs in content types

I am trying to use a hotspot for my interactive book but all the ones I upload end up looking blurry and distorted, How can I solve this?

Thanks in advance!

Attachments: 
Image icon Captura-hotspot.JPG
Content types: 
Image Hotspots
BV52's picture

BV52

Wed, 05/21/2025 - 18:24

Hi Teaming,

The most likely cause is that the image you are using has low resolution. The image gets stretch which causes it to look blurry. 

As you can see in this content the image above is clearer and the one below is blurry. The first image's resolution is 1472 x 877 while the 2nd image's resolution is 368 x 219.

https://bv-demo.h5p.com/content/1292592874259987969

-BV

 

Teaming

Thu, 05/22/2025 - 10:12

Thanks for the reply! Could you please indicate what is the recommended resolution and proportion?

BV52's picture

BV52

Thu, 05/22/2025 - 21:02

Hi Teaming,

The workaround you found by adding a background is useful. However I would suggest not adding anything below the image. The best way to use this workaround is to add the background on the sides of the image. Here is an example of this: https://bv-demo.h5p.com/content/1292038185103008789

A better more permanent solution is to use an image with higher resolutions. The image that you uploaded here: https://h5p.org/comment/53750#comment-53750 is about 350 x 500 which is very low in today's standards. I would suggest using an image with a resolution that is at least above 700 x 700. As for proportions there is nothing specific since depending on the image that you are uploading proportions may vary.

-BV

Teaming

Mon, 05/26/2025 - 15:34

I have trouble finding a way for lumi to interpret my image correctly. The base image format is 1422x 817 pixels, which is higher than way you mention, and still gets displayed in a strange way. Again, how can I solve this? Proportionas are not respected upon upload and it is a real issue for my type of images.

Attachments: 
Image icon Captura-error.JPG
BV52's picture

BV52

Tue, 05/27/2025 - 01:42

Hi Teaming,

Can you please share a sample content.

-BV

Teaming

Wed, 05/28/2025 - 12:44

Hi,

Thanks for all your help. Here is my sample content for this: Content | Lumi

I also attach the Lumi page as Hp5 download and the image I am uploading. As you can see, the enf result is less than satisfactory and I cannot seem to manage a good result adding margins.

H5P file: 
Binary Data Cómo optimizar tu Grupo Teaming.h5p
Attachments: 
Image icon Captura-dravet-campos1.JPG