Image Problems
Blurry, cropped, oversized or slow-loading images.
Nearly every image problem is one of three things: the wrong size is being loaded, the aspect ratio is cropping, or thumbnails were never regenerated after a setting changed.
Changing an image setting does not resize images you've already uploaded. After changing an Image Size or Aspect Ratio, you must regenerate your thumbnails, otherwise nothing visibly changes and it looks like the setting did nothing.
A plugin such as Regenerate Thumbnails does this, and most hosts offer it too.
Images are blurry
The area is displaying an image larger than the size it actually loads.
Each area has its own Image Size setting Blog, portfolio, search results, product navigation, the lightbox. Find the one for the area you're looking at.
The fix:
Raise Image Size for that area, or set a Custom Image Size
Regenerate your thumbnails
If the original upload is small, no setting will help, replace the image with a larger one
Retina screens make this obvious where a standard screen doesn't, so test on the device that showed the problem.
Images are cropped oddly, stretched, or the wrong shape
That's Aspect Ratio, not Image Size. It's a separate setting on the same screens, and it's per device.
Set Aspect Ratio to Original to stop cropping entirely and let each image keep its own shape.
Or choose a ratio and let the theme crop everything consistently, which usually looks tidier in a grid.
Check tablet and mobile separately. A ratio that works on desktop can crop badly on a phone.
Responsive SettingsEverything became oversized after an update
If font sizes and images both scaled up together, the images aren't the cause, the layout is.
Check Customize -> Styling -> Layout -> Block Spacing and the container width against the values you had before.
If you never changed them, an upgrade from Kalium 3 re-based some spacing values.
Problems After UpdatingImages fill the whole column instead of their set size
Check your custom CSS for width rules on image containers. This is usually a custom rule interacting with the theme's own image sizing.
If you have no custom CSS doing that, update the theme, sizing fixes have shipped in several releases.
The lightbox is slow to open
It's loading full-size originals. A photo straight from a phone can be several megabytes.
Customize -> General -> Lightbox Settings -> Main Image Change it from Full Size to Large.
The difference is dramatic and the quality loss is usually invisible on screen.
LightboxImage quality looks worse than the file I uploaded
WordPress recompresses uploads by default. Kalium lets you control how much.
Customize -> Performance -> JPEG Image Quality Raise it, then regenerate your thumbnails.
This affects new uploads and regenerated sizes only, which is why the regeneration step matters.
Images don't load at all
Open a broken image in a new tab and look at its address. If it contains an old or staging domain, the problem is the address. Run a search-and-replace across the database for the old domain.
Clear all caches, including your CDN.
Check the file exists in Media in your admin.
Images are missing after importing a starter site
Media is imported last and is the slowest step, so a stall leaves you with content and no pictures.
Starter Site Import ProblemsGetting images right from the start
Upload at a reasonable size. 2000px on the longest edge is plenty for most sites. Straight-from-camera files are far larger than any screen needs.
Use consistent shapes within a grid, set an aspect ratio and let the theme crop.
Regenerate thumbnails after any image setting change. It's the step everyone forgets.
Compress before uploading, or use an optimization plugin. It's the single biggest thing you can do for page speed.
Last updated