imazen / slimmage Goto Github PK

Is it possible for Slimmage to support retina like displays?

For reasons I don't fully understand, the SauceLabs unit tests have started running after the integration tests, causing the test coverage graphic to represent the unit coverage instead of the integration coverage.

It seems when optimising the js file during minification the method checkResponsiveImages also gets renamed which means it can't be used publicly as suggested when dynamically loading in images. Am currently having to call the minified method f(); instead.

http://saucelabs.com/tests/6a609c2288a34a7dbb19bf081365f286

Also happens https://saucelabs.com/tests/142f6c1e71ff4b08aeedcc68e16cf86a

Have any thoughts been given to make slimmage support height?

For example if I have an image which in html with querystrings will be:
src=myImage.jpg?width=500&height=200

slimmage will change width=320 but keep height, whereas it might want to change height to 128

Our unit tests pass just fine in IE6, but in IE6 feature tests, we can't find the body element ("unable to find element with tag name = body") - or even a simple div - elementById("container")] Error response status: 7, , NoSuchElement
https://saucelabs.com/tests/8fc212d8b85c4837892c4fc22363d43d

Hi,

is it possible to include the slimmage.min.js file in the release tarball?

br,
Per

IE6/7 do not implement setAttribute, which can lead to missing attributes. class is the most notable.

slimage.js, line 13 character 78
SCRIPT438: Object doesn't support property or method 'apply'

oddly it is rendering some of the images, then it errors. Any thoughts?

Tests complete for chrome 26 on linux
27 tests run.
25 tests passed.
2 tests failed.
changing to 800
should be the right size (800): expected 1024 to be within 770..830 AssertionError: expected 1024 to be within 770..830
at /home/travis/build/imazen/slimmage/test/wd/test_functions.js:62:41
at _fulfilled (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/q/q.js:787:54)
at self.promiseDispatch.done (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/q/q.js:816:30)
at Promise.promise.promiseDispatch (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/q/q.js:749:13)
at /home/travis/build/imazen/slimmage/node_modules/wd/node_modules/q/q.js:557:44
at flush (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/q/q.js:108:17)
at process._tickDomainCallback (node.js:486:13)
should wait until the body has resized: [waitFor({},7000)] Condition wasn't satisfied! Error: [waitFor({},7000)] Condition wasn't satisfied!
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/commands.js:890:14
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/commands.js:875:33
at _rejected (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/q/q.js:797:24)
at /home/travis/build/imazen/slimmage/node_modules/wd/node_modules/q/q.js:823:30
at Promise.when (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/q/q.js:1035:31)
at Promise.promise.promiseDispatch (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/q/q.js:741:41)
at /home/travis/build/imazen/slimmage/node_modules/wd/node_modules/q/q.js:557:44
at flush (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/q/q.js:108:17)
at process._tickDomainCallback (node.js:486:13)

CALL sauceJobStatus(false)
Test video at: saucelabs.com/tests/ce167fb8df464fa5b8afc0508275db25

jQuery plugins than mangle the DOM (those that make percentages and em-units evaluate wrong) need to run after Slimmage. An event could provide a unified way to trigger them.

There is an issue in slimmage which repace all querystring parameters starting with "w" or "h".

this breaks Remote signed url since the "hmac" will be replaced with the value of the height.

It seem to be fixed in unstable.

bcb8bb2

8 tests failed.
changing to 800
should be the right size (800): [setWindowSize(800,600)] Error response status: 13, UnknownError - An unknown server-side error occurred while processing the command. Selenium error: Not supported in OperaDriver yet Error: [setWindowSize(800,600)] Error response status: 13, UnknownError - An unknown server-side error occurred while processing the command. Selenium error: Not supported in OperaDriver yet
at exports.newError (/home/travis/build/imazen/slimmage/node_modules/wd/lib/utils.js:139:13)
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/callbacks.js:33:23
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/webdriver.js:174:5
at Request._callback (/home/travis/build/imazen/slimmage/node_modules/wd/lib/http-utils.js:85:7)
at Request.self.callback (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:364:22)
at Request.emit (events.js:98:17)
at Request. (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:1318:14)
at Request.emit (events.js:117:20)
at IncomingMessage. (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:1266:12)
at IncomingMessage.emit (events.js:117:20)
should wait until the body has resized: [setWindowSize(800,600)] Error response status: 13, UnknownError - An unknown server-side error occurred while processing the command. Selenium error: Not supported in OperaDriver yet Error: [setWindowSize(800,600)] Error response status: 13, UnknownError - An unknown server-side error occurred while processing the command. Selenium error: Not supported in OperaDriver yet
at exports.newError (/home/travis/build/imazen/slimmage/node_modules/wd/lib/utils.js:139:13)
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/callbacks.js:33:23
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/webdriver.js:174:5
at Request._callback (/home/travis/build/imazen/slimmage/node_modules/wd/lib/http-utils.js:85:7)
at Request.self.callback (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:364:22)
at Request.emit (events.js:98:17)
at Request. (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:1318:14)
at Request.emit (events.js:117:20)
at IncomingMessage. (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:1266:12)
at IncomingMessage.emit (events.js:117:20)
should be the right size (800): [setWindowSize(800,600)] Error response status: 13, UnknownError - An unknown server-side error occurred while processing the command. Selenium error: Not supported in OperaDriver yet Error: [setWindowSize(800,600)] Error response status: 13, UnknownError - An unknown server-side error occurred while processing the command. Selenium error: Not supported in OperaDriver yet
at exports.newError (/home/travis/build/imazen/slimmage/node_modules/wd/lib/utils.js:139:13)
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/callbacks.js:33:23
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/webdriver.js:174:5
at Request._callback (/home/travis/build/imazen/slimmage/node_modules/wd/lib/http-utils.js:85:7)
at Request.self.callback (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:364:22)
at Request.emit (events.js:98:17)
at Request. (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:1318:14)
at Request.emit (events.js:117:20)
at IncomingMessage. (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:1266:12)
at IncomingMessage.emit (events.js:117:20)
should wait until the body has resized: [setWindowSize(800,600)] Error response status: 13, UnknownError - An unknown server-side error occurred while processing the command. Selenium error: Not supported in OperaDriver yet Error: [setWindowSize(800,600)] Error response status: 13, UnknownError - An unknown server-side error occurred while processing the command. Selenium error: Not supported in OperaDriver yet
at exports.newError (/home/travis/build/imazen/slimmage/node_modules/wd/lib/utils.js:139:13)
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/callbacks.js:33:23
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/webdriver.js:174:5
at Request._callback (/home/travis/build/imazen/slimmage/node_modules/wd/lib/http-utils.js:85:7)
at Request.self.callback (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:364:22)
at Request.emit (events.js:98:17)
at Request. (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:1318:14)
at Request.emit (events.js:117:20)
at IncomingMessage. (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:1266:12)
at IncomingMessage.emit (events.js:117:20)
changing to 1024
should be the right size (1024): [setWindowSize(1024,768)] Error response status: 13, UnknownError - An unknown server-side error occurred while processing the command. Selenium error: Not supported in OperaDriver yet Error: [setWindowSize(1024,768)] Error response status: 13, UnknownError - An unknown server-side error occurred while processing the command. Selenium error: Not supported in OperaDriver yet
at exports.newError (/home/travis/build/imazen/slimmage/node_modules/wd/lib/utils.js:139:13)
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/callbacks.js:33:23
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/webdriver.js:174:5
at Request._callback (/home/travis/build/imazen/slimmage/node_modules/wd/lib/http-utils.js:85:7)
at Request.self.callback (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:364:22)
at Request.emit (events.js:98:17)
at Request. (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:1318:14)
at Request.emit (events.js:117:20)
at IncomingMessage. (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:1266:12)
at IncomingMessage.emit (events.js:117:20)
should wait until the body has resized: [setWindowSize(1024,768)] Error response status: 13, UnknownError - An unknown server-side error occurred while processing the command. Selenium error: Not supported in OperaDriver yet Error: [setWindowSize(1024,768)] Error response status: 13, UnknownError - An unknown server-side error occurred while processing the command. Selenium error: Not supported in OperaDriver yet
at exports.newError (/home/travis/build/imazen/slimmage/node_modules/wd/lib/utils.js:139:13)
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/callbacks.js:33:23
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/webdriver.js:174:5
at Request._callback (/home/travis/build/imazen/slimmage/node_modules/wd/lib/http-utils.js:85:7)
at Request.self.callback (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:364:22)
at Request.emit (events.js:98:17)
at Request. (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:1318:14)
at Request.emit (events.js:117:20)
at IncomingMessage. (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:1266:12)
at IncomingMessage.emit (events.js:117:20)
should be the right size (1024): [setWindowSize(1024,768)] Error response status: 13, UnknownError - An unknown server-side error occurred while processing the command. Selenium error: Not supported in OperaDriver yet Error: [setWindowSize(1024,768)] Error response status: 13, UnknownError - An unknown server-side error occurred while processing the command. Selenium error: Not supported in OperaDriver yet
at exports.newError (/home/travis/build/imazen/slimmage/node_modules/wd/lib/utils.js:139:13)
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/callbacks.js:33:23
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/webdriver.js:174:5
at Request._callback (/home/travis/build/imazen/slimmage/node_modules/wd/lib/http-utils.js:85:7)
at Request.self.callback (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:364:22)
at Request.emit (events.js:98:17)
at Request. (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:1318:14)
at Request.emit (events.js:117:20)
at IncomingMessage. (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:1266:12)
at IncomingMessage.emit (events.js:117:20)
should wait until the body has resized: [setWindowSize(1024,768)] Error response status: 13, UnknownError - An unknown server-side error occurred while processing the command. Selenium error: Not supported in OperaDriver yet Error: [setWindowSize(1024,768)] Error response status: 13, UnknownError - An unknown server-side error occurred while processing the command. Selenium error: Not supported in OperaDriver yet
at exports.newError (/home/travis/build/imazen/slimmage/node_modules/wd/lib/utils.js:139:13)
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/callbacks.js:33:23
at /home/travis/build/imazen/slimmage/node_modules/wd/lib/webdriver.js:174:5
at Request._callback (/home/travis/build/imazen/slimmage/node_modules/wd/lib/http-utils.js:85:7)
at Request.self.callback (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:364:22)
at Request.emit (events.js:98:17)
at Request. (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:1318:14)
at Request.emit (events.js:117:20)
at IncomingMessage. (/home/travis/build/imazen/slimmage/node_modules/wd/node_modules/request/request.js:1266:12)
at IncomingMessage.emit (events.js:117:20)

I am using slimmage for clientside processing and when it rewrites the src URL it sets quality to 80%. Probably because the size changed but I am also using ImageResizer to which I specifically provide quality=100% for certain type of content images.

It's probably because of this code here

var quality = (dpr > 1.49) ? 90 : 80;

if (s.webp) quality = dpr > 1.49 ? 65 : 78;

in slimmage.js.

The degradation in quality from 100% to 80% is noticeable.

It'd be nice if we had some way of overriding this when initializing Slimmage. I don't want it to automagically mess with my settings, if I want 100% I know why I made that choice.

If you turn javascript off the img tag inside of the noscript tag is being html encoded and so gets output as a string rather than an image.

When using height parameter and cropping I experienced some problems with the data.requestedWidth being set to nearest multiple of 160. The actual size of the image would be 800, but it's scaled down using max-width:100%; in css. This affects the height, and result in the image not filling it's static width/height container perfectly.

I solved this by adding s.defaultWidths which will be an array of the widths, and if the data.requestedWidth does not match, it use the 160 rule.

// Added custom widths
if (s.defaultWidths) {
    if (s.defaultWidths.indexOf(data.requestedWidth) === -1) {
        //Minimize variants for caching improvements; round up to nearest multiple of 160
        data.requestedWidth = data.requestedWidth - (data.requestedWidth % 160) + 160; //Will limit to 13 variations
    }
}

Usage:

<script>
    window.slimmage = {
        defaultWidths: [226,468,710,952]
    };
</script>

Didnt think about it before now, but maybe widthVariants would be better name.

When using height param and sizing the viewport up, then down again, the large scale image is still used and the height will be less than I asked for (400 as in example below).

<img class="slimmage" src="blah.jpg?width=800&height=400&scale=both&mode=crop&slimmage=true&quality=90" />

If an <img> tag has no max-width defined, slimmage.js does not fetch a properly sized version of it on Firefox 28.

The reason is that

window.getComputedStyle(target, null).getPropertyValue(hyphenProp)

returns 'none', which then gets passed along and probably treated as 0 when saved to temp.style.width for the test element.

It seems to me that checking for 'none' and changing the value to undefined should fix this. I'm not sure if this would have side effects, though.

Obviously the simple fix for users is to have CSS such as

img { max-width: 100%; }

Slimmage makes a good job in resizing the image.

Sometimes, a certain image size will used in different layout (ie a small screen will have different layout). This could also mean a different proportion of the image, or even a totally different image as auto cropping or such cannot be used.

Maybe slimmage could support additional attributes or similar for the different 160* sizes.

for example
<noscript data-img-src-320="/art-directed-img.jpg" />

Or any other great ideas how to solve :)

Despite no code changes, certain SauceLabs tests are failing - Opera 11 on windows, chrome on linux - and Firefox 3.6 can't be found anymore?

Hit Ctrl+F and search "fail" to see the details
https://travis-ci.org/imazen/slimmage/builds/89684769

We need to fix 'unstable' (and thereby 'master') so that PRs can be tested. Both are identical, but unstable's tests have run recently and 'master's have not for 8 months.

We require responsive images to be displayed fro different viewports. So we are currently replacing the dynamically using JS by detecting viewports.

We have a situation lets say for a logo of our website, we need the url to be:

1. Desktop = http://cdn.abc.com/logo.png?width=300&height=150
2. Tablets = http://cdn.abc.com/logo.png?width=200&height=100
3. Mobile = http://cdn.abc.com/logo.png?width=150&height=70

We don't want to download the full image and then scale down. We tried your slimmage but it adds width="" based on data-pixel-width="", which we don't know how this is calculated?

We need some way where we can tell slimmage that apply a fixed width for an image in a particular viewport.

Can we do this using slimmage?
If not is there any other alternative.

I'm not exactly sure why but Slimmage v0.4.1 is not working on some upgrades. The issue is that getCssValue is returning null. This is because val is "none" and the is_blank returns false for this.
I've tested in Chrome 40 and Firefox.
If I remove the v === "none" || from the is_blank method everything works again...
Any ideas?

We poll window.slimmage.webp too early, before window.slimmage.webp is defined.

Is there a way to call Slimmage on DOM content that is AJAX-loaded? This would be useful in jQuery Mobile AJAX navigation

While not really a bug in Slimmage maybe a workaround could be applied so that readyCallBack is only fired once, this issue is due to mobile Chrome firing the resize event on scroll. More details http://stackoverflow.com/questions/17328742/mobile-chrome-fires-resize-event-on-scroll and http://stackoverflow.com/questions/9361968/javascript-resize-event-on-scroll-mobile

I am trying to use Slimmage and SlimResponse (with ImageResizer) with jquery Cycle2. Slimming is happening after Cycle2 is being initialized which is causing various issues. Depending on how I set up the slideshow and css, I am getting either no slideshow or the images after the first one are 160px.

I have the same issue with the Bootstrap Carousel, all the images after the first one are 160px. I'm guessing this is happening because the of the display:none on all but the first image.

Would it be possible to add support for css added background images in stylesheets and inline?

You can refresh a page and one time jpgs remain and refresh again and this time webp images are there etc...
I've tried and failed to find a reason or pattern to this....

Hi @nathanaeljones,

How's your standpoint on adding lazyload support to slimmage?

Basic requirements:

• Triggered on DOMContentLoaded and fallback to onload for legacy IE
• Only load images that are visible in viewport
• Load the non-visible images on scroll or window resize

Will this solution really work for caching of images?

I applied slimmage to our website and found that width of image is 0 when parent of image have style display:none
line 45: var pixels = temp.offsetWidth; This is correct behavior of browser, but I think slimmage should have workaround of it.

We experienced it for images which used together with jquery.cycle2 plugin.

For now we solve our problem by the following:

1. Placed slimmage.js as first script before
2. We run processing image immediately after HTML was loaded and parsed by browser (not after DOMContentLoaded, load events);
   window.slimmage.checkResponsiveImages();
3. In this case I am sure not one plugin who can set display:none to parent willn't broke width calculations.

Images are not being updated when a user zooms into a webpage with pinch gesture.

Is there a possibility or work-around to achieve this?