Thumbnails and Adaptive Sizing Explained
Understand how Vehica serves scaled thumbnails instead of your original photos, how to pick the size used on listing cards, and how to register a new size when the built-in ratios do not suit your images.
3 minute read
The Vehica WordPress theme features an advanced thumbnail system, a crucial component for enhancing website speed and SEO. The theme also supports adaptive sizing, which adjusts image sizes to the visitor's device — better quality on Retina screens, for example. Lazy loading then makes sure images load only as they come into view, speeding up your site further.
This system replaces heavy original images with efficiently scaled versions, a practice that has become standard in modern web design. Components such as listing cards and user avatars load thumbnails, not the original images.
Configuring thumbnail selection for ad cards
In Vehica Panel > Basic Setup > Elementor Site Settings > Ad Card, you can select which thumbnail is loaded for the standard card and for the row card.
The theme adapts to the ratio of the image you choose. Whether you pick a square thumbnail of 150x150 or 600x600, it always uses an image of that ratio — square, in this case — whether it is bigger or smaller. The visitor's browser then picks the file that best fits the space available, be that 150x150, 600x600 or another size.
Will result in ratio 1:1
Card image height can still vary, because of the layout around it. In the Featured Listings widget below, the height of the big card on the left depends on the height of the column on the right, so that image will not use an exact square thumbnail. Other widgets take the same approach where the design requires it.
Customizing thumbnail sizes
By default, Vehica ships with the most popular ratios to choose from. We do not register more, because every extra size slows the upload process down and takes up more server space. You are free to modify the recommended sizes and add new ones for your own requirements. If your photos are unusual — a construction crane, say, which is typically tall — the standard sizes may cut off the top and bottom, and registering a size that suits your niche is the answer.
Start by installing this plugin on your WordPress: https://wordpress.org/plugins/simple-image-sizes/
After installing it, activate the plugin and open its settings:
Click Add a new size of thumbnail and fill in the new size:
Click Validate and then save the changes.
Go back to the plugin settings, scroll to the bottom and hit this button:
Once the plugin has finished, every image on your site is available in the new size.
All that is left is to choose the new thumbnail in your Vehica Panel > Basic Setup > Thumbnails, as explained above.
Image resizing tools
For bulk resizing, software such as IrfanView for Windows is handy: it is easy to use and effective on large batches. That matters if you are the only person uploading photos and your files are huge — around 9 MB each, say. IrfanView can scale every image down to a web resolution such as 1920x1080 and cap the file size at, for example, 200 KB, which gives WordPress a sensible source to generate thumbnails from. Remember that a 9 MB upload still produces substantial thumbnails: the thumbnail module works on dimensions, not on file size. To optimise the original file, read more about IrfanView on their site: https://www.irfanview.com
Regenerating thumbnails
To apply new sizes to images that were uploaded earlier, use a popular plugin for regenerating thumbnails. It updates all existing images to the new sizes, keeping the look of your site consistent. A helpful one is the Regenerate Thumbnails plugin: https://wordpress.org/plugins/regenerate-thumbnails/
More options
Ask the people who build Vehica
We answer by email from support@tangiblewp.com. With Premium Support, we also fix your site when something breaks.
We can also run your site for you, or build a new one.
Was this guide helpful?