Skip to content
RADIONICATOOLS AND PRACTICAL LESSONS SR

LESSON / IMAGE FIT

Prepare images for the place they will occupy.

Start from the rendered size, crop for the subject, then encode. A single original should not be sent unchanged to every part of a website.

Put a project on the bench
01

Match dimensions to layout

Use a wider source for a page hero than for a card. Keep a larger original offline, but serve a file close to the largest size the layout displays.

  • About 1920 px for a full-width photograph
  • About 1200 px for an article or service image
  • About 600 px for a thumbnail
02

Choose the format by content

Use WebP or JPEG for photographs. Use PNG when transparency or exact graphic edges justify the extra bytes. SVG is suitable for logos and diagrams that are truly vector artwork.

03

Verify before publishing

Read small text and inspect important product detail, check the final file size, and add intrinsic width and height. Open the page on a phone connection to confirm that the image does not delay the useful content.