5 ms·

There's too much filler in this article for me to understand what's being conveyed.

marvindanig 7y ago
No wonder scrolling is bad for us! Without line-tracking, scrolling kinda culls our attention span, patience and retention—all in one stroke. ;-) I found the article very nicely written and do not think there was filler in there.
seph-reed 7y ago
Use svgs* * when you can
- hn_throwaway_99 7y ago
  I just went through a project where we deliberately converted all SVGs to PNGs (using an image CDN where we could request different transformed resolutions) and it resulted in MUCH better performance, both in tools like PageSpeed and in perceived performance, for 2 major reasons: 1. The PNGs tended to be MUCH smaller than the SVGs, and I think you'll find this likely whenever you have even a very minorly complicated graphic (the article points this out). 2. There is an issue on Android devices where scrolling was absolutely awful when there were lots of large SVGs on the page. This completely went away when we switched to PNGs. I think the best recommendation is to store the initial image either as an SVG or very high resolution raster image, but then use an on-the-fly transforming CDN so you can experiment and easily get the right image (size and format) where necessary.
  - Animats 7y ago
    SVG is an incredibly inefficient way to represent a line drawing,with all the coordinates written out as text, and not as deltas from the previous one. Flash's internal representation is much tighter, but not cool any more.
    - Filligree 7y ago
      The parent is correct. At some point we gained a fear of binary formats, but binary formats are still the only way to transfer data efficiently. Yes, flash had other problems. No, this doesn't make their point false.
      - deafcalculus 7y ago
        Is that really true with gzipping?
        gnud 7y ago
        Browsers still need to unzip and parse the SVG, and store the DOM representation of it.
    - mkl 7y ago
      SVG can do relative coordinates fine: "m 10 10" (m dx dy) rather than "M 10 10" (M x y). But yes, they're text until you compress them.
      - tripzilch 7y ago
        Yes, but unless you round the floating point digits, you're going to use about as much bytes.
  - social_quotient 7y ago
    Any examples you mind sharing?
- throwaway_bad 7y ago
  One case where you probably can't is for image uploads. You might think it would be nice to allow a user to upload a svg for their avatar or something. But SVG can embed javascript which can lead to XSS: https://hackerone.com/reports/148853 https://hackerone.com/reports/148853
  - pekim 7y ago
    That's certainly something to be considered with user uploaded svg images. However it's reasonably straightforward to parse an svg and remove any script elements.
  - microcolonel 7y ago
    You can safely use XSLT to subset SVG, and (for example) limit complexity. Scripts in SVGs do not load in img tags either.
jhncls 7y ago
The article is geared towards front end engineers, clarifying how and when to compress images and which formats to choose. It stresses the importance of the image context more than the technicalities of the image. This context can also lead to the decision to choose other types of image, such as choosing a simplified drawing instead of a photo when the image context is icon-like.

No wonder scrolling is bad for us! Without line-tracking, scrolling kinda culls our attention span, patience and retention—all in one stroke. ;-) I found the article very nicely written and do not think there was filler in there.

seph-reed 7y ago

Use svgs* * when you can

hn_throwaway_99 7y ago
I just went through a project where we deliberately converted all SVGs to PNGs (using an image CDN where we could request different transformed resolutions) and it resulted in MUCH better performance, both in tools like PageSpeed and in perceived performance, for 2 major reasons: 1. The PNGs tended to be MUCH smaller than the SVGs, and I think you'll find this likely whenever you have even a very minorly complicated graphic (the article points this out). 2. There is an issue on Android devices where scrolling was absolutely awful when there were lots of large SVGs on the page. This completely went away when we switched to PNGs. I think the best recommendation is to store the initial image either as an SVG or very high resolution raster image, but then use an on-the-fly transforming CDN so you can experiment and easily get the right image (size and format) where necessary.
- Animats 7y ago
  SVG is an incredibly inefficient way to represent a line drawing,with all the coordinates written out as text, and not as deltas from the previous one. Flash's internal representation is much tighter, but not cool any more.
  - Filligree 7y ago
    The parent is correct. At some point we gained a fear of binary formats, but binary formats are still the only way to transfer data efficiently. Yes, flash had other problems. No, this doesn't make their point false.
    - deafcalculus 7y ago
      Is that really true with gzipping?
      - gnud 7y ago
        Browsers still need to unzip and parse the SVG, and store the DOM representation of it.
  - mkl 7y ago
    SVG can do relative coordinates fine: "m 10 10" (m dx dy) rather than "M 10 10" (M x y). But yes, they're text until you compress them.
    - tripzilch 7y ago
      Yes, but unless you round the floating point digits, you're going to use about as much bytes.
- social_quotient 7y ago
  Any examples you mind sharing?
throwaway_bad 7y ago
One case where you probably can't is for image uploads. You might think it would be nice to allow a user to upload a svg for their avatar or something. But SVG can embed javascript which can lead to XSS: https://hackerone.com/reports/148853 https://hackerone.com/reports/148853
- pekim 7y ago
  That's certainly something to be considered with user uploaded svg images. However it's reasonably straightforward to parse an svg and remove any script elements.
- microcolonel 7y ago
  You can safely use XSLT to subset SVG, and (for example) limit complexity. Scripts in SVGs do not load in img tags either.

jhncls 7y ago

The article is geared towards front end engineers, clarifying how and when to compress images and which formats to choose. It stresses the importance of the image context more than the technicalities of the image. This context can also lead to the decision to choose other types of image, such as choosing a simplified drawing instead of a photo when the image context is icon-like.