When I’m in the cell phone view in the editing panel, could I edit the images down to be smaller, so they’re only cell phone size, to reduce the loading time? Or will that also affect all the other windows and views on larger screens?
Or could I have much smaller versions of the images, just on cell phones that are different from the other size screens So they load faster. I’m trying to get a faster cell phone loading speed.
Also in the learn area, on the videos, will they be adding the rest of those other videos in the list? I really wanted to see that SEO video and others.
Yes you can load different sizes of the same image depending on your viewport size. If speed is a concern, this is a recommended practice.
This article has good info on how to optimize your website for speed
1 Like
That’s a great article. I’ve been reading it. Even the information about changing how you use the fonts. Sounds like a good thing to start doing.
One of the programs I use on Mac all the time for my viewing and finding photos and so on is called Apollo One I contacted the guy who makes it and he was getting ready to push out a new update and I asked him if he could add WebP compression to it. And he says yes, that would be really easy to do. So it’s going to be in the next update this should be out next week., I’ll be able to do WebP compressions on my images with in that program as well to create new sizes and so on.
If I’m understanding that right, I could drop the code in somewhere under my heading. I’m not quite sure where to drop it into in Bootstrap Studio to set it up so it shows the different size images for cell versus other devices.?
Do you know where I would place that code?
<!-- Mobile Image -->
<source media="(max-width: 600px)" srcset="https://codestitch.app/frontend/images/cabinets2-m.webp">
<!-- Desktop Image -->
<source media="(min-width: 601px)" srcset="https://codestitch.app/frontend/images/cabinets2.jpg">
<!-- Fallback Image -->
<img aria-hidden="true" loading="lazy" decoding="async" src="https://codestitch.app/frontend/images/cabinets2.jpg" alt="kitchen cabinets" width="1920" height="1280">