Images on your website should be crisp and clear to attract customers to your products. In order to do this you need to upload high-resolution images.
This blog article goes through some best practices for your images: What size and type of pictures should I upload to websites?
It is recommended that your image is twice the number of pixels of its intended width, this allows it to be a clear image for those using a Retina screen. It is better to have a larger image as when it is scaled on different screen sizes it will appear consistent to more viewers. To keep your site looking sharp, aim for images that are at least 2400 px wide — this helps them stay crisp even on Retina screens. For full-width backgrounds (stack backgrounds and carousels), you can upload images up to 4000 px wide for the best quality on large screens.
All image uploads on your Rocketspark website have a maximum file size of 20 MB.
If you are wanting to upload a video to your website. You are able to using wither Vimeo or Youtube. Please do note that the best dimensions for a video on Rocketspark is 1920px x 1080px.
Modern image formats
Rocketspark automatically serves your images in modern, optimised formats to visitors:
- WebP — Supported by 96% of browsers, typically 25–35% smaller than JPEG
- AVIF — Supported by 94% of browsers, even better compression than WebP
You don't need to upload WebP or AVIF files — just upload standard JPG or PNG images, and we'll automatically convert and serve the best format for each visitor's browser.
Note: Very large images (over 2500 px) may be served as WebP rather than AVIF due to encoding time constraints.
FAQs — Image sizing & usage on Rocketspark websites
Why doesn’t Rocketspark give exact image dimensions?
Because every Rocketspark website is responsive, meaning your images automatically resize to fit the screen they’re viewed on — from big desktop monitors to mobile phones. Fixed dimensions wouldn’t make sense, as each visitor’s device can display your site differently.
Does image size depend on screen size?
Yes! On a large desktop, your image might display close to its full width, while on mobile it’ll scale down to fit the smaller screen. Rocketspark’s platform takes care of this automatically, so your images always look balanced and proportionate across
So what image size should I upload?
Instead of aiming for a fixed size, upload large, high-quality images (at least 2400 px wide) to keep them looking crisp on all screens — especially high-resolution ones like Retina displays. Rocketspark will automatically scale the image down when needed.
- Full-width backgrounds (stack backgrounds, carousels): up to 4000 px wide for best quality on large screens
- Other images (picture blocks, galleries, columns): at least 2400 px wide is ideal
Will my image be cropped?
Possibly, depending on how you set it up (picture block only):
Fill: the image will fill the block completely, cropping some areas if necessary.
Fit: the full image will always show, even if that leaves some empty space around it.
You can preview how it looks on desktop and mobile to fine-tune positioning.
What image size should I upload for the best quality?
For crisp images that look great across all screens — especially high-resolution (Retina) ones — we recommend uploading full-width background images (stack backgrounds, carousels) at up to 4000 px wide, and other images (picture blocks, galleries, columns) at at least 2400 px wide. Also, aim for images that are about twice the pixel width of how they'll display on the page (so they look sharp even when scaled).
Which image formats are supported?
You can upload common formats such as JPG, JPEG, PNG, GIF, and also SVG for certain use-cases.
If you’re using an SVG file for logos or icons, Rocketspark supports this through the Picture Block.
Rocketspark automatically converts and serves your uploaded images in modern formats like WebP and AVIF for faster loading — no extra steps needed on your part.
How do I make sure the image looks good on mobile (and smaller screens)?
After you’ve added and edited your image:
Use the “Edit mobile design” option in the stack/column settings to check how it appears on mobile.
Adjust width, spacing or zoom as needed so the image doesn’t get cut awkwardly.
Tip: Always preview your changes on different screen sizes to ensure it looks solid