I currently have a page with about 20 or images with source data pulled from a database.
I display them at width of 100px and I have a hover function that appends an element with the full size image with a width of 250px.
I decided to use the full size version for the original image and just scale it down to 100px instead of using a thumbnail version. My thinking on this was that on this page it is very likely that the user will hover over most of the images so the page would end up having to load the full size version for most of the images anyway so why make them download the thumbnail AND full size version for each element. Also scaling from 250px to 100px didn't seem to display much if any distortion in the smaller element.
Now I am running my page through Google page speed analyzer and it really does not like me using larger than necessary images for the smaller elements. Of course it is ignoring the fact that those larger images are being used for the dynamically created popups.
In order to make my page play nice with Google's page speed tester I am giving in and using thumbnails for the smaller elements but I also want to prefetch the larger image to avoid an annoying delay when the user hovers over the element. This means I am essentially loading 2 versions of the same image just to make Google speed test not yell at me.
This seems ridiculous to me so I wanted to ask if this is really the best way to do this or is there another way to make my page play nice with Google speed test.
Thanks,
Adam
If you know what you're doing, there's no need to be a slave to the PageSpeed score.
Loading two copies of the images could make actual page speed slower. However, it depends on what you are trying to optimize for. Loading thumbnails first and then large versions could be better if you want time to full render to be fast (so the users can see the page) and then load the big images in the background to add interactivity later.
Or is it better to have fast time to interactivity, and time to full render doesn't matter that much. Then maybe having one copy of each image is better.
Related
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 have a slideshow which will be displaying large 400px X 1000px images. I need to have thumbnails of each image in the slideshow, so I was wondering... will the page load faster if I simply use a second instance of the image but lower the width and height - will the page load the large image twice? Or would the page load faster if I load the HD image and a smaller thumbnail?
Generally, I would advise against using images that are larger than the intended use. I would, personally, definitely recommend serving a properly sized image. These recommendations are based less on page load time (as the difference in your case is probably negligible) and more about best practice.
A very handy php utility I've use a lot for stuff like this is timthumb
Generally it's a bad practice to create an image gallery of any kind using only full size images, lowering their dimensions when using as thumbnails. Yet if your case is a small gallery with < 30 images displayed per page, then this might do. In the other case scenario, imagine that a page has to preload all of the big images no matter if user would play the whole slideshow or not. This slows the page load time and generates unwanted data transfer. When it goes to timing, it would still be faster to generate thumbnails. A good tool for that could for instance be phpThumb which is able to generate any image size from its original and cache the output afterwards, speeding up the page load next time.
What are the benefits to using an images real height and width when rendering HTML? That is if I have an image that 100x100 pixels but I want to display something that is 95x95 pixels, should I resize the image on the server or can I let the browser handle this? I'm really looking for a general rule along with the reason. Thanks.
<img src="image.jpg" style="width: 95px; height: 95px;" alt="an image" />
Browsers handle resampling/interpolation of bitmap images differently when they're the ones resizing the images, which may or may not be controllable with CSS. This is elaborated on in detail in this post on Flickr's dev blog. If you resize the image in an image editor or by using server technology, you'll get consistent results across browsers.
In your case, a difference of under 5 pixels around will probably not be too much (unless you're concerned about pixel perfection!), but if you're trying to squeeze dimensionally or binarily large images into small rectangles, it's best to resize them beforehand. The reduced image dimensions and file size will help with bandwidth savings.
If you're always going to use the same height, it would make sense to resize it once beforehand - in as nice a way as possible - rather than getting everyone's browser to do it. After all, you can verify the results, make any tweaks you need, use the best software you can find and not worry about how long it takes to perform the resize etc.
On the other hand, I wouldn't expect the results to be very different visually, and unless you're talking about really slow computers (or a lot of images) it's probably not going to take up that much client CPU time. You may want to check the render time on slow mobile phones though, particularly if you're targeting mobile users.
if the sizes are significantly different then you should have a large versin and a small version:
like in your example, 100px and 95px shouldnt be a big deal but lets say you have large images and you want to display thumbnails it will be better to create multiple versions of the images.
The advantage will be:
1 - faster download time when you just want to show thumbnails.
2 - More consistency on different browsers
3 - I am sure people can add at least another 100 advantages in here
Just re-size the image. Otherwise the full 100X100 image will be loaded (which weighs more than 95x95 - and difference in size gets bigger the more you're trying to scale it with html). So it'll take an unnecessary long time to load an image that will not be displayed in its full size. If you scale them down a lot using html and you have a lot of images on the page - that's a lot of wasted traffic and reduced speed.
The whole width/height thing was used when connection was very slow and everyone used phone lines with ancient modems - that way you could see the proper layout of the page before all images were loaded (and it took a while to see all images after seeing the page with all the text).
You should resize the images on the server when it makes sense. I doubt if resizing a 100x100px image to 95x95px will save you more than a couple of KBs so you're probably OK in this case.
If the difference (dimension-wise) is significant e.g. on master page you show a 100x100px thumbnails and on the detail page you have 640x480px image then you better create two versions of the image. This will make your thumbnails page load faster and you'll only serve the minimum amount of data.
On the other hand if the difference (dimension-wise) is not significant then serving two images will actually double the amount of data transferred.
Here is what Google's PageSpeed have to say about it: Serve scaled images
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.
If I have a logo image, and I want to use it on another page where I require it to be a smaller size, it is my instinct to create a new image, resized with a graphics editor. However, I am hearing that it is better for the user if I instead refer to the original image and resize it with the browser by changing the height and width in the image tag.
So I ask the crowd, what is the best practice here?
Thank you for your time,
-- Henry
My default response would be "Resize it in a graphics application", but it depends on how you're using it.
When you leave image resizing to the browser, the original (full-size) image has to be downloaded before the browser can display it at a smaller scale. This means that you use more bandwidth and your webpage takes longer to load. However, if you mainly use the larger image throughout your site, then it will be faster to always use this image, since the browser can cache it.
If you're concerned about image quality, you would get better results and would have more control over the downsampling process using a dedicated graphics application to resize the image.
It's fine to resize images with CSS or the height and width tags. The only thing you want to be careful of is making really large images small because it obviously doesn't decrease the download size.
Doing this would work best when you're effectively caching your images so it doesn't get downloaded a second time. Then you will be getting a tangible benefit from doing so. I usually just append the last modified time of the image to the URL, eg:
<img src="/images/log.png?1233454568">
and then set the Expires header to a year from now. If the image changes, the mtime changes and it will force the browser to reload it.
That's suggested for images, Javascript and CSS files.
If the browser resizes the image for you by using height/width tag, you might end with a lesser quality image, really depends on the image type (like photo vs. simple graphics), so try it out in some common browsers. But resizing the image in a graphics editor is the only way to ensure a high-quality resize operation.
Create the smaller image in a graphics editor, for several reasons:
If users have not already cached the larger image, they will be downloading the larger file unnecessarily.
Resizing the image client-side results in some unpredictable scaling quality.
Doing it in HTML is ill-advised anyway, for presentational issues (such as element sizes) you should do it via CSS.