I Tried to find the answers here on stackoverflow but couldent find it , so I hope someone can help me.
The question is pretty simple I guess, Im trying to optimize My site with a image sprite instead of many images.
And I wanted to know if a background:inherit counts as HTTP Request?
Was thinking otherwise I could let My DIVs just inherit the first DIVs background image and save me a lot of Requests.
And do Two img links too the same image sprite count as one or Two HTTP Request? I mean do the browser understand that it already download it?
Assuming that you cache images, two (or a thousand) image links will only issue one HTTP Request, as long as the image itself doesn't change, though it's really about the browser implementation. The same goes about using inheritance or even using the same resource in different CSS elements. If you are using Chrome, I'd suggest that you'll take a look at the network tab in the Developer tools and verify that this is indeed the case. Otherwise, you can try using Fiddler.
If you'll share a link, I'd be more than happy to take a look at it myself.
Related
I'm trying to implement styled media receiver, but for some reason, my chromecast won't show the graphics. I get only name of my receiver on black background. Preview in cast dev console looks OK though.
The css I'm trying to use is this: https://krizan.se/styl_latest.css
What I tried and did not help:
CORS enabled and disabled, doesn't make a difference. Left it enabled. Verified by streaming video from the server on chromecast
I tried using both absolute and relative paths for images, no change.
Tried using both http and https, no change either.
The image I'm using is 1280x720, as in guidelines. Tried changing it to different sizes, no change
Remove and register my chromecast again in dev console, no change
I spent too many hours trying to fix this, trying all combinations of above, but still can't see my graphics on my cast device. There was one question on stackoverflow with the same issue, but without answer.
Is this some kind of bug or am I doing something wrong? Any help greatly appreciated.
You don't appear to have a valid certificate for the HTTPS connection. Also, the URL is currently returning 404 for the CSS file.
So my problem was that url that was hosting the CSS file was not the raw CSS file. So i used this website https://rawgit.com/ to host the CSS file.
Was wondering if this
background:#092542 url('data:image/png;base64, ....') center top no-repeat;
is more efficient than
background:#092542 url('myimage.png') center top no-repeat;
I'm trying to cut down on load times and if this would help out, great.
If the image is only being used once, on one page, then it might give a very slight (probably not noticeable) difference in loading (faster), however it also means the browser can't cache the image, so if it's used on another page it'll have to be loaded again, which means double (triple, etc) the data is being transferred.
Generally, it's not worth it, although maybe if it's a micro site it could be easier, but not by much.
Data URI images ARE cached. However, the caching of the image is dependent on how the file that is contained in is cached. If the stylesheet that includes the Data URI image is being cached, then the image will not be downloaded until the stylesheet itself is redownloaded.
I'd also recommend this post explaining Data URI's further, especially the section on performance.
Is there a way to "cache" background image.
For example..
Background image is 3x3px and it's set like this:
body {
background: #000 url(bg.png);
}
When refresh happens, background image "flickers" for second.
Is there a cross-browser solution? (for Apache/PHP server if that is relevant)
If you go to seo.hr and browse navigation,... you can see what I'm trying to do.
http://www.seo.hr/
http://www.seo.hr/usluge/izrada-stranica
http://www.seo.hr/usluge/optimizacija-za-trazilice
I think you need to determine first if the issue actually is a caching issue or if it's caused by the size of your image. You could use a program like Wireshark or Fiddler to do this, but to be honest it's overkill for your need and you probably already have a browser with developer tools.
Here's how you determine where an image is coming from in Chrome (the other browsers are similar).
Open your developer tools and go to the "Network" tab.
Find "bg.png" in the list of network requests and click on it's name. Below is an example of having selected a stack overflow image from this page.
Notice that it says status 200 (from cache). The browser didn't need to go out to the server and rerequire that resource. It used the cache. If that "from cache" text wasn't there it wasn't reusing cached resources.
There is also the potential that you'll get a status code of 304. That means that the server said the image wasn't modified since the last request that you made. You do make the server trip in that case.
Ok, so my image wasn't in cache... now what?
There are a few reasons that this could occur.
You're request headers aren't set to tell the browser to cache the image (also found in that same "Headers" tab that you would have seen that Status Code if the browser actually went to the server for the image). You'll want to set cache-control and expires to something that makes sense for you. Cache headers can get a bit complicated you may want to browse through this caching tutorial document.
Is it SSL? If so not all browsers cache this but most modern browsers do. Set cache-control: public on these images (and also expires).
The real question here is how do you fix this? Unfortunately, that's entirely dependent on the server and/or the framework that you are using. As the OP is using Apache, they can find great documentation on the Apache module mod_expires to figure out how to tweak caching for their site.
Yes!
You should decide whats more suitable for you, but at this time we have some methods, like:
Pure HTML/CSS
Javascript Only
Mixed HTML/CSS/Javascript
Using base64 to encode the image somewhere on the source code
At this point I recommend a mixed solution, using javascript. This will make it work on many browsers as possible.
There is a good tutorial at:
http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
Having several images in one can take you a step beyond that, so check this sprites article:
http://www.alistapart.com/articles/sprites/
You can try to encode your image in base64 and put it directly into CSS source code. I found a question about pros and cons over here.
Make your tiled image much much larger, when the browser engine renders the page it has to multiply each tile to cover the entire width and length of your object, which results in bad performance with small tiles on large objects.
Small tiles -> more repetitions -> slower performance
I'm asking if you know if there is a ready-made solution, not really how to do it.
I'm quite sure I can pull it off myself, even if I never ever touched the bytes of a JPEG manually. If you'd like a crack on it, you're invited to do so ;)
The basic Idea is that you have a site with a few JPEG images, but you want to reduce load as much as possible for mobile users.
So you ensure that all of your JPEG´s are progressive and only sends the low-frequency bits of it first, idles down the TCP-connection, and waits for the client to report in how big the available space is in the browser window.
Or alternatively, you have some sort of browsercaps.ini or similar, and rely on that to get the initial resolution -- and then have the reporter report a correction if necessary.
I actually needs this for two entirely separate environments, one is using PHP and the other is using node.js (The latter one is of more importance).
I'm quite sure picasaweb is doing this stuff already, or at least did. You could view an image, and it loads progressively -- then you could enlarge it, it got blocky but continued to load in progressively, I remember that I was quite impressed by that!
(And its unfair that Google keep the cool stuff for them selves, remember their motto {°«°] )
Why not send the client a list of images that could be used for a specific img tag, then have the client determine which one it should use?
It is possible to determine the screen size of the device document.write(screen.width+'x'+screen.height);or the size of the browser. And instead of adding a src attribute for each image, adding the possible sources to a html5 data- attribute like so:
<img data-img="mobile:some-img.jpg,desktop:other-img.jpg" />
JavaScript (With jQuery):
$('img').each(function(){
$(this).attr('src', $(this).attr('data-img').split(',')[0].split(':')[1]);
});
Is it possible to edit images using a javascript library and then send the edited image to the server for saving.
Edits will be in real time, means the user can see the edit result in the same time he is editing without the need to refresh the page.
I want a javascript library to do some edits on an image on a webpage 'such as crop, resize, rotate,...' and send send the edited result to the server.
How this can be done or if there any smart work around to something like this.
The libraries mentioned don't seem to be fully cross browser. As far as I know there is no fully cross browser compliant way to edit pixel data on the client.
The current best approach would be to do these manipulations on the server. You can still do this real time using a web service.
As an example see the image editor in TinyMCE which supports crop, rotate, resize, flip, all from the client without a page refresh.
Pixastic is an image manipulation library; once you've modified the image, some sort of post back / upload call from the script will be able to upload the image provided you've implemented the needed functionality to do so.
An incomplete list to be sure, but these are two that come to mind which allow you do a wide variety of editing on the client side and push back to the server.
PIxastic
AIE
And there are numerous less complete image editing tools for simply cropping or adjusting contrast as well.
jcrop is what you are looking for .