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.
Related
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.
i have this bug on my site, dont know what could I do to change it so it will be displayed correctly.
My problem is the filmstrip on my site kecy.sk a.k.a gallery... when I refresh, there are elements appearing and then dissapearing and work properly... But that first look is ugly... It is supose to be displayed in one row as it is. but when I do refresh the page, I see those pictures in filmstrip stack for a little while in multiple rows and then it goes to normal one row.
P.S. Dont mind that big big pictures... it's gonna be smaller sizes...
Thank you
You are serving scaled images thus your website speed is very slow
Dont scale image using HTML or CSS. Try to create a php function for resize them.
You have to specify cache validator.
The following resources have identical contents, but are served from different URLs. Serve these resources from a consistent URL to save 9 request(s) and 1.7KiB.
https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i7!2i69!3i44!4i256!2m3!1e0!2sm!3i373056598!3m14!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy50OjZ8cy5lOmd8cC52Om9mZixzLnQ6NXxwLnY6b2ZmLHMudDozfHAudjpvZmYscy50OjF8cC52Om9mZixzLnQ6MnxwLnY6b2ZmLHMudDoxfHAudjpvZmYscy5lOmx8cC52Om9mZg!4e0&token=48356
https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i7!2i69!3i43!4i256!2m3!1e0!2sm!3i373056598!3m14!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy50OjZ8cy5lOmd8cC52Om9mZixzLnQ6NXxwLnY6b2ZmLHMudDozfHAudjpvZmYscy50OjF8cC52Om9mZixzLnQ6MnxwLnY6b2ZmLHMudDoxfHAudjpvZmYscy5lOmx8cC52Om9mZg!4e0&token=78498
When i create gallery on my website, i need thumbs? Or i can use full images and resize it with css?
For example, i have gallery like that: http://otomoto.pl/renault-20-r-20-1-6-1-6-gtl-C21940610.html
If every images will be resizing with css, then browser will load the same image many times or one? Page will load faster when it will be image01thumb.png, image01normal.png, image01full.png? Or just image01full.png?
If you resize with CSS, then the client will have to download the whole image and resize it, which is not good in terms of bandwidth. You want some thumbnail-sized images so that you can send a small image to the client rather than having to send the full thing.
It depends what kind of gallery you have. Obviously when you are using thumbnails the client does not have to download the full image if he never sees the full sized one. But if you have a dynamic gallery where for instance you make an image bigger with a tween/animation on mouse over it might be preferable that the image already is loaded so the transition goes smoothly.
I am putting some photos on my website and I do not know which syntax will load them quicker. My photos are usually 4300x3000 or 3000x4300 (which is from 7-10 MB per photo). I am using
#image {
max-height:500px;
max-width:750px;
}
When I viewed my website on a low-end PC, it took a lot of time to load. I do not want to use fixed height and width because I could have photos as big as 2500x2500 and that would cause a mess. What should I do to reduce the load time? Is there something like an “autoresize” that will keep the height to width ratio?
Compression
You should compress the images using some external software (if you are not using any other language apart from HTML and CSS). I would recommend Photoshop or GIMP.
That's the only way to improve the load: reducing the image weight. The forced resize is just loading the same amount of data from the server.
Improving quality of resized images:
If you are interested on improve the quality of the resized images, you can take a look at this article:
http://articles.tutorboy.com/2010/09/13/resize-images-in-same-quality/
Auto-resizable background
Loading image of 4.000 pixels is not a very common practice even in the websites with a full background. What it is usually done is loading a picture of about 1800-2000 pixels width and then adapt the image to bigger or smaller monitors using CSS preferable.
Here an article about that:
http://css-tricks.com/perfect-full-page-background-image/
Responsive images:
You can also load a different image depending on the predefined resolutions of your chose.
You will need to have multiple versions of each image though.
More information about it use.
My photos are usually 4300x3000 or 3000x4300 ( which is from 7-10
mb/photo ).
It has little or nothing to do with max-height versus height. The performance hit is coming from the original size of the image which causes the browser to:
download a large file
exercise a scaling algorithm against an enormous number of pixels
What should I do to reduce the load time? Is there something like an
autoresize that will keep the height to width ratio?
Create a smaller version(s) of the file when you upload it, and serve the small version. You can optionally open the original version when the user clicks on the small image.
You can create one or more copies of the file manually and upload them with different filenames.
A more elegant solution is to create one or more copies of the file programmatically (you didn't indicate server technology, but there are many options available). For example, Facebook creates six copies of each image you upload so that they can rapidly serve them in different places with the correct size.
Whether or not you do it automatically or manually, you may choose to adjust/crop the image to achieve the desired aspect ratio.
You should be resizing your images and loading those resized images instead if you want quicker loading. You could keep both large and small on disk and only load the large images when user clicks the link.
To resolve loading time
You have to compress your photos before uploading them to the server. Use export to web in photoshop, make sure the image size is reasonable (I would say never more than 1mb); You can also use image optimisation software (In Mac I would recommend JPEGmini).
You can, if you wish keep your large images in a folder in your site and link to them (so that one can download them if you allow this).
To resolve the ratio issue (square vs rectangle)
You can just use one of the properties and css will calculate the other. For example, if you put only
#image{
width:750px;
}
This will resolve the matter of things "getting messed up" if you mix rectangle images with square images.. Good luck!
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.