Image Sizes

Updated on May 21, 2023

How to resize images

Jupiter X uses Beans Framework in the backbone and it has a great image resizing tool powered with a caching feature to ensure your website gets the best performance results. It means that it is having an Adaptive Image Resizing technology which shows resized images, retina ready, based on the screen sizes. So, in the mobile devices, the image source would be a smaller size of the original image and it loads pretty much quicker than the original image.

Although there are still some options in Customizer where images get resized.

Blog Single Page/Portfolio Single Page

You can only change the height of the image viewport in Customizer > Blog > Blog Single > Styles > Featured Image for blog and in Customizer > Portfolio > Portfolio Single > Styles > Featured Image for portfolio accordingly.

Blog Loop Thumbnails/Portfolio Loop Thumbnails

You can set the custom size of the image in Elementor > add or edit Posts element > open Settings menu > Image Size.

Note: If you want to create custom sizes for images, refer to this article.

Note: When you set Image Size to Custom under the Settings menu in an element settings, you have to regenerate thumbnails with the plugin Force Regenerate Thumbnails. We recommend to create custom settings via Jupiter X control panel and use them in the element settings.

Woocommerce Archive/Wooommerce Single Page

You can set images width for Woocommerce pages in Customizer > WooCommerce > Product Images

Where are the image files stored?

As soon as you create an image size, it will generate a new image file resized by the dimensions you assigned to it in the wp-content/uploads/ folder. However, the Adaptive Image Size technology of Jupiter X (based on Beans Framework) stores the images in wp-content/uploads/jupiterx/images/ folder. These images will be generated on the fly, so before anyone request for an image to load, it is not generated. However, it will be generated once you remove that image from that folder. Here is more info on how this process works.

You are free to remove all the images stored in wp-content/uploads/jupiterx/images/ folder and let it regenerate on the fly, but there is also a button that let you flush everything there by one click. In order to remove that folder, you simply need to click on Flush Images in Appearance > Settings.

Did this answer your question?