The Vehica WordPress theme features an advanced thumbnail system, a crucial component for enhancing website speed and SEO. Our theme also supports adaptive sizing, which adjusts image sizes based on the user's device, enhancing the browsing experience, such as providing better quality images for Retina screens. Additionally, lazy loading ensures images load only as they come into view, further speeding up your site.
This system replaces the use of heavy, original images with efficiently scaled versions, adhering to a practice that's become a standard in modern web design. Components like Listing Cards, User Avatars, and similar items will load thumbnails, not original images.
Configuring Thumbnail Selection for Ad Cards
In Vehica Panel > Basic Setup > Elementor Site Settings > Ad Card, you have the option to select which thumbnail is loaded for both the regular card and the row card.
Please note that the theme automatically adapts to the image ratio. Whether you choose a square thumbnail of 150x150 or 600x600, it will always use an image of the specified ratio (in this case, square), regardless of whether it's bigger or smaller. The user's browser then selects the image that best fits the available space, whether it's 150x150, 600x600, etc.
Will result in ratio 1:1
It's important to remember that card image height can vary due to different factors. For example, in the widget below "Featured Listings," the height of the left big listing card image depends on the height of the right part. Therefore, the left card image won't use an exact square thumbnail. Similarly, other widgets may adopt this approach where the design requires it.
Customizing Thumbnail Sizes:
By default, Vehica comes with the most popular ratios to choose from. We do not register more sizes as it will slow down the upload process and take up more server space. However, you have the flexibility to modify these recommended sizes and add new ones for your specific requirements. For instance, if you have very specific images, like "Construction crane", which are usually tall, standard sizes may cut off the top and bottom of the photo. In this case, you may register a new size that better suits your specific niche content.
We need to install this plugin on our WordPress: https://wordpress.org/plugins/simple-image-sizes/
After installation active the plugin and go to the settings:
Click add a new size of thumbnail:
Click Validate and then save changes.
Go back to the plugin settings and scroll to the bottom and hit button:
When the plugin it’s finished working you have all images on your page with the new size.
You just need to choose the new thumbnail in your Vehica Panel > Basic Setup > Thumbnails as explain above in this article.
Image Resizing Tools
For bulk resizing, software like IrfanView for Windows is quite handy. It's user-friendly and effective for managing large batches of images. This is particularly useful if you are the only person uploading photos and have many large images, such as those around 9MB and of a huge size. IrfanView allows you to scale all images to web resolution, for example, 1920x1080, and set a maximum space limit, such as 200KB, to create a suitable source for WordPress to generate thumbnails from. Please note, if you upload a large photo like 9MB, the thumbnails can still be quite substantial, as the thumbnail module focuses on dimensions, not on the optimization of image size (disk space). For optimizing the initial file, learn more about IrfanView and its features on their website: https://www.irfanview.com
Regenerating Thumbnails
If you need to apply new sizes to previously uploaded images, use a popular plugin for regenerating thumbnails. This plugin updates all existing images to the new sizes, ensuring a consistent look across your site. A helpful resource for this is the Regenerate Thumbnails plugin - https://wordpress.org/plugins/regenerate-thumbnails/
More options
If you need more options, you will need to rebuild the theme's PHP files and its CSS code. This will require custom work that goes beyond the default functionality and is not covered. The solution we have created is the golden standard, and usually, making changes to it will have a negative impact on your website's speed. If you require additional options, you will need to take responsibility for customization, as it goes beyond the theme's scope.