I'm in the process of building my website and have come across something I want your opinions on.
I've noticed that even though I've compressed my photos A LOT (18mb to 500kb or so) they take a while to load when I display them through my site. That being said, if I pull random photos from the web and use the link to display them, they load almost instantly.
With that being the case, would uploading all my photos to Flickr, then pulling the image URL and using that as my img src be better than using the actual file from my server as my img src?
Pros and Cons?
Obviously if Flickr ever went down I'd be hurting, but if it means that the other 99.99% of the time my photos load faster I'd be all for it.
Thoughts?
Usually those images are hosted on a CDN, which means they are on multiple servers throughout the world, while images on your site are only on one. That's why theirs load faster.
Related
So, my assets folder in Angular app has a size of about 1GB where images are close to 134MB and a video of 738 MB. A component which displays these images take about 3-4 seconds to render in local, and it takes more than a minute on a application which is deployed to PCF(even after using AOT).
Strange thing is that the components renders just in fraction of
seconds if we revisit it.
I have tried using lazy loading for images by using deferload. But,
still the problem not resolved.
Could someone share their thoughts on this.
Mostlikely fetching such big images causes the app to load slow.
It is probably unnecessary to have such big image size. You could try to resize the images with something like lambda resize image.
Also if you revisit the site all the data is already cached in the browser. You could try to disable cache in the network tab and it should be slow on every visit of the site
You can use npm install package ng-lazyload-image
Fine the url for description and usage docs
https://www.npmjs.com/package/ng-lazyload-image
I'm trying to build a E-commerce site with a admin page where the administrator can upload images of certain products.
I'd like Meteor to upload those images to a folder and then display those images in the product page of that product.
I know that normally the image files that the client will be using should be inside the 'public' folder, but I'd like to know more about what other options I might have.
Also, if I upload a new file to the 'public' folder or if I delete a file in the 'public' folder, the website refreshes itself...and this is good and bad at the same time depending on what effect you are after....
Here are my questions:
What if I create a 'uploads' folder in the server and upload the images to that folder. Would it be possible to display the images inside the 'uploads' folder in the client browser??? How??
Is there a way to use the browser to access the contents of the 'public' folder???
Is there a way to stop the 'reactivity' of the site if changes happen in the 'uploads' folder created?
Is uploading the images to the 'public' folder the best solution available to this problem?
Thank you very much for the help
When dealing with what will likely be a large number of images I like to offload not only the storage but also the processing to a third party.
My go-to app in this situation would be Cloudinary. Here's why:
Storage - I can store the original images outside of my application. A huge benefit to keep images in sync from dev to prod.
CDN - I get the extra benefits of images being quickly loaded from the Cloudinary CDN.
Off-load Processing - All of the processing of images is handled by Cloudinary which doesn't slow down my app as a whole.
Image Manipulation - I can make calls to the original image, calls to just get a thumbnail, and calls to change manipulate, ie :effect => grayscale. So if a 1000x1000px image was uploaded, I can request a 50x50px from Cloudinary that will return the image cropped to that exact size rather than using CSS to shrink a huge image.
Flexibility - I can change the size of images and return that exact size to the app without having to re-upload images. For example, if my product page pulled in thumbs at 40px, I could easily make a call to grab the same image at 50px.
Hope this helps.
http://cloudinary.com/
You can do all of this using the meteor package collectionFS. The package is well documented and you have a variety of options that you can uses for storing the uploaded files. CollectionFS also gives the ability for image manipulation on the upload, such as creating a resized thumbnail.
I realized this question is a bit old.
I had the same problem, one of the solution that works for me is using meteor-upload https://github.com/tomitrescak/meteor-tomi-upload-jquery
Definitely don't store stuff in the public directory - it will slow down starting up the app, and hot code refreshes on image upload could easily cause it to crash once there are a decent number of images in there.
Any of the above solutions with storing images elsewhere would work. One other option is using the peerlibrary:aws-sdk package to upload stuff to S3, which is what I use for several apps and have found to be very clean.
Storing the image as a base64 string in MongoDB is also a method. Useful for posting to APIs and save the worry of having to handle other 3rd Parties.
Let's say I have a web page with a 100 large flickr photos, all IMG tags are referencing the flickr urls. If I get a lot of traffic to this page, will this use my bandwidth consumption because the end user is still viewing these images on my domain or are they loaded from the end user's browser and it will not show up in my bandwidth stats?
They will not affect your bandwidth. This is called hotlinking. Images are stored on another server (owned by flickr) so they will be downloaded from it. When browses will spot your img tags, it will see the reference to the flickr images, so it will download it from there despite the fact the images are on your page.
Note that you do not have much control over hotlinked resources (if they are not yours). And when they are replaced by something else your page will immediately display changed images. You should also have permission to link to someone else's images.
No it will not contribute to your bandwidth. When your user loads your page their browser will hit flickr directly to load the images.
All times in my life, I save images on my server as files:
the originals
the thumbnails
the original with watermarks
... all as files in folders.
But today, I'm viewing google images, and the src of images is a base64 encoded hash. What benefit does Google get from serving images in this manner? Why would someone do that instead of just serving images conventionally?
google is sort of obsessed with latency; latency for the page load goes up if your browser has to go and make a separate request to the web server for every image on the page. you can eliminate this latency by writing the data of the image right into the page when you generate the page. i actually see a lot of image-heavy sites, especially blogs, using this technique nowadays.
just because the image is included in the page doesn't necessarily mean it's not stored as files on the web server -- just that the web server process that generated the page has already opened and read the image file and then wrote it's data into the page. google is probably storing the images in it's proprietary and secret data store, but you don't have to.
On my new site, I display around 50-60 thumbnails per page using my one of the plugin.
About plugin:
For every requested post id, it
extracts content for the post from
DB and find out the image url.
It generates thumbnail for found
image URL.
I wanted to minimize number of hits to the server in generating the thumbnail. If server is cache enabled then it can reduce many of the hits. But i was willing to separate the 2nd part from the plugin and to host it on any other server/CDN where i/other can request to generate thumbnail without any charges.
I tried free webhosting provider. but i felt they are generally slow/down maximum of time.
Please suggest the approach or CDN, if any...
Or any online image api which can resize/zoom/crop/edit an image, if i pass the image url.
It will be very hard (almost impossible) to find a reliable server/CDN that will generate thumbnails of images for free.
TANSTAAFL
Assuming your plugin uses several standard wordpress function, you might be able to use another plugin which takes the generated thumbnails and uploads them to another server. I recommend W3 Total Cache.
You could also try CoralCDN to take some load off your server.
So: You can use CoralCDN (or similar) and just point the URLs of your thumbnails through it, or you can have a caching plugin like W3TC upload the files to an almost-free site like Amazon S3.