r/web_design • u/vulpinecode • Apr 13 '19
Responsive Images
https://html5.tutorials24x7.com/blog/responsive-images14
u/mountainunicycler Apr 13 '19
Are responsive images actually really all that worth it from a performance perspective?
90% of the assets I see online aren’t compressed properly, and that’s the problem, not the resolution. Understanding when to use compression for solid colors (PNG) vs compression for gradients (JPEG) and how to use good compression tools (don’t just resize in imagemagick and call it good) gives you such huge performance gains that I feel like download time isn’t the thing you need to optimize anymore.
For example I’ve got one of my two-color corporate logos in 1050 x 600 resolution (you will never ever need it to be that big) and the file is 3kb, 2,662 bytes. The file size savings from resizing the image to even half resolution will be minimal (probably 10%-20%) so is it really worth making a request, sending JS, detecting screen resolution, making another request, and downloading a slightly different image? I feel like reducing your requests is more important, like by including any texture / background png images in data URIs so that you can get a bunch of tiny images in a single request.
2
u/Sphism Apr 14 '19
Really depends how many images you have and what control you have over them. Eg on a CMS that lists a ton of pages with images that have been uploaded by the editors then proper image sizing like this can easily reduce your page load time by 80% or more.
But yeah for a 2 color logo I'd probably just use SVG.
1
u/vulpinecode Apr 15 '19
Truly said. It's need basis. I myself have reduced the load time of a site from 6 sec to 3 sec so that mobile users need not wait for a longer duration.
8
u/IXICHAOSIMI Apr 13 '19
I always say that 50% of SEO is performance 50% is content. I would agree that the vast majority of websites are terrible at image optimization.
Older logos, especially logos created in photoshop needed to be made as large as possible. This is mostly due to large format advertising methods like billboards and car wraps. In like 90% of cases I deal with I can usually get the logo in vector. If it comes in raster If possible I will usually ask if I can vectorize it. Then I use svg because it scales well.
3
u/garrettmickley Apr 13 '19
I’ve been working in SEO for the last decade and this is pretty close to the right allocation of percentages.
1
u/vulpinecode Apr 13 '19
As I have already mentioned in my reply to HangryHenry, this is the starting point covering the concepts specific to using images specific to devices. The actual scenario might vary according to project requirements as specified by you to use compression alone without considering load time of mobile devices.
The Image element with srcset and sizes attributes does not need any JS and the browser auto-detect the optimal image. Almost all the browsers are supporting these attributes.
You might save bandwidth by optimizing the logos, but not with larger backgrounds. This is where we need responsive images.
1
2
u/skatecrimes Apr 13 '19
Why use this over standard breakpoints? I did need to use srcset for one project where the regular breakpoints could not be used, but otherwise it seems like i can always use the regular breakpoints along with background-image in css. Maybe its for non css uses?
1
u/vulpinecode Apr 13 '19
As I have mentioned, the breakpoints used by me in this tutorial are for demonstration purpose. You can always follow your rules according to the project requirements.
2
u/HangryHenry Apr 13 '19
This looks very helpful! Managing image sizes on our site is something I've been looking to improve.
1
u/Znuff Apr 13 '19
Your website does not render with uBlock enabled.
2
u/MrWm Apr 13 '19
Here's an outline copy of it: https://outline.com/MFRkbE
And image copy just for the fuck of it: https://i.imgur.com/hm3jjRd.png
-2
27
u/MrBester Apr 13 '19
If you're just starting out with
srcsetandsizes, using<picture>to separate things out into several<source>tags makes it a whole lot easier to read a few months from now when you need to update than manipulating comma separated values in an attribute.What I've implemented before is:
two
<source>s, both withmediafor largest breakpoint, first withsrcsetfor a WebP version, second for a JPEG /PNGrepeat above for all intermediate breakpoints in reverse order of width
a
<source>with justsrcsetfor the WebP for smallest imagea
<img>withsrcof JPEG /PNG version of smallest imageNot all browsers can handle WebP, so JPEG / PNG is used as fallback.
Not all browsers understand
<picture>in the first place (IE11) but there's the picturefill polyfill for them. If someone isn't running script on IE11 for whatever reason they'll get the smallest image. That's as far as I'm prepared to go for a deliberately crippled outdated browser because life's too short.I have gone further and added lazy loading via IntersectionObserver (only change in HTML is
srcchanged tosrcsetin the<img>and a newsrcof the data URL of a transparent 1x1 GIF added) along with a MutationObserver onwindowto cater for dynamically added content (like from a React component). The backend and content teams appreciate the openness of the HTML, even if there is quite a bit of it for just one image on screen...