Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Suppose I display a web page with thumbnails of my pictures (all pictures are about 2M each).
In order to display the thumbnails, I can just use img tag with max-height/max-width attributes. However I am afraid the browser will download the original pictures and scale them down in the client. It looks like waste of resources.
Does it make sense to create the thumbnails in the server and load them rather than original pictures ?
On the other hand, what if user clicks on thumbnail and I should display the original picture ? Maybe I should load the original pictures in background and hide before the user clicks ...
What are the best practices to display images in a web page?
Suppose I display a web page with thumbnails of my pictures (all
pictures are about 2M each).
In order to display the thumbnails, I can just use img tag with
max-height/max-width attributes. However I am afraid the browser will
download the original pictures and scale them down in the client. It
looks like waste of resources.
...it is. You usually prepare a thumbnail with the proper size and appropriate quality, sometimes more than one thumbnail even, for each image. Then you use some means (e.g. ShadowBox) to allow the customer to enlarge the image.
Since an image is 2M in size, and a thumbnail is usually 10-15 Kb, the site becomes much faster and more responsive. Also, you get less data traffic, which contributes to the overall speed (i.e. your customer is not slowed by his download, nor by other customers hogging the bandwidth).
Does it make sense to create the thumbnails in the server and load them rather than original pictures ?
Absolutely. Bandwidth and site speed are worth much more than some disk space. There are several tools to do the resizing upon upload, depending on what your platform is. For PHP they're usually based on either ImageMagick (heavier, better quality) or GD library (faster, still good quality - more than enough for thumbnails).
You might even want to perform a resize/quality optimization on the full sized images.
For very large images, there are "pyramidation" scripts (e.g. Zoomify, AjaxZoom) that allow loading a large image piecewise, allowing to zoom in/out, pan and scroll.
You didn't mention your tools.
In php there is gd library, which help you to process images etc.
As long as I understood, The best practice for you would be to create thumbnails (through library), and load thumbnails in your webpage.. and once someone click on your thumbnail, link him to a popup/next page/any-jquery-photo-viewer to see the full photo.
I hope it explains what you want.
2 MB is HUGE for an image on the web, retina display or not!
Ideally you would scale the image down to a thumbnail, as browsers tend to do a poor job of scaling themselves.
Unless your images require a high level of resolution (I'm thinking something like medical imagery or engineering documents), you should also look a compressed image format like .PNG or .JPG.
However, your idea to display the full-size version when the thumbnail is clicked is a good one. I would also suggest that you pull in the large version via AJAX, which will reduce the amount of bandwidth your page will require. If you need to pull in large images, you should definitely pull them in "on-demand" with AJAX to reduce the payload of your page.
Michael, if you have 2M image files, i dont think it good idea to load original images as thumbnails, the best practice in my expiriance to use some thumbnailer with imagemagic or GD libraries
1) create thumbnail on the fly with requested width and height
2) then save that thumnail to database
3) get image from db and send it to user
if user reques same size image see pt. 3)
in other case see pt. 1)
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have created a basic html website that has a gallery with images. It stores
them according to month taken. The page loads quite slow with all the images,
is there a better way to store the images for them to load faster?
Thanks
Load them progressively (lazily) through javascript and even better create thumbnails and load the thumbnails progressively with javascript loading.
Then load the full image only when clicking a thumbnail.
Furthermore divide the images into groups / pages so only a few images are loaded / displayed during each page request.
Furthermore make your webserver cache images for a certain time so the browser does not have to refetch them every time they are re-requested
The aboce will reduce the page load time dramaticaly
PS and yes, unless necessary dont store images in database but in disk folders, so that only the url of an image is needed to load an image instead of the whole image in data-encoded form (in case you dont do this already)
UPDATE: check The complete guide to lazy loading of images, for modern browers and modern web apps
This is not a programming question. However to guide you in the right direction you could look at optimizing your images to reduce the file size yet keep good image quality. This will help to speed up page load times. There are plenty of online tools that you can use to optimise your images such as https://tinypng.com/ and https://tinyjpg.com/
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 designed This site .The page load speed is very low.I found online site load time which tells the load time of the site.As well as it gives the other statistics .
The page load time statistics snapshot is as folows:
my question is how can i decrease the page load time?Since it becomes very irritating if the page load time is more then 2 sec..
Not sure that this is really a programming question but one problem I see is that your images are too large in terms of file size.
These images are rather large for example:
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/themes/deep-red/img/bgbody.gif (145kb)
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/uploads/2012/07/he12.bmp (450kb)
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/uploads/2012/07/slid11.bmp (1mb)
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/themes/deep-red/uploads/Istpanelfinal.jpg (303kb)
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/themes/deep-red/uploads/TA_UnionSTN4.jpg (311kb)
You can start by using a program like Adobe Photoshop to save your images "for web." You might also want to look into converting those bitmaps and GIFs into PNGs. You may also want to make your JPEG images progressive.
If you don't have access to Photoshop, a free alternative that can "save for web" is GIMP.
edit: You might want to look into using some CSS to make a 1 pixel tall image repeat on the x-axis. You'd lose your gradient though.
Something like the following should work:
background-image:url(../images/gradient.gif);background-repeat:repeat-x;
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm developing a photography portfolio website. I want to know what would the best practice be for downloading images from a database. As of right now the entire gallery is roughly 20MB. The gallery is still in development, I intended on just having an "loading" graphic run between photos. But the client seems to prefer image preloading. Is it practical to have the page preload 20MB+ of photos, and if so, what is the best way to do so? Or would it be best to go with the loading screen?
20MB to fetch in one go is too much, it will result in a slow and annoying user experience. You should probably ajax-load each image in turn.
Incidently, how big are your images? An 800 x 600 jpeg should be around 50k at 90 - 95% quality. So 20 MB would be 400 images. This seems like a lot for one page. I'm guessing your image sizes are large - consider reducing them. If you want to have hi-res, non-compressed versions available, have these individually linked.
Edit: Just for reference, what I would consider a very large page (the html doc + all css, js and image assets) would be ~ 1MB. An "average" sized page is probably ~ 100k.
Why not "thumbnailing" images via some server side script, preload thumbnails & display full image on thumbnail click (using some kind of lightbox js)
This would reduce a lot preloading time while keeping full porfolio preview.
I think the better way is to preload the next couple of photos while you are viewing the current one
Yeah, definitely don't do this. Rememebr that some users will be connecting with mobile connections and some of them paying by the megabyte - if you do this then you've just used up 20 MB of their allowance with images that they may never see.
I don't think either solution is practical - I would suggest you scale down your images.
20MB is probably too much unless it is a specialized application where you are confident that 1) users will wait and 2) that they will view the majority of those images. Otherwise, you are wasting bandwidth.
I would look at a strategy where your images are cached in server memory to avoid database traffic combined with client-side pre-caching of a few images where you can add it. For example, if the user is on image "A", load "B" and "C" as well.
On a website I'm creating, I have about 100 various thumbnails (64x64) that get displayed at different times. On some pages, only 5-15 thumbnails may be displayed. On others, all 100 are loaded.
I'm considering using a technique like CSS sprites to display the images. That is, rather than have image tags for each thumb, do something like:
<span class=thumb1"></span>
And then use CSS to take a slice of one single image with all the thumbs stitched together. That is, one image with all 100 thumbs (in this scenario, a 640x640 image).
My questions:
Is this a good idea?
If yes,
should I do it on all pages the
images occur, or only on the pages
with all the images?
Is there
another technique other than sprites
that may be better than simply
including the images with img tags?
If you think that an ordinary user would visit at least two different pages with these thumbnails than my opinion is that using sprites would really be a good idea!
I would in fact make a single big image with all the thumbnails and then use it in all the pages!
Why?
Fewer http requests (from 100 to 1)! And this is one of the most important thing about web site optimizations (read here from Yahoo Performance Team speed optimization rules )
This way users will download the whole image only the first time and then they will get a super quick loading of that images in all the following pages
The most famous websites on the internet already do that! See sprites used in Yahoo, Amazon or Youtube pages.
You can add other UI or layout images to your sprite
Optimize the resulting PNG:
After you have generated your sprite, if a PNG, you can optimize the PNG even more using this tool: http://www.sitepoint.com/blogs/2009/09/18/squishing-the-last-drops-from-your-pngs/
When not to use sprites:
When part of the images in the sprite change frequently
In this specific case: when the majority of users would need less than the (about) 10% of the images
I'm not quite sure what you mean with "sprites", but this is what I think you mean: instead of 100 images seperately, you create 1 image, with a 10x10 raster. Each coordinate (x,y) contains one of the images you like to show.
Now, if you display an image, you use CSS to set background-location: i.e. x * -64px and y * -64px, perhaps using JavaScript to calculate the x and y for each image-span, or Server-Side scripting to print out a dynamic CSS.
Yes, this is a good idea: it reduces load time, since one only has to download one big image, instead of hundreds of smaller ones.
It depends. If you have caching-abilities for a page, then you can "stitch" all thumbnails into one image file. If you have a very dynamic webpage, then it's quite harsh to build this stitched image every time the thumbnales are updated.
Not sure, if this is what you ment with "sprites", then no, if you ment something else with "sprites", then yes: this answer is an example of one.
It is a good idea if
Speed matters
You don't care about accessibility (screen readers reading the ALT text of an image, etc, all that is gone when you use sprites)
You don't care that your thumbnails are not going to be printed by default in any browser
You can do it without it becoming a maintenance nightmare (which image was on position 461 again?)
As to your second question, it is probably advisable to put all sprites into one or very few container images to minimize loading times.