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.
Related
I need your help.
In my web page, after page load, the image has to wait some seconds and then it is shown.
But this is not user-friendly. How can I handle this situation?
I don't want to use the loader icon because it delays the page so much.
You can do multiple things:
Load image independently so that it doesn't affect page load time.
Style a placeholder container so that everything looks good with or without an image and the layout doesn't jump around when the image is loaded.
Cache the image.
Scale image down on server. If it's uploaded by users, you can save both, the original and a scaled down version. Display the scaled down version by default and load the original only if the user clicks on it or something.
Invest in better hardware to reduce network latency :)
Also, not sure what icons you use but they shouldn't affect page load time by much. Try Font Awesome
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.
A website that I'm currently working on has a number of slideshows. The issue is that the page loads and then the slideshow loads a second later. How do I improve loading speeds of the images? The site is hosted on Amazon. The url is http://gatehouse75.com to see what I mean.
There are a few ways you can do this:
Optimise image sizes. For example, images used on the front banner are 1920x1610. However, most screens are not that large. Use different sizes based on view port (screen size).
Reduce image sizes by changing compression and/or using a different format.
Preload images when the users visit certain parts of the site. That way when users get to a page with a gallery the images get served from the browser cache.
Finally, you can put a "loading" notice while images load if none of the above suggestions help. This is good for usability.
Convert your jpgs to lower quality and your logo (in png) to gif in grayscale. This should save a lot of space.
Right now the home page slideshow images are scaled to 1349 X 429 for me. I am using a laptop. The actual size of the images on the server is 1920 X 610 (at least the one that I inspected). This means two things: (1)The image served is a larger filesize than need be which takes bandwidth, and (2)that the served image needs to get scaled down which takes client time.
What is the max width for this slideshow? It is a fullscreen slideshow, so I understand why the chose to use the bigger image. Though maybe you can take the original compress and resize in a way that is acceptable?
You can also consider having a loading .gif in place while the content loads.
Also, go through and minify linked files... css, js.
1. Follow image file optimization best practices.
2. Use a fast CDN combined with a smart caching strategy.
3. Put your above-the-fold image refs (especially large "hero" images) in an inline stylesheet, immediately inside the <head> tag, in the html element selector, like this:
<head>
<style> html { background: url(/hero.jpg) no-repeat -9999px -9999px; }
</style>
This will get you the fastest time-to-visible for the images that impact perceived page speed the most.
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.
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.