For Singapore interior design firms, architecture studios, aesthetic clinics, F&B groups, and e-commerce retailers, high-resolution photography is essential for proving quality. However, uploading raw 6MB camera files named DSC_0492.JPG directly into WordPress is the single most common cause of failed Core Web Vitals and poor mobile search rankings.
Whether you are uploading fresh assets from your monthly corporate or product photoshoot or running a WordPress technical SEO audit, apply these eight Image SEO rules to every visual on your site.
1. Rename raw camera/Canva filenames to descriptive hyphenated slugs before upload
Why it matters: Google explicitly uses the image filename (url-slug.webp) as a primary signal for understanding what an image depicts. Filenames like WhatsApp-Image-2026-10-12.jpeg or Untitled-design-4.png waste that signal completely.
The rule: Rename every file with a concise, lowercase, hyphen-separated description before uploading to WordPress (e.g., commercial-office-interior-design-paya-lebar.webp).
2. Serve modern WebP (or AVIF) formats under strict byte budgets
Why it matters: WebP delivers equivalent visual sharpness at 30% to 65% smaller file sizes than legacy JPEG or uncompressed PNG files, dramatically reducing mobile load times on 4G/5G connections.
The rule: Keep full-width hero images under 150–200 KB, in-article editorial graphics under 120 KB, and product grid thumbnails under 50 KB.
3. Resize pixel dimensions to match the actual CSS container (no 4000px uploads)
Why it matters: Uploading a 4500x3000px studio photograph into a 720px blog column forces the browser to download 13.5 megapixels of data and scale it down on the user’s phone CPU.
The rule: Export featured blog graphics at 1200x800 or 1440x960, square product images at 1000x1000, and ensure WordPress srcset responsive attributes are intact.
4. Write accurate, non-stuffed alt text for accessibility and Google Images
Why it matters: Screen readers rely on alt attributes to describe images to visually impaired users, and search engines use alt text to connect visual context with the surrounding heading. Leaving alt="" empty on informative graphics—or stuffing it with 20 comma-separated keywords—hurts accessibility and SEO.
The rule: Describe what is visibly shown and its functional context in one natural 10-to-18-word sentence.
5. Set explicit width and height attributes to prevent Cumulative Layout Shift (CLS)
Why it matters: When an <img> tag lacks explicit dimensions, the mobile browser initially renders the text with zero height for the image—and then violently jumps the text down the screen half a second later when the image finishes downloading.
The rule: Always output width and height attributes (or CSS aspect-ratio) on every image and featured graphic.
6. Eager-load (fetchpriority="high") the hero/featured image; lazy-load below the fold
Why it matters: Lazy-loading (loading="lazy") your very first above-the-fold hero or featured image delays Largest Contentful Paint (LCP) because the browser waits until layout finishes before requesting the image. Conversely, loading 25 portfolio images at the bottom of the page all at once chokes bandwidth.
The rule: Eager-load the single above-the-fold LCP image, and apply loading="lazy" to all images below the fold.
7. Keep editorial illustrations clean and text-free (put captions in HTML)
Why it matters: Baking tiny paragraphs of text inside raster PNG/JPEG images makes that text unreadable on 375px smartphone screens, unindexable by search engines, and prone to spelling/cropping errors across social preview cards.
The rule: Use clean, high-craft visual diagrams or photography for the image file itself, and place structured explanations inside HTML <figcaption> tags and HTML comparison tables.
8. Verify Open Graph (og:image) dimensions for WhatsApp and LinkedIn sharing
Why it matters: In Singapore, B2B buyers and consumers constantly share website links inside WhatsApp groups and LinkedIn messages. If a post lacks a valid og:image (3:2 or 1.91:1 landscape ratio), the shared link looks broken or blank.
The rule: Ensure every published post and service page has a dedicated featured_media image populated in Yoast Open Graph metadata.
Website Image SEO & Performance Standard Table
Enforce these technical specifications across your content and web teams:
| Image Placement | Target Dimensions | Max File Size Budget | Loading & Attribute Rule |
|---|---|---|---|
| Hero / Featured Post Graphic | 1440 x 960 px (3:2) or 1200 x 630 px | ≤ 150–200 KB (WebP/PNG) | Eager load (fetchpriority="high"); set og:image |
| In-Article / Case Study Photo | 1200 x 800 px | ≤ 100–120 KB (WebP) | loading="lazy" + descriptive alt & <figcaption> |
| E-Commerce Product Gallery | 1000 x 1000 px (1:1) | ≤ 75–90 KB (WebP) | Eager load Slide 1; lazy-load Slides 2–7 |
| Logos, Icons & Diagrams | Vector SVG | ≤ 15 KB (Minified SVG) | Crisp at all DPIs; explicit width/height |
Combine studio visual craft with fast technical SEO
At W Creates Digital, our in-house photography and creative team works directly alongside our web and SEO engineers so every visual on your site loads fast and ranks cleanly. Contact our Singapore team to optimise your website’s visual performance.