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/
Related
This question already has an answer here:
Protect images download theory
(1 answer)
Closed 7 years ago.
I want to hide images from my HTML code. I've disabled right click, which is pretty easy however the page source can still be viewed. Is there a way to hide all images from the HTML code so that the images cannot be stolen from the source code?
I'm afraid that there isn't a way to 100% stop a user of your site from getting into the code.
Not sure what the images are for but a couple of things you can do are:
Watermark your images.
Obscure the link by converting it into hexadecimal. (More on this on Google)
Bury it in divs or a table
Use Low Res images.
But as you've already disabled right-clicking that stops casual users from taking them.
Your browser will always need som kind of source to view the image, so you'll always be able to find it in the source code. However, there are ways to make it a little bit more complicated.
For example, using PHP, you can load the image through a script to hide the real URL and prevent some users from seeing it.
But remember, if the image is visible on the page, there will always be ways to steal it.
If you publish something in the web, you can't restrict the user. They can save anything from your page to their computer. But you can use watermarks on your images but still the user can download but can't steal.
Other way is you can convert your image into data-uri so user can not download the image. But it has its own limitation. But it may worsen your site's performance depending on number of images and size of the image.
I have a web page which loads almost 70-80 images on the web page. I already have implemented lazy loading. Should I keep these images on local server or on some image site like picasa and reference it from there ? or is there any better option ? What would be the best way to load these many images without loosing performance and efficiency ?
Please suggest.
One more question - is it good idea to add css animation effect to those images ?
There are a number of things you can do.
Use a tool like smushit - www.smushit.com to optimise images and reduce loading times.
Make sure that you are not resizing large images by setting incorrect widths and heights.
Call images from a subdomain on your server.
Combine images used as backgrounds/display elements into a single image (known as a sprite), and use css to only call specific areas of the single image - this means it will only be loaded once, reducing HTTP requests.
You can get some advice on using Sprites here: http://css-tricks.com/css-sprites/
You can also get some more info on page loading times, and things you can do to optimise by using GTMetrix tools at http://gtmetrix.com/
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)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
my new website is now finally finished and it runs pretty smooth, on most devices i tested. the only thing I optimized was the code, so i deleted all comments and other unnessescary lines in all .css and .html files. but beyond that, what else can i do to optimise a website specific for mobile contextes?
you can see here here (all images are only used for demonstration): http://mbaljan.de/weblab/sites/designtisch/
Firebug "page speed" provides lot of optimization options . You can try them .
You consider changing what is being served to the browser based on either internet connection speed or device or both. For example, serve smaller images when the website is being viewed on a mobile device. That would speed up the load time. Check out Adaptive Images to do that: http://adaptive-images.com/
Apart from that, trying to reduce the number of files being loaded is a good idea. E.g. 1 jQuery/javascript file. You can also try to minify all your javascript files (and CSS if you really want to) to reduce their files sizes and decrease load time. If you intend to modify those files again in future you'd have to keep an uncompressed backup though.
Check out: http://javascriptcompressor.com/
Another thing you could make sure you're doing is using image sprites. That way you reduce the number of image files being loaded. This won't work with Adaptive Images, so I find it best to use sprites just for things like logos and icons.
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.