Mobile based viewers of your website are going to be on smaller screens and (in theory) have slower internet, thus making a decent means for smaller sized and lower quality images. These smaller images become hideous for the PC or “full sized” view ports.
Being able to switch your images based on screen size is a task easily done, in fact you don’t even need JavaScript!
The magic lies in the picture element and then obviously the source tag is involved too.
In this example below if the viewing screen is 1000px or wider the image will be red (red.jpg), if it is 470px to 999px the image displayed is blue (blue.jpg). On screens less than 470px the image displayed is green (green.jpg).
<picture>
<source media="(min-width: 1000px)" srcset="red.jpg">
<source media="(min-width: 470px)" srcset="blue.jpg">
<img src="green.jpg" alt="imagealttext">
</picture>
A drained and empty Kennington reservoir images from a drone in early July 2024. The…
Merrimu Reservoir from drone. Click images to view larger.
Using FTP and PHP to get an array of file details such as size and…
Creating and using Laravel form requests to create cleaner code, separation and reusability for your…
Improving the default Laravel login and register views in such a simple manner but making…
Laravel validation for checking if a field value exists in the database. The validation rule…
