Images: svg, responsive images, lazy loading about engineering-best-practices HOT 5 CLOSED

I've found lazy loading to be fraught with peril. It can be implemented well and give a performance boost, but it can also be a performance drag if the site is already very javascript heavy. There are situations where it can be tricky to get the desired effect. If we're going to recommend lazy loading, I'd like to see a more in depth coverage of the topic and methods to achieve this.

from engineering-best-practices.

Is a PNG fallback really necessary anymore? SVG is pretty widely supported outside of IE8.

from engineering-best-practices.

Zack, great work getting this conversation started.

IE8 hits EOL from Microsoft on Jan. 12, 2016. However, I’m working on a new reskin of a site that must support IE8, and I’ll be working on a new site whose audience has more IE usage than Chrome, and more IE8 usage than any other version. I hope we draw a hard line on this soon. In the meantime, as long as it is our policy to support this relic, we could at least mention any tools or markup patterns that will decrease development time.

Use SVG images whenever possible. They are resolution independent, easily styleable with CSS, and often smaller and clearer than other image formats.

When using SVGs as an icon system, combine them into a single sprite sheet that allows individual images be displayed with an ID.

When using SVGs and supporting Internet Explorer 8, provide a fallback, such as a PNG image.

I’ve avoided mentioning icon fonts, since they were a hack resolved by SVGs.

from engineering-best-practices.

Splitting this into #102, #103, and #104 to keep the discussions more focused.

from engineering-best-practices.

I don't want to recommend Jetpack Photon since I think we should remain agnostic there.

Would love to get @tddewey's feedback on all of this.

@zrothauser this is a great start!

from engineering-best-practices.