I'm creating a website that loads some images on first load, then if a user clicks on one of the images the same image opens in a popup but bigger (Lightbox).
My question is, is it better to just use the same large image and resize the dimensions for caching (So the user already has loaded the image) or is it better to first load a smaller thumbnail then the bigger image once the pop-up opens?
I'm trying to reduce site speed as much as possible as there are a lot of images.
I'm using Masonry for the site and Magnific Popup for the image expand if that helps.
the thumbnail image size is around 100kb whereas the larger image is between 200-300kb.
The main idea of any lightbox-type script is that they allow you to display preview images (thumbnails) on your page and load larger versions only when needed (e.g, when user clicks on the thumbnail). This greatly helps to reduce page weight and load time. Modern scripts (like fancybox) can display preview image while larger version is gradually appearing over it thus relieving users from staring at blank screen.
image = "Your image link / location here"/ZoomService
image.Zoom(100)
--if you use MilkWar web coding use that
Related
recently I made a website for my photography. htttp://www.simotamas.com
I am a newbie, so its not the best site but it works fine for me, I got only one problem, when a site is loaded on a device for the first time, the gallery loading time takes up to 1-2 seconds.
Could you guys please check if I mess up something with the code?
Or should I made the pictures even smaller?
Any way I could increase the loading performance.
I would be really thankful for any advice.
Some points you can consider
Use thumbnails for preview (low resolution) , while clicking load actual image.
Load images of only visible part first then load the images in bottom. (May affect user experience)
if you have cpu power , use any libraries like cache tools or compression tools like
https://nielse63.github.io/php-image-cache/ . benchmark it carefully.
use gzip if you are not using gzip compression for your server.
The fact your website doesn't wait for the image to load is considered a plus (look into asynchronous web page content loading for a good read) that said you should compress your images before uploading them.. tinypng.com is a nice tool for it... But if it's a photography website doing so would reduce picture quality... Try to play with Photoshop save settings to find your ideal compromise between quality and size with respect to "memory" size... Pictures are heavy.. high definition and resolution will obviously result in heavier files to download
Update: another thing you could do is actually display (smaller) thumbnail and only load the full picture on request. I.e: user clicks and image opens in new tab
It would help if you create smaller thumb versions of your images so the browser can initially load these ones for the overview and no need for scaling way to big images down while rendering the page. An image should always be downloaded in the dimension it's going to be presented.
My site have 2 pages and the 2 pages contain a similar picture. If a user comes to the first page, he downloads the picture and then come to the second page, if I make the website so that the picture is shared between the 2 pages then the user no need to download the picture again?
If I want to put the same picture but different in size on the webpage, is it better to make 2 pictures by using image software editor or using CSS to change the width and the height of the picture?
you have answered your question.
if the image is from the same source, and if you have configured the caching on webserver correctly (and if the client has enabled cache), then there are no re-requests sent to view the same resource.
you dont need to create multiple images for different sizes, use html image attributes to show it in the grid dimensions you wish to.
Exception: if the original image is quite large, and you are not sure if the user will want to view the image, then create smaller image for faster loading. Thumbnails on a photo album is a good example for that. There is a program called re-sizer which accepts a folder and create a new set of images with the required dimensions
Resources below
Image Resizer
HTTP Compression
Im making a page/application that presents a wide range of products. One view contains a lineup of about 130 products, eash represented by a png-image, the size varies from 33Kb to 150Kb.
The lineup can be scrolled horizontally whith the users scrollbar or custom controller, and when you hover each product I use som css-transistions to fade out all products except the one hovered, and to enlarge it.
It works perfectly smooth in Safari and decently Firefox, and in Chrome as long as I keep the image count-down. But the more images i try to add, both the scrolling and the transistions progressively gets slower until it's almost imposible to work with.
Is this some cache.problem in chrome? Is there any way around it?
I've tried to preload the images, but the problem isn't the loading time og the image, its the performance that seems to halt due to the sheer number of images.
You can combine all your little images in one big image, and load ONLY the big image, so you do only ONE HTTP request. For display you must set the offset (background-position property) of every image using css.
Tutorial
About catalog images I found smth here http://www.magentocommerce.com/knowledge-base/entry/resizing-catalog-images/.
But it has a path Design > Themes Editor > Customize (Theme) > Catalog Images that I haven't in my admin panel.
As for product images I haven't any idea how to resize image.
I will be grateful for any link and tips.
PS: I read out that image resize is used in the template file directly. If we have 100 images per page it means that Magento resizes 100 times per page loading. Seems it require a lot of additional resources.
I believe you're going about this the wrong way. It is always best to retain the highest quality version. Let's say right now you want to shrink images to 300x300. What happens next year when you redesign you site and you want to feature product images more prominently and you want 400x400 images? You can't because you only have 300x300. As already mentioned, Magento has an resize mechanism that does exactly what you want. It will resize (shrink) the images once and store them in a cache. The first time that image is loaded then Magento does the resize and any subsequent image load will load the already saved image from the cache. Voila, you have both the original high quality image stored and the resized image stored.
I'm developing a site which has a slider on home page.I'm using nivo slider.
The images in the slider are of sizes 1600*1200.Due to this the home page is taking too much time to load.
Is there a way so that the images sizes are reduced on the fly or I've to first compress each image and then upload it to the server.
Is there any other alternative method, please suggest one if any.
You can load the images asynchronously with help of jQuery. Here is the tutorial for loading images in nivoslider asynchronised. This will reduce the page load time tremendously.
You can load the 1st image before the others, which is enough to show the slider. Afterward, you can asynchronously load the other images.