Low resolution images in Sliders

When using the Sliders extension and viewing a listing you may experience low resolution images. There are a couple reasons for this and you have a couple of solutions to solve this.

Step 1: Determine the source image size.

Right click on the image and select inspect element in your browser. (Note: it's helpful to disable the auto play slideshow option)

Copy the image URL and place it in your browser. Then remove the size from the URL to get the original image size.

Results in a nice and big original image.

Step 2: If you have a nice big image.

As you have a nice and big image, you now need to determine the slider container size to generate the optimal size image for the carousel. If its too low then the generated image will be small like the -446x310 example above and the image will stretch to fill the space causing a pixelated image.

So again inspect the slider and find the container.

The container is 1019 x 528 in size, so make sure the slider settings are at least this size as the extension auto-calculates the optimal image size.

This site had the settings too small, creating a pixelated image.

Once the size was set to 1019 and 528 the image quality was greatly improved.

Also adjust the thumbnail size if needed in a similar way and the end result is nice and crisp images.

Step 2: If you have small source images.

Re-configure the slider container to a different aspect to factor in small image sizes. Or upload larger source images.