# Make components available only on specific devices **URL:** \ **Category:** Help\ **Created:** [November 4, 2021, 2:09pm UTC](https://talk.jekyllrb.com/t/make-components-available-only-on-specific-devices/6641 "2021-11-04T14:09:55Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![JackieGable](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jackiegable/32/4300_2.png) [@JackieGable](https://talk.jekyllrb.com/u/JackieGable)\ **Post date:** [November 4, 2021, 2:09pm UTC](https://talk.jekyllrb.com/t/make-components-available-only-on-specific-devices/6641/1 "2021-11-04T14:09:55Z")
To save bandwidth, there are certain components (like a large photo album) that I don’t want to be downloaded when someone visits my site from their phone. Is there a way to create a condition in Jekyll, that would make the photo album available only if the viewing device is a laptop or desktop? I know I can use ‘display:hidden’ in css but that will still download the content even when it’s viewed on a phone ---
**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [November 4, 2021, 6:45pm UTC](https://talk.jekyllrb.com/t/make-components-available-only-on-specific-devices/6641/2 "2021-11-04T18:45:14Z")
Display hidden might not even work. It might be invisible but load anyway. `display: none` is what I use But it might not be safe. You might want to avoid rendering the element altogether using Jekyll. * * * Going from a high level… Avoiding loading large images on mobile is a good idea. There are a ton of articles I’m sure on image loading. Including some of csstricks sites. One option is to not break the experience with missing images but rather create small and medium size versions of images. Then based on device size the browser will load the right image. Look up `srcset` attribute for img tag. It’s a modern html thing. If you inspect element on Instagram when on a particular image page, you’ll see about 6 urls squeezed into that one attribute, covering various screen sizes. * * * I think you should use a Jekyll plugin which handles both the creation of downsized images for you and small sizes as well as the creating of srcset in html > **[GitHub - rbuchberger/jekyll\_picture\_tag: Easy responsive images for Jekyll.](https://github.com/rbuchberger/jekyll_picture_tag)** > > Easy responsive images for Jekyll. Contribute to rbuchberger/jekyll\_picture\_tag development by creating an account on GitHub. * * * Alternatively for a simpler approach, you can say you want one size (say 400px) for your image width and given percent compression, and use that on desktop _and_ mobile. > **[GitHub - MichaelCurrin/jekyll-resize: Simple image resizing filter for Jekyll...](https://github.com/MichaelCurrin/jekyll-resize)** > > Simple image resizing filter for Jekyll 3 and 4 🖼 🤏 🔬 - GitHub - MichaelCurrin/jekyll-resize: Simple image resizing filter for Jekyll 3 and 4 🖼 🤏 🔬 That plugin will resize the image and give you appropriate html to load it. See Usage in the docs. For that repo, i have a fork for Jekyll 4 or you can use the original which has no movement for a long time I also linked to some similar plugins there in docs. ---
**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [November 4, 2021, 6:52pm UTC](https://talk.jekyllrb.com/t/make-components-available-only-on-specific-devices/6641/3 "2021-11-04T18:52:16Z")
Another comment on your original question Remember that Jekyll makes _static_ output. There is only one my-page.html and that is seen by all devices. Jekyll can’t give different versions of the same page, like if you used php or Python or Node (which would be overkill if all you need is some image handling on a static site). So… that leaves using JS or HTML or CSS. What you could do on the frontend is have images disabled by default e.g. use some hack to make images render as ` **Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [November 4, 2021, 6:53pm UTC](https://talk.jekyllrb.com/t/make-components-available-only-on-specific-devices/6641/4 "2021-11-04T18:53:00Z") Another tip is move your site to netlify hosting and tick the box to enable image compression. No plugins needed. ---
**Author:** ![michaelbach](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelbach/32/2151_2.png) [@michaelbach](https://talk.jekyllrb.com/u/michaelbach)\ **Post date:** [November 5, 2021, 6:05am UTC](https://talk.jekyllrb.com/t/make-components-available-only-on-specific-devices/6641/5 "2021-11-05T06:05:38Z")
The “lazy” attribute to images also helps. ---
**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [November 5, 2021, 7:09am UTC](https://talk.jekyllrb.com/t/make-components-available-only-on-specific-devices/6641/6 "2021-11-05T07:09:03Z")
Indeed. It won’t reduce the image size But it will make the initial page load faster as images are only loaded on the network once they are scrolled into view. ```auto ``` ---
**Author:** ![michaelbach](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelbach/32/2151_2.png) [@michaelbach](https://talk.jekyllrb.com/u/michaelbach)\ **Post date:** [November 5, 2021, 7:57am UTC](https://talk.jekyllrb.com/t/make-components-available-only-on-specific-devices/6641/7 "2021-11-05T07:57:47Z")
How nice that we agree! I always thought the syntax is ``. One more thing: the width/height attributes should be set, otherwise the layout may shift when the image is loaded with delay. ---
**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [November 5, 2021, 7:52pm UTC](https://talk.jekyllrb.com/t/make-components-available-only-on-specific-devices/6641/8 "2021-11-05T19:52:29Z")
Oops yes you are right. I made a cheatsheet which covers srcset and loading attributes > **[Images](https://michaelcurrin.github.io/dev-cheatsheets/cheatsheets/web/html/images.html)** > > A collection of code snippets and CLI guides for quick and easy reference while coding ---
**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [November 5, 2021, 7:55pm UTC](https://talk.jekyllrb.com/t/make-components-available-only-on-specific-devices/6641/9 "2021-11-05T19:55:43Z")
And if know the width of the image then set that as suggested above. In pixels ```auto ``` Then that space will be reserved so text will appear after it. You can set width and let height be auto If you set height but not width then the image will look warped when the screen width is small ---
**Author:** ![michaelbach](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelbach/32/2151_2.png) [@michaelbach](https://talk.jekyllrb.com/u/michaelbach)\ **Post date:** [November 5, 2021, 8:14pm UTC](https://talk.jekyllrb.com/t/make-components-available-only-on-specific-devices/6641/10 "2021-11-05T20:14:05Z")
Nice! Here [https://caniuse.com/?search=lazy](https://caniuse.com/?search=lazy) I note that Safari does not implement `lazy` yet, though it _looked_ like it worked to me. It can be allowed in the `Develop` menu in the long list of `Experimental features`, which is –luckily– alphabetically sorted. Here’s to hoping it will be standard soon, like in FireFox, Chrome etc. I use `lazy` quite extensively and did notice a substantial LightHouse speed-up. ---
**Author:** ![michaelbach](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelbach/32/2151_2.png) [@michaelbach](https://talk.jekyllrb.com/u/michaelbach)\ **Post date:** [November 5, 2021, 8:18pm UTC](https://talk.jekyllrb.com/t/make-components-available-only-on-specific-devices/6641/11 "2021-11-05T20:18:26Z")
A question: If I close the img tag with `>` rather than with `/>`, is there a difference? Probably yes, but the browsers don’t seem to care. ---
**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [November 6, 2021, 12:27pm UTC](https://talk.jekyllrb.com/t/make-components-available-only-on-specific-devices/6641/12 "2021-11-06T12:27:01Z")
It might depend on which version of safari. No, in my testing you can use `` or `
` as self closing tags without `/` but I usually add it anyway. It _does_ matter in React when writing JSX. Only the slash format is valid and the other format without gives a compilation error. ---
**Author:** ![michaelbach](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelbach/32/2151_2.png) [@michaelbach](https://talk.jekyllrb.com/u/michaelbach)\ **Post date:** [November 7, 2021, 6:46am UTC](https://talk.jekyllrb.com/t/make-components-available-only-on-specific-devices/6641/13 "2021-11-07T06:46:41Z")
Ah, thank you. So I’ll make sure to add the slash.