I have a masthead background image on my web page that only about 1/3 of the image is within the bounds to be seen on the page.
Is there any way to load just the slice of the image I need instead of the entire image loading? Google's page speed insights says my image is the main reason my home page is taking so long to load the first time around.
CSS:
header.masthead {
position: relative;
background-color: #343a40;
background: url("../images/showcase.jpg") no-repeat center center;
background-size: cover;
padding-top: 8rem;
padding-bottom: 8rem;
}
HTML:
<header class="masthead">
<div class="overlay"></div>
<div class="container">
<div class="row text-center">
<div class="col-xl-9 mx-auto">
<h1 class="text-light" >Lorem</h1>
</div>
<div class="row text-center">
<div class="col-md-12">
<button type="submit" class="btn btn-main">Ipsum</button>
</div>
</div>
</div>
</div>
Is there any way to load just the slice of the image I need instead of the entire image loading?
Short answer: no.
If you're only displaying 1/3 of your image and that applies to all devices, cropping the image is probably your best bet.
If you want to fine-tune further, consider optimizing your image size and using srcset to offer multiple alternatives to the client browser.
Depending on what platform you run your site, there might be a way to stream / send just a part of the image file to the browser, but that might result in browsers reading it as invalid / incomplete.
In other cases, such as css crop or resize, the image is still loaded as whole and Speed Insights see it as such, and will know that it it larger then necessary, or only a part is visible.
What keeps you from cropping the image itself, to keep just the visible part?
Related
I know this question must sound familiar, and I can see loads of people asking similar questions but none of the answers are working for me. Everyone has a fairly specific need. I want to understand the basics and I can work out the rest.
I have a simple angular/bootstrap web page. I have made a carousel component and I want to ensure the user always sees the entire image. I have seen lots of answers which suggest img-fluid, max-with, max-height etc., but nothing's working for me. It's sort-of working for landscape images but not for portrait images. I need it to always show the whole image regardless.
Here is the basic app component:
<app-nav-menu ></app-nav-menu>
<div style="padding:10px">
<router-outlet></router-outlet>
</div>
The router-outlet goes to this "about-us" component:
<div class="row">
<div class="col">
<app-carousel [slides]="slides"></app-carousel>
</div>
</div>
And the carousel component looks like this:
<div class="container">
<div class="row">
<div class="col">
<div>
<img [src]="slide.src">
<p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
{{slide.text}}
</p>
</div>
</div>
</div>
</div>
As you can see it's really simple. Right now there is no styling other than the little bit in the p tag which is to center the text in the image. This is not working properly now, because I think I've lost the container whilst trying out different solutions. I don't like CSS because I'm not used to them and I like to see the styles where they belong so I can understand better. But feel free to suggest a CSS solution if necessary.
So the question is simple: how can I make the image always fit the screen and not spill downwards?
Thanks
Did you try the object-fit property?
object-fit: cover;
If your image aspect ration is good, it shows the entire image.
object-fit: contain:
This shows the entire image, but if the aspect ratio is not good, it shows blank spaces around the image.
Thanks SureN.
I tried both of these but they didn't work. Perhaps they would do if I knew how to use them better.
In the end the following more or less worked for me, in the img tag:
style="max-width: 100%; max-height: 100vh; display: block; margin-left: auto; margin-right: auto;"
It's not perfect but it'll do for now!
I'm having a problem with the main baner image on my website.test website click here use right click inspect element then check the "toggle device toolbar" or use ctrl+shift+m ....
as you will see the main image is repeating itself in mobile mode:
the code:
html:
<div class="block-slideshow__slide-image block-slideshow__slide-image--desktop image" style="background-image: url('images/slides/slide-1-full.jpg')"></div>
<div class="block-slideshow__slide-image block-slideshow__slide-image--mobile image" style="background-image: url('images/slides/slide-1-mobile.jpg')"></div>
tried using css adding this class .image and using this
.image{
background-size: cover;
background-repeat:no-repeat;
}
but did not worked, the image looks ugly and blurry... all i want and need is my image is to look like the first image (stretched), but without repeating itself in the background....
if i remove "background-size: cover;" the stretched image appears in the center( this is what i want since i need that small image centered with a white background surrounding it, any factible approach for it?
edit: as i stated above i used this solution:
Prevent Background Repeating
but what i want and need is the image to look centered and small since occuppying
and using background: cover looks very ugly and i dont know how to make the image fit correctly in the mobile screen without looking blurry and ugly!
how can i solve this? thank you!
The problem is not to do with background images repeating.
What has happened is that there is still a full size image in the div just above the start of the mobile-sized slideshow.
See the below code which shows you the position of the div which has an inline style giving it the larger background image.
<div class="owl-item active" style="width: 330px;">
<a class="block-slideshow__slide" href="#">
THE NEXT LINE IS THE PROBLEM. THERE IS A BACKGROUND IMAGE STILL WHICH IS LARGER THAN THE MOBILE SLIDE SHOW'S HEIGHT AND IT IS STILL THERE WHEN YOU GO TO MOBILE SIZING
<div class="block-slideshow__slide-image block-slideshow__slide-image--desktop" style="background-image: url('images/slides/slide-1-full.jpg')"></div>
<div class="block-slideshow__slide-image block-slideshow__slide-image--mobile" style="background-image: url('images/slides/slide-1-mobile.jpg');"></div>
<div class="block-slideshow__slide-content">
<div class="block-slideshow__slide-title">Corporacion Venus C.A</div>
<div class="block-slideshow__slide-text">Rif J-29419176-2</div>
<div class="block-slideshow__slide-button"><span class="btn btn-primary btn-lg">Comprar ahora</span></div>
</div>
I'm probably being idiotic here. I've been trying to get a jpeg image to load in the background of a section element as part of a bootstrap course I'm doing (pretty new to this web dev stuff). The image is loading fine in the firefox inspector - it shows no errors and displays the image if I hover over the link - but it just isn't displaying on the page.
Here's the relevant code:
<secton id="cover">
<div id="cover-caption">
<div class="container">
<div class="col-sm-10 sm-offset-1"></div>
<h1>Generic website title</h1>
</div>
</div>
</secton>
css:
#cover{
background: url("Assets/Photos/Blanket.jpg") center center no-repeat;
background-size: cover;
text-align: center;
height: 100%;
}
The path and name of the image is definitely correct, so it's not that.
Any ideas?
Fixed it! As expected, immediately after posting.
Apparently setting the height to 100% was the issue. Changing it to 100vmin made all the difference.
Baby steps...
I'm creating a website for a company and their photographer asks me what dimensions the pictures on the website are.
I work with CSS Bootstrap and grid system like:
<div class="col-md-12">
<div class="fh5co-grid" style="background-image: url(images/xxxx-1-2.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3 style="height:5%;"> “text"”</h3>
</div>
</a>
</div>
</div>
So on the server the images had a size of 474 x 698 pixels, but the grid system crops the image a bit?
What size/dimension does the grid system use?
Thanks a lot
I think all you need is some css to make your images adopt to a screen of the device. A good practice, that I usually do, is to place this line of code inside my css.
img {
max-width: 100%;
}
Make sure it's at top of your first imported document, so you can override it with out any trouble in case you need some other image width.
PS. This rule should be in bootstrap, so check how you adding bootstrap to your webpage.
What you can do is add a css for this background image.
.fh5co-grid{
background-image: url(images/xxxx-1-2.jpg);
background-size: cover;
background-repeat: no-repeat;
}
If you want to make sure this code will get the full screen width, make sure your html col-lg-12 is wrapped on a container-fluid.
I'm using Boostrap and I've set a background image to an empty div using the following markup and CSS:
<section id="process">
<div class="container"> <img src="img/production.png" id="processicon" class="center-block"> </div>
<!--end container-->
<div id="processbg"></div>
<div class="container">
<h2 class="text-center">materials and construction</h2>
<p class="text-center">The carbon neutral and responsibly sourced bamboo contributes to over 70% of the skis construction. The combined strength to weight ratio and consistency enables us to simplify and take a streamline approach to the skis construction.</p>
<p class="text-center">The search for the highest quality materials from around the globe has always been an essential role since day one.</p>
</div>
<!--end container-->
<img src="img/bigski.jpg" class="center-block bigski">
<div class="container text-center">
<h2 class="text-center more">read more</h2>
</div>
<!--end container-->
</section>
<!--end process-->
And:
#processbg {
background: url(../img/process.jpg) no-repeat center 110% fixed;
height: 602px;
background-size: 100%;
}
Everything looks good on desktops and tablets, but when viewed on mobile, the image gets really small and leaves big gaps around it. This makes sense, because the height of the empty div is always 602 px and the photo scales down when the viewport gets smaller. Is there a way to make the image non-responsive or is there some other solution to this?
Here's a link to the actual web page as well: http://skiest.ragne.me/. You can click the PROCESS link in the navigation and it takes you to the mentioned photo.
Thank you for your help.
I think you are looking for background-size: cover; which will:
Scale the background image to be as large as possible so that the
background area is completely covered by the background image. Some
parts of the background image may not be in view within the background
positioning area
source w3schools.com
Change your CSS to the following and see if that works for you.
#processbg {
background: url(../img/process.jpg) no-repeat center 110% fixed;
height: 602px;
background-size: cover;
}
Alternatively you could just remove the background-size declaration and see if that gives you the desired result. The default is auto which should leave the image at its normal size.