Newbie questions about images and css links

[dafaher]

Good morning community, I'm sorry to bother you guys. I'm making my first site with Bootstrap and I have a couple of questions about the right way to do things:

1) In the code I have 2 links that appear to contain exactly the same thing. Should I keep both or can I remove either of them to save requests?

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin=" anonymous">

<link rel="stylesheet" href="./css/bootstrap.min.css">

2) I also included a few lines of custom code in this file:

<link rel="stylesheet" href="./css/main.css">

Is that correct or should I directly edit the bootstrap.min.css file?

3) PageSpeed ​​Insights says I should "display images with appropriate size to save mobile data and reduce loading time." Does this mean that I should upload images of different resolutions for different devices? I thought that the "img-fluid" class saved us precisely that work. If so, is there any example code to do that?

Thanks you so very much for any advice or suggestion!

[VyvaHart]

Hi @dafaher

1. You don't need both Bootstrap CSS links. Pick one
   I suggest to choose this one:
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

2. Keep your custom CSS in main.css instead of messing with bootstrap.min.css. This keeps things clean and easier to update: <link rel="stylesheet" href="./css/main.css">

3. img-fluid makes images responsive but doesn't optimize them for different devices. Use srcset to serve different image sizes based on screen size:
   <img src="image-small.jpg" srcset="image-small.jpg 600w, image-medium.jpg 1200w, image-large.jpg 1800w" sizes="(max-width: 600px) 600px, (max-width: 1200px) 1200px, 1800px" class="img-fluid" alt="description">
   This way, smaller screens get smaller images, saving data and loading faster

Good Luck!

[dafaher]

Thank you very much @VyvaHart for taking the time to read me and for your prompt response, from the bottom of my heart. I'm new to Bootstrap and there are things I don't quite understand.

Out of curiosity, is it better to add external links (https://cdn.jsdelivr.net/...) than internal links (./css/bootstrap.min.css)?

The tags for html are very interesting, thank you very much, I wasn't aware of them either. Best regards and again, thank you very much!

[VyvaHart]

There is no specific answer which is better. A hybrid approach often works well, use external links for common libraries and internal links while hosting custom or sensitive files locally

[dafaher]

@VyvaHart thank you so so much for your answer. I already marked your answer as correct, thank you very much again. Have a nice day!