Smart Images
Summary
Window width based image loading for responsive applications.
Visit https://aklump.github.io/jquery.smart_images for full demo.
Quick Start
- Install with
yarn add @aklump/smart-images
ornpm i @aklump/smart-images
- Please open
demo/index.html
to see this plugin in action. The demo is only available if you download this from GitHub; it is not included in the npm package.
Requirements
- jQuery >= 1.4
Contributing
If you find this project useful... please consider making a donation.
Usage
Here is an example, the simplest use case, a single breakpoint between mobile and desktop at 768px. Your usage will vary depending upon the number of breakpoints you choose.
-
Create a mobile image at 767px wide. Note: 1 px less than your breakpoint.
-
Create a desktop image larger than 767px and wide enough for desktop, e.g. 1075px.
-
Define the HTML markup:
<div class="smart-image"> <span data-si-srcset="mobile.jpg" data-si-media="max-width:767px"></span> <span data-si-srcset="desktop.jpg" data-si-media="min-width:768px"></span> <img/> </div>
-
Add the Javascript.
$('document').ready(function () { $('.smart-image').smartImages(); });
-
Set your browser width to less than 768 pixels and load your page.
-
Notice the mobile image has been set in the img tag's
src
attribute. -
Resize to greater than 768 pixels and notice the img tag
src
changes to desktop.jpg.