Everything about Responsive

One photograph has to be a wide header, a square thumbnail and a tall story card. Cropping loses the edges, stretching lies about proportions, letterboxing buys space it never uses. Seam carving spends the quiet parts of the frame instead: what a seam is, why the search needs a table, and exactly where the method falls apart.

Your hero becomes a 3.2:1 strip on desktop and a portrait crop on phones, and object-fit: cover decides what survives. The formula behind the crop, the CSS that steers it, and a simulator that shows all four breakpoints before you publish.

A 4032 pixel phone photograph in a 760 pixel column makes the browser download 12.2 million pixels to paint about 430,000 of them. What that costs in bytes and in memory, how to read the display width your theme actually uses, where the WordPress 2560 pixel safety net stops, and a browser tool that does the resizing before the upload.

Lorem ipsum has a longest word of thirteen letters and no umlauts at all, so a layout tested with it is tested with the easiest text it will ever hold. What placeholder text should actually prove, and a generator that produces it.

A slot measured in CSS pixels needs a file measured in image pixels, and on a Retina screen the second number is twice the first. Here is how to measure the slot, choose a ratio without losing half the photograph, and check that WordPress will actually generate the size you need.

One upload becomes eight or more files. Here is what WordPress actually creates, why some sizes are missing, and what to do about it, with numbers measured on a real site.

Blurry WordPress images are not one problem but six, and each leaves a different fingerprint. Work out which symptom you have before you change anything, because most of the fixes do nothing for most of the causes.

Square, story, banner, avatar, email header. Six shapes and one idea, which is two hours of dragging things around if you do it the obvious way.

Change the logo, the photo and the button color and a bad layout usually stays bad, because the fault was in the gaps rather than the parts.

WordPress writes the srcset attribute for you and gets it right. Then it writes the sizes attribute, which is a guess about a layout core has never seen, and that is where the bandwidth goes.