1 Correct answer
If you only have one image in the header tag, you could add a selector called "header img" to your css, then give a height and width setting in pixels. For excample:
header img {
height:50px;
width:50px;
}
...then change the size in your various media queries.
11
Replies
The correct way to do this is with the <picture> element and SRC SET attributes. A different sized image is served to different sized devices thus eliminating excessive bandwidth consumption to small devices. Some manual coding and a set of different sized images required.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
By Nancy OShea
Does anyone really bother to use srcset, particulary for a logo, which should'nt be that big anyway????
I know for larger photographic images it's the correct way to go but I cant help feeling because of the extra image management needed, in a real world situation, where time and budget are zero and a website uses lots of images, this doesnt get used very often!
Most CMS systems do it on the server.
PHP can resize images server-side.
By Nancy OShea
Not really efficiently for various devices, one would need to specifically crop/size the images to get the best visual solution, not mearly reduce its physical size, a large hero image for desktop could look distinctly stupid on mobile unless it was sized/cropped correctly.
I think a lot of websites are using 'object-fit' cover now for images with a focus on the center of the image if possible, that can be applied well across all devices BUT of course using the one big image!
It all depends on the CMS and how it was programmed. Some allow multiple image uploads while others rescale and/or clip images to fit.
By Nancy OShea
Most only give the option of 1x 2x or 3x otherwise you do have to mess around cropping each image before or after uploading to the server, which is probably not what most are going to do.
I cant see my client, who has probably 400 locations on their website making 1200 different image size/crops - they are just going to upload 400 same sized images and be done with it!
I guess IF the images can retain their aspect ratio then yes, php can resize on the fly BUT if images need to be specifically cropped and sized that wont happen without a lot of human intervention.
I think its all down to time/money. The first website I investigated was a big UK insurance company and they indeed are using srcset (I admit I was surprised!). The next website I investigated, one of the biggest cottage holiday letting companies in the UK, but nowhere near having the finances of the big insurance company, are just using the one large image for all devices.
If one uses artboards and/or scripts in XD, Illustrator or Photoshop, it's not hard to generate multiple sized assets.
https://www.adobe.com/creativecloud/business/enterprise/xd-artboards.html
https://helpx.adobe.com/xd/help/export-design-assets.html
Most amateurs can't be bothered learning new techniques or don't know why they should.
By Nancy OShea
Its not hard, its more time consuming than most either get paid for or want to do or even know its what they should be doing.
If a developer was to apply every single thing they are supposed to be doing they would never drop a job or be so poorly paid in terms of the time consumed, it becomes a labour or love, that's ok IF you like doing it and dont need the money. The client dont give a monkies, they just want the cheapest, or most do.
AdChoices