Thanks for the information. Your time and effort is appreciated. I’m off to give this a try and will post back to let you know how I get on.
Hello, Paul. Following your advice I’ve added the code from your most recent Codepen to position my rounded image in the header of my page but it doesn’t appear in the same position as it does in your Codepen. It’s lower down on the right-hand side instead of tighter up in the right-hand corner. Take a look https//cleardirectionhypnotherapy.co.uk
I think the HTML in your latest Codepen is different from my actual page because the Codepen HTML is the old version before you added the olay-container.
Here is the original HTML before you added the olay-container
<!-- Header -->
<header class="bg-primary py-5 mb-5 my-header">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-lg-12">
<div class="image-wrap image-wrap2">
<img class="round" src="https://picsum.photos/id/1000/200/200" width="200" height="200" alt="round Pic">
</div>
<h1 class="display-4 text-white mt-5 mb-2">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="img-credit">Lorem ipsum dolor sit amet</div>
</div>
</div>
</div>
</header>
and here is my current HTML
<header class="bg-primary py-5 mb-5 my-header">
<div class="olay-container container">
<div class="row align-items-center">
<div class="col-lg-12">
<div class="image-wrap image-wrap2">
<img class="round" src="https://picsum.photos/id/1000/200/200" width="200" height="200" alt="round Pic">
</div>
<h1 class="display-4 text-white mb-2">Lorem ipsum dolor</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="img-credit">Lorem ipsum dolor sit amet</div>
</div>
</div>
</div>
</header>
Please can you tell me whether I’ve inserted the HTML for the rounded image in the correct place in my existing code and whether it’s possible for us to position the image closer to the top right-hand corner of the header text area, and which styling controls this?
I’ve included all of this CSS in my stylesheet.
Is this all necessary and correct or have I duplicated some?
.image-wrap {
width: 100px;
aspect-ratio: 1 /1;
margin: 1rem;
position:absolute;
right:8px;
top:20px;
}
.image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
border: 2px solid red;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
}
.r2 {
width: 20%;
}
.r3 {
width: 9%;
}
.sidebar .image-wrap,
.image-wrap2 {
width: 100px;
aspect-ratio: 1 /1;
position: static;
margin: 0;
}
.image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
border: 2px solid red;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
}
.sidebar {
display: flex;
flex-direction: column;
}
.sidebar:after {
content: "";
flex: 1 0 0;
background: red;
width: 1px;
margin: 1rem auto 1rem;
}
header .image-wrap2 {
position: static;
float: right;
margin: 2.5rem 0 0 1rem;
}
@media screen and (max-width: 992px) {
.sidebar .image-wrap,
header .image-wrap {
width: 60px;
}
}
Progression has been made with my contact form. The form is up on a simple test page here: https://cleardirectionhypnotherapy.co.uk/recaptcha/index.html.
I need to alter the form around, remove the Bootstrapious text and position it properly, but it does work and sends messages successfully.
My question is, in your opinion, is it best to embed the form into my actual contact page so it follows the same style as the rest of my site, or to keep it on a page of its own with a plain background?
I’ve already tried to embed it into my actual page but ran into all kinds of problems outlined below.
After reading through, is there a simple way for me to get this embedded and working, or should I just stick with a link to a separate form?
My website runs on Bootstrap 4.3.1 and jquery 3.4.1
The contact form runs on Bootstrap 4.0.0 and jquery 3.2.1
I’ve copied and pasted the HTML for the contact form into my own contact page, together with links to dependencies.
I am pretty sure I shouldn’t ever be running more than one version of Bootstrap on the same page, or jquery for that matter, but for the purposes of experimentation I left them unaltered to begin with and the contact form appears to display exactly as is intended.
Further experimentation reveals that I can comment out the link to Bootstrap 4.0.0 engine, and also to jquery 3.2.1 without any noticeable effects, but perhaps this may affect the form’s ability to be able to send messages.
However, with both Bootstrap CSS versions 4.3.1 for my website and 4.0.0 for the contact form running together at the same time my page nav turns blue instead of white.
I commented out the link to Bootstrap 4.0.0 CSS for the contact form and my page nav returns back to its intended colour, but then the contact form firstname, lastname, email, and phone fields reposition themselves so as not to align properly with the lower message field.
Here is a link to the contact form running both version 4.3.1 and 4.0.0 Bootstrap CSS at the same time you’ll notice that the form displays properly but my page nav is the wrong colour.
https://cleardirectionhypnotherapy.co.uk/contact.html
Here is a link to the contact form running just version 4.3.1 for my website with the correct colour page nav but the misaligned form fields.
Just reduce the top margin here:
header .image-wrap2 {
position: static;
float: right;
margin: 2.5rem 0 0 1rem;
}
Change the 2.5rem to zero (or whatever you want).
I would hazard a guess that the contact form will work with the newer versions ok so I would test with the current version of bootstrap and jquery. You can’t mix them on the same page anyway and you don’t want to force your users to download new versions of both on a different page as that defeats the point of them being cached on first page load.
As far as the look goes then it seems that apart from the odd margin it will look the same.
You would of course need to test function as you can’t do that from my codepen.
Very Importantly I nothe that in your custom css you have this rule.
.row {
display: flex;
margin: 0 0 0 2px;
}
You must never directly change the bootstrap grid rules as that breaks all pages. The row class is an integral part of bootstrap and used everywhere and by all third parties. It has default -15px left and right margins which are integral to the design as they match the 15px padding on the container and on the col classes. All three …container,.row and ,col work together to for the bootstrap grid. Changing anyone breaks the other two unless you change each in the same way,
I suggest you go back and read how the grid works again so you don’t make that mistake again. 
As I mentioned before if you really need to over-ride one of the bootstrap rules you should add your own class and then use that class to modify the bootstrap rules. Never change any of the bootstrap classes themselves or you risk breaking all other pages and any third party code also.
Thanks for the info. Following your advice, I’ll make the alterations you suggest to the CSS for my rounded image. I’ll also test the contact form with the most recent versions of Bootstrap and jquery.
As I mentioned yesterday, when running my form with the latest versions of Bootstrap and jquery, and when looking at https://cleardirectionhypnotherapy.co.uk/contact2.html the alignment of the forms fields is not quite the same as when using the versions of Bootstrap and jquery that came with the form. Does this matter, and is there a way for me to make all fields of my form align and appear equal in terms of left and right-hand margins as in https://cleardirectionhypnotherapy.co.uk/contact.html.
The part about row margins having been altered from their Bootstrap default, I must have done this but I can’t remember when or why.
Again, following your advice, is it then correct for me to change
.row {
display: flex;
margin: 0 0 0 2px;
}
back to
.row {
display: flex;
margin: -15px 0 0 -15px;
}
Is this correct?
Most of my previous post was addressing that point lol
The alignment is out because you changed the value of the margins on .row ;). Look at my example as I reinstated the bootstrap margins.
No
You changed the top and left margins not the left and right margins.
Anyway all you need to do is remove the margin rule you added and let the original rule in the bootstrap css take over.
You should then create a new class for the element that you only wanted a 2px margin and use that for that element as required.
Once again, thank you. I’ll make the changes and report back to let you know how I get on. Enjoy your evening
1 Like
Hello Paul. Apologies for the long delay in my reporting back. I hope you are doing okay.
I’d like to ask another question and am happy to post it in the appropriate section of the forums if you’d prefer, but thought it worth asking you first.
Running Page Speed on my index test page is giving me a first contentful paint speed of 2.8 for mobile with the largest contentful paint element being my header block with its image of a beach and sea. I’ve experimented and optimized this image further to around 240kb but with a noticeable loss of quality and only very minimal improvement in speed, and based upon the loss of image quality I reverted back to the existing image.
I was wondering whether improvement could be made by either swapping out my main header image for a progressive loading image only I’m not sure whether this should be jpg or png and the best method to use to save my image as interlaced.
Also, serving a smaller version of the same image for mobile, how to alter my existing stylesheet by adding what I guess would be conditional comments to specify a smaller version image for smaller screens, and what size I should save a smaller image.
There are other improvements I can make by asynchronously loading JS and minimising CSS, etc. but wanted to focus on the header issue first of all.
Any advice would be appreciated.
https://tobias.is/blogging/even-faster-images-using-http2-and-progressive-jpegs/
Meant to add this which I found while Googling. Would any of these techniques help to speed up FCP?
You could just add a media query at say about max-width 800px and then specify the new smaller image in that media query. (Similar to how you change anything else in the media queries.) The only draw back to that is people like me who continually open and close their browser window and I will get 2 images loaded if they cross the breakpoint. Its not really a problem because most people don’t do that and on mobile you only have the one window size anyway.
There are many image optimising tools around the web and they can perform much better than your standard paint packages so its worth having a google for those.
The webp image format seems to offer best compression format and is now widely supported.
Image optimisation isn’t really my area so you may be better off starting a new thread if the above doesn’t help.
.
Hi Paul, and thanks for your reply.
Would it be possible for you to get me started by giving me an example of how to alter my existing styling to make this happen? https://cleardirectionhypnotherapy.co.uk
Here is the relevant section:
.my-header {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.1) 0%,
rgba(0, 0, 0, 0.1) 100%
),
url("../img/miscellaneous/huttoft/optimized/webp/289KB/1200758.webp");
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
After some Googling I’ve read that it’s possible to speed up FCP by using ‘image-set()’ https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set and, as you have already pointed out, making a smaller or set of smaller images available for different-sized screens and letting the browser choose which one is most appropriate depending on the device being used.
Having never tried this I’m not entirely sure how to include this into my existing code without breaking it.
How many images should I make available, in what dimensions, and what file names?
How can I test to be certain the browser is choosing the most appropriate image depending on the device being used?
I’ve read that making my image progressive is more likely to improve performance than interlaced and I’ve found this online converter.
https://coding.tools/progressive-jpeg
Any advice appreciated.
Oh, forgot to include that following Google’s advice I’ve saved all of my images as WEBP, having first run them through TinyJPG, but I’m guessing that to use a progressive image this will need to be a JPG?
I was wondering whether altering my existing code to something like this (based on what I’ve been reading in the Mozilla article) would be on the right track. although I don’t think I need the .avif, just 2 or more versions of the same image saved as .jpg or .webp but in differing sizes.
.my-header {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.1) 0%,
rgba(0, 0, 0, 0.1) 100%
),
url("../img/miscellaneous/huttoft/optimized/webp/289KB/1200758.webp");
background-image: image-set(
"large-balloons.avif" type("image/avif"),
"large-balloons.jpg" type("image/jpeg")
);
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
You would just duplicate that .my-header section but place it in a max-width media query making sure to change the image name to your new image.
I’m on a mobile at the moment so not easy to cut and paste code
I was going to mention image-set but I think that’s probably overkill for your use case. I also have doubts that you may end up serving higher quality images to mobile devices because mobile screens are much more dense than desktops. In effect the opposite of what you wanted. I haven’t done enough testing on it to make my mind up.
I’m still of the opinion that simpler is better. A simple media query and swapping for a smaller image for small screens is an easier option and allows for art direction in that the smaller image can be different to the large image.
Thanks, Paul.
Following your suggestions and knowing very little about media queries or how to write them, I’ve been reading this guide https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
and if my understanding is correct I’d write something like
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}
then adjust as appropriate and add my styling
@media screen and (max-width: 800px) {
.my-header {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.1) 0%,
rgba(0, 0, 0, 0.1) 100%
),
url("../img/miscellaneous/huttoft/optimized/webp/smaller-image.webp");
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
}
My actual stylesheet should end up looking like the following example, with my original code block followed by my new media query code block.
.my-header {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.1) 0%,
rgba(0, 0, 0, 0.1) 100%
),
url("../img/miscellaneous/huttoft/optimized/webp/image.webp");
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
@media screen and (max-width: 800px) {
.my-header {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.1) 0%,
rgba(0, 0, 0, 0.1) 100%
),
url("../img/miscellaneous/huttoft/optimized/webp/smaller-image.webp");
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
}
Is this correct?
Is it worth me repeating this same media query block again for max-width 480, max-width 1200, and max-width 1920, each with an appropriately sized image?
When sizing my images, should I save them at exactly 480, 800, 1200, and 1920px widths?
I’ve saved my existing images as WEBP but as the header image is the largest in file size would making this a progressive JPG improve page loading speed and FCP?
Yes that looks correct but more importantly did you test it and see if it worked?
I would advise against that approach because a user may change a device from landscape to portrait (and vice versa) and you then hit them with another download resulting in greater overhead than if you had loaded the larger image to start with.
Although most people don’t close their browser windows too small on a desktop they will still tweak the widths to fit other applications and once again you force them to download multiple images instead of one.
I rarely find I need more than one image apart from the hero. I create an image for a medium size screen and then allow it to stretch and shrink as required. With careful optimisation and good selection of image you can nearly always satisfy most cases with one image.
Simpler is better but always crush the image size with a dedicated image crusher. Very rarely will I use anything over 300k.
Also remember that a mobile width may be 375px or thereabouts and if you create an image at 375 px then it will look bad on double density as most devices are these days (or more). The image would need to be double the 375px width and then scaled smaller in css.
Lastly you should really be editing images from their original source files and not just cropping a copied image
Thanks, Paul.
Thanks for all of the information. The points you make are duly noted.
Testing this was my next question because I’m not sure how to test whether the smaller image is being used when appropriate. How do I check?
I have the original bitmap image which is roughly 5.10mb and so can crop and optimize from this.
As previously, what sizes should I aim to save the larger and smaller images as, and would the progressive jpg be an option to speed up downloading?
For testing you could use two different images of different things and it will be obvious. However its easier to use developer tools and look at the image that is being used in the css panel.
If you are using two images then I would expect that your smaller image would be a more appropriate section of the scene anyway rather than just squeezing the whole large image down smaller.
That would be trial and error process and seeing what is the best compromise for you. For the large screen image I would look at something around 1500px - 1800px wide that can be stretched in css 2500px for large screens without looking to bad and can scale down to 1000px also. I would rarely just choose the largest image size and scale down.
For smaller screens you could then have an image about 700px wide that can scale all the way down to zero and up to the 1000px mark… Its really trial and error and compromise.
Unfortunately I see background images mainly as a distraction and I will use a lower quality image than most people as its not that important to me as long as it looks ok.
I don’t really like images that start as low quality and then get better as they download. I’d rather wait for the real image. But then again that’s just me
Once again, thank you, Paul.
That’s more than enough for me to be getting on with and it all makes sense, so I’ll go and have an experiment and will report back when I’ve got a bit further.
Until then, all good wishes, H.
1 Like
Hello, Paul.
As promised, here’s an update on how I’ve been getting on with the changes we recently discussed.
As far as the main header image is concerned, I’ve taken my original image, cropped it down in size, and saved it in two sizes, larger for desktop and smaller for mobile. I then optimized them using TinyJPG.
My larger image is coming in at 299 KB, and the smaller one is at 120 KB.
The smaller image is saved as a progressive jpg and also as a standard jpg.
I’m currently pointing to the progressive jpg.
I’ve added the media query to my CSS so the smaller image loads on smaller screens and tested this by right-clicking on the image both in large and small screen sizes, opening in a new tab, saving to my desktop, opening in Photoshop and checking dimensions. The media query is working as intended.
I’ve run Pagespeed against my page and it’s returning a first contentful paint speed for desktop of 0.8 and for mobile 2.0
Here are the screenshots for each test
https://cleardirectionhypnotherapy.co.uk/24.07.23/desktop.png
https://cleardirectionhypnotherapy.co.uk/24.07.23/mobile.png
The Pagespeed checker is reporting bootstrap.min.css and bootstrap.js as causing a delay in FCP.
It suggests asyncing or deferring these to speed up FCP but I think this will cause my page to behave unpredictably while loading. Is this true?
The checker is also reporting Google as delaying loading, and I’m guessing this is the search bar script. This script is being called in on page load, so I’m guessing we can’t async or defer this.
I have experimented with cropping my smaller image down more and also reducing its quality and its resulting file size but this doesn’t seem to have had very much impact on FCP speed so I’ve left it as it is for now.
Perhaps worth mentioning is that my server is based in a USA data centre and the hosts say that I might achieve higher speeds if I were to pay more by moving to the UK data centre instead.
In your opinion, should I continue to try to improve FCP speed for mobile and which (if any) of the above would you focus on when trying to do this?
Moving on to other matters.
The other issue I have is with my cookie bar.
As you can see from the cookie bar HTML below, there are a couple of inline styles that centre the text and also the accept button.
I’d like to move this inline styling to my cookie bar external stylesheet, but try as I may I have been unable to work out how to do this without breaking the centering of its text and button.
Please would you take a look and if possible provide an example of how I would alter the cookie bar external CSS to include the two inline styles so these can then be removed from my HTML page?
<!-- Cookiealert Bar -->
<div class="alert alert-dismissible text-center cookiealert" role="alert">
<div class="cookiealert-container">
<div class="cookies" style="margin-left:55px;"><b>Do you like cookies?</b> 🍪 This website uses cookies to improve your experience. </div><a href="https://cookiesandyou.com/" target="_blank">More</a> <button type="button" class="btn btn-primary btn-sm acceptcookies" aria-label="Close" style="margin:4px;">I agree</button>
</div>
</div>
/*
* Bootstrap Cookie Alert by Wruczek
* https://github.com/Wruczek/Bootstrap-Cookie-Alert
* Released under MIT license
*/
.cookiealert {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
margin: 0 !important;
z-index: 999;
opacity: 0;
border-radius: 0;
transform: translateY(100%);
transition: all 500ms ease-out;
color: #ecf0f1;
background: #212327 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEECAIAAAAd4J55AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUIyQzg0Q0RDQ0ExMTFFNjkyMDJGQkMzNjQ3OUEyMTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUIyQzg0Q0VDQ0ExMTFFNjkyMDJGQkMzNjQ3OUEyMTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QjJDODRDQkNDQTExMUU2OTIwMkZCQzM2NDc5QTIxNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QjJDODRDQ0NDQTExMUU2OTIwMkZCQzM2NDc5QTIxNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnMLhJsAAB3qSURBVHja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');
}
.cookiealert.show {
opacity: 1;
transform: translateY(0%);
transition-delay: 1000ms;
}
.cookiealert a {
text-decoration: underline;
}
.cookiealert .acceptcookies {
margin-left: 50px;
vertical-align: baseline;
}
/* cookiealert container height */
.cookiealert-container .cookies{
margin:5px;
}
Any help and advice would be appreciated.