All-right..
A couple of minutes ago I was pulling my hair out over this, but I think I narrowed down the problem.
In my html-page I want to use the image from this URL:
https://vignette.wikia.nocookie.net/mrmen/images/d/d2/Mrtallimage.png
Following the URL we see, that the image is 354px x 864px
However, as seen in the following Fiddle, when referring to the image in an img-tag, it is 200px x 488px
(But the right size, if you download the image, upload to Imgur, and the reference it..)
https://jsfiddle.net/hync8ovs/9/
So it has to be something server-side at
https://vignette.wikia.nocookie.net that resizes the image, when
it's being used as src in an img-tag, right? Is that even possible? And is it possible to "force" the original size?
I'm pretty sure, I've never come across this problem before..
Thanks!
(Disclaimer: I was only using the image for testing purposes in my web-app, that takes an image-url and analyzes the image. It was acting weird with this image and I was just wondering why.)
So it has to be something server-side at https://vignette.wikia.nocookie.net that resizes the image, when it's being used as src in an img-tag, right? Is that even possible? And is it possible to "force" the original size?
I believe the server at vignette.wikia.nocookie.net checks the referrer url, and then sends the smaller image when it is not directly (or perhaps via the same domain) requested.
That's %{HTTP_REFERER} doing this.
Read about it at https://httpd.apache.org/docs/2.4/rewrite/access.html
If it's only happening within JSFiddle it's likely a compression/resize being done by their service. The reference to the image is no different in any of the other locations. If it were being resized by the vignette.wikia.nocookie.net location when you pull it up in another window it should still be resized to 200 x 488. I don't think it's anything you're doing.
Related
I've been setting up Pinterest for a web site and it all works up to the point when you finish pinning an image. I always get "Whoops Sorry we could not fetch the image"
First I tried to directly assign the pin-it button to one of my images by setting the media parameter, which opened a pop-up with the description I provided. The image in the thumbnail area was displayed correctly as well, but Pin-It would result in the error message mentioned before.
Looking further into this issue I found 2 interesting sources on the Internet: This blog article recommended checking the .htaccess file of the Apache in case Pinterest gets blocked in some way, which isn't the case for me. I'm not blocking anything.
Another article gave some more useful information pointing out that the image has to be visible and exist with an <img> tag on the page (and fulfilling a couple of other criteria). Applying all those suggestions (e.g. image size of 400x500, visible, etc.) still wouldn't work. I went as far as just putting a plain image in the middle of my page and tried to Pin it, which still failed!
Then I tried a pin-it button with just the URL and let Pinterest fetch the images, which worked as flawless as the popup before up to the point when I finally finish the pin-it and it fails to retrieve the image...
Anybody got any suggestions what else I could try? I do run my Apache on port 88 instead of 80, but I couldn't find anything that this is related to the error. Anything else? If further information is required I can provide them.
There is a minimum and maximum size for an image that Pinterest will allow. I also found in the olden days ie a couple years ago there were characters in the image name that Pinterest did not like. I think they fixed that issue, but make sure your image is not tiny and not 5000 pixels wide.
The image does not have to be in an img tag, you can specify which image gets pinned in structured meta data, thus making it possible to display on your website an image in one size and give Pinterest a completely different sized image. You can use the same technique with Facebook, Twitter, Google+ assuming you get your structured meta data correct, you may also have to be "approved" to use Rich Pins/Twitter Cards.
Turns out Pinterest works fine on the production server, where we're using port 80. So the usage of port 88 might indeed have caused the issue.
It is a different environment though, so other factors might play a role as well.
I experienced the exact same problem but found that it was actually due to formatting in of the image's source tag.
Mine referred to ../images/example.jpg, which displayed perfectly, allowing you to get as far as it showing in the Pinterest dialogs, but as soon as I altered the source to simply images/example.jpg, removing the unnecessary ../ it began to work.
I uploaded a PNG image with alpha transparency to my server with the filename logo.png, however, when the image is used on a page and I go to see it's file-path, I get:
http://example.com/i/300x300xlogo.png.pagespeed.ic.0A66xVq4G9.png
That file is nowhere to be seen on the server.
I don't know if it affects it, but the actual image size is 400px by 400px, and I have it displayed in the HTML as 300px by 300px. (Don't ask.)
Could it be my web-host doing this? Seems to prefix the file with the resolution to be displayed at: 300x300x and also has that weird suffix: .pagespeed.ic.0A66xVq4G9.png
The URL you're seeing is as intended: mod_pagespeed rewrites the image URL to an optimized name and embeds the size, as well as the fingerprint of the content into the filename.
If you're downscaling the image in HTML from the original size.. you're wasting user's bandwidth, which is especially painful on mobile. Advantage of mod_pagespeed is that it can do this resizing for you on the fly - simply specify the desired dimensions in the HTML and it will do the right thing.
You can read more about the various image optimizations done by mod_pagespeed here:
https://developers.google.com/speed/docs/mod_pagespeed/filter-image-optimize
What you're describing as "loading slower" sounds like "image lazyload":
https://developers.google.com/speed/docs/mod_pagespeed/filter-lazyload-images
The images are deferred until onload fires, which helps get the page painted faster to the screen. You can also configure mod_pagespeed to do this on-scroll, such that only visible images are loaded. Finally, you can also disable this specific filter, but keep the image optimization done above.
P.S. mod_pagespeed is no longer beta, the team recently shipped 1.0.
Solved! Google Pagespeed was enabled by default in the webhosts control panel. Hopefully this will help anyone else.
I noticed that images would actually load slower, they would flash once the document finished loading. (Google Pagespeed is beta though.)
Due to reasons that are necessary but difficult to explain here I am setting both an absolutely positioned image as well as a background image on a div.
I want to make sure that once the browser has grabbed these images (they're very large) it doesn't re-grab them.
Let's pretend the image bg.jpg in the following code is 500KB. Does the following code cause the browser to download the image in its entirety twice for a total of 1000KB?
<style>
header {
background: url(img/bg.jpg) center center fixed transparent;
}
</style>
<header>
<img src="img/bg.jpg" width="500" height="500">
</header>
EDIT: Thank you all for your excellent answers. I just wanted to double check and make sure I wasn't causing the user to re-download these very large images.
Browsers are pretty smart when it comes to caching.It should only ask for it once.
Additionally when it asks the server for an image, it usually sends with the request for the image, a couple of headers that tell the server.. Hey, I want this image, but I got one already that has these attributes that you told me about it last time you sent it to me.
The server can then respond with a 200 meaning it's different content 304 meaning the one you have is the same, so I won't send it again, use the one you got..
One of these methods uses an ETAG header, but there are a few more.
Your server needs to support this, but most do.
Additionally, the interweb is made up of a bunch of caches, which will also look at these sort of header values and return stuff for you.. That's why the web scales so well ;-)
No, the browser will cache it. Depending on the user's setting however, the browser may request the image again the next time the page is requested, like for example, if the user clears their cache between page visits.
No, it will download it once and then be placed in the browser cache. The next time that URL is referenced it will look up the image from the cache rather than retrieving it from the server.
Basically what I am asking is, is there a way to have say a 1000x1000 pixel image and simply have some sort of code, whether html, css, or anything else to only download a resized verison of 100x100 pixels. Is there any way to do this? I would like to know before resizing each of my pictures and uploading them and linking those photos to the original larger version. Thanks.
You can't do it with HTML/CSS but it is possible with a server side language like PHP. Here's a script that will allow you to resize images.
The catch is that resizing images can be a server intensive process. You should try to make sure that once you've created a resized version of an image, it's cached on the server for subsequent requests.
Along those lines, the flow should be:
Image request comes in.
Does the resized thumbnail exist in the server's cache? If yes, serve the thumbnail.
If no, create the thumbnail, place it in the server cache and serve it.
Note: James brought up a good point in the comments. If the images you're resizing are going to change (updated/edited), you'll need to keep track of their large image's last modified date when you create the thumbnail (as part of the filename or in a database).
That way, when you check the cache, you'll be able to tell if the thumbnail needs to be regenerated.
You can create an account on imageshack.us (create the account to make sure your images don't get deleted) and then upload the image in different sizes and link to whatever size you want. (You don't have to do the resizing yourself, you can do it on imageshack when you upload) That way you get the image in whatever size you want and without putting any load at all on your server.
That's what I do and it works wonderfully
Example:
http://img52.imageshack.us/img52/1825/lakesunset.jpg
http://img12.imageshack.us/img12/6420/lakesunsetf.jpg
Both came directly from imageshack. Just uploaded the image twice and resized one on imageshack.
Then to display the thumbnail and link it to the larger one just use this code:
<img src="DIRECT SMALL IMAGE URL"/>
Example:
http://img12.imageshack.us/img12/6420/lakesunsetf.jpg
Sorry, I've never done any server side programming since I'm not a professional and I'm poor, so I can't help you if that's what you're looking for.
I know of 3 main ways to shrink images:
Using the img tag WIDTH HEIGHT
Putting all the images in a DIV and then scaling the whole div.
User zooming with ctrl + mouse wheel.
I have some pages with huge amounts of images. What I have noticed is that there is massive speed difference between the methods. Method 1 kills firefox very quickly. Method 3 seems to be the fastest on all broswers I have tried.
Does anyone know of any other methods? And is there a way through javascript/css to specify what the browser zoom level should be so I can at least use the fastest way?
The easist on the client would be scaling the images on the server and sending them to the browser, however it would take some serious CPU power on the server end (unless you cache them, and serve them up afterwards). You can achieve this with PHP quite easily. Depending on your purposes, you could simply write a script that takes all the images in a directory, resizes them and saves them to "thumbs/".
If you don't want to use anything on the server, I would either go with option 1 or question why there are so many images on one page to bein with. Try adding some pagination or something. If the browser slows down while using such a basic method of resizing images, there might be some refactoring in order.
If you're going to be resizing images why not have the images themselves be smaller. That will load the fastest out of any method you try. You can use PHP to create thumbnail sized images, and a link to the full sized image if they need to see it. Remember, even if you resize an image with the height/width the browser still loads the full image.
See http://articles.sitepoint.com/article/image-resizing-php for a tutorial on image resizing in php.