Most of the time, WordPress handles image sizing for you.
Here’s how to know which situation you’re in and what to do about it.
Most images: use the size dropdown
When you add an image to a page or post using the default image block or the Kadence image block, you’ll see a size option in the block settings. Pick the size that fits your layout and you’re done. The Kadence block has more size options than the default block, but both will get the job done.
That’s it for most images. No extra steps needed.
Four exceptions that need a little more work
Slider Images
Your slider has a specific image size. Check your assets page for the exact dimensions, then follow the workflow below.
Header & Background Images
Header images are uploaded to each page as a featured image and are displayed at the top of the page. Background images are the ones that sit behind content or to the left or right in a page break section. A couple of things to know:
- WordPress automatically centers the crop. If the focal point of your image isn’t in the center, crop it yourself in Canva before uploading so you control what shows.
- For the smallest possible file size, compress it yourself before uploading. WordPress will compress it further on its way in, but starting with an already-compressed image gets you the best result.
- WordPress automatically creates a smaller version for mobile. You don’t have to do anything extra – but for background images if you want a different crop for mobile, you can upload one separately.
Fair warning: If your site was built before 2026 and you don’t see a mobile image option for background images, your theme may not support these features. Give us a call – it may be time for a theme update.
Logo
Getting your logo dimensions right requires measuring what’s on your live site, we use the Chrome Page Ruler extension for this. Then resize the logo to those dimensions and compress before uploading. If this feels too complicated – call us! We’re happy to help.
The workflow for exceptions:
Canva > Smush > Upload
When you do need to resize or compress an image yourself, here’s the process:
1. Resize the image to the correct dimensions.
Use Canva (or even Google Slides will work) to create a document at the correct dimensions.
Add and position your images in the properly sized document.
- Check your assets page (yourwebsite.com/assets) for home page slider and header image sizes
- Full width background images are typically 1900x600px
- Left or right background images are often 650x650px unless the page break is tall, then the image might be taller
- Mobile backgrounds are usually 600x190px
- Not sure how big the image is? Use the Chrome Page Ruler extension to measure it.
2. Export the file
- Photos: export as JPG and dial back the Quality slider
- Logos, graphics, or anything needing transparency: export as PNG and check “Compress file (lower quality)”
4. Check the file size
- Slider images = <150K
- On page images = <75K
- Header images = <120K
- Full width background images = <100K
- Left of right background images = <75K
5. If needed, run it through Squoosh to compress it further
- Drag and drop or upload the photo
- In the bottom right, select either MozJPG or WebP for maximum compression, depending on your image one will likely be smaller than the other naturally
- Adjust the quality slider of either file type and pull the blue and pink slider to review the compressed image preview
- Click download when you’re ready