Videos

Modern image delivery is one of the biggest contributors to page weight, layout instability, and perceived performance, yet many ExpressionEngine sites still rely on habits rather than informed decisions when generating image output. This session offers a practical guide to optimising images in EE, covering the behaviour of the `img` and `picture` elements, `srcset` and `sizes`, modern image formats, and the often-overlooked role CSS plays through rules such as `object-fit`, `object-position`, aspect-ratio control, and layout sizing. It will examine when CSS is the right tool, when responsive image markup is needed instead, and when editorial art direction calls for genuinely different source images rather than just different crop behaviour.

The talk will also compare the main ways of producing image markup in ExpressionEngine, including native EE file usage, JCOGS Image Pro, JCOGS Image Pro Field, Assets, and manual template construction. That comparison will look at ease of implementation, output quality, storage implications, and speed, with benchmark examples prepared as part of the session. Attendees will leave with a clearer framework for choosing formats such as JPEG, PNG, WebP, and AVIF, deciding when to rely on CSS, when to reach for `srcset` or `picture`, and how to build faster, more maintainable image output in real EE projects.