I am building an application with symfony which requires images upload. The images are of high definition and large size which take long to upload. Please is there any where i that the image can be compressed and resized as there are uploaded to the server? Thank you for your time
If you want to do that before uploading the image, it has nothing to do with symfony, as it will have to be done on the client side, probably with Javascript.
A good starting point could be this:
https://stackoverflow.com/a/14672943/2507740
Related
I want to have a website page load images faster or where the images don't stop the user from seeing the text on the pages before the images finish loading.
1. if I have text on a website page. Does the text render first so the user can see text while the images are still loading?
2. If i have 3 mb of images and have my server that is hosting the website render 1.5 and then move the other 1.5mb to something like flickr and have the image source point to flickr, will that be better and load faster. Or say I just have all the images pull from flickr?
Please help me.
Its a WordPress site, and Clouldflare free cdn does something weird to my theme. So not an option. I also don't want to lazy load for other reason.
EDIT : o yea, if I host all the images on Flickr does that give away link juice (Domain Authority Rank)?
Images do increase overall load time, but they aren't render blocking. The whole page will render (barring render-blocking CSS or Scripts) and images will pop in when they are done. If you want to avoid that flash, you can lazy-load them, or otherwise put the final image's sizes on a container element, so the text is already "moved".
You can't really "Speed Up" image loads. The best thing to do is cut down on the number of images, if applicable, and lazy-load any that don't need to be requested initially. The next best thing (and arguably more important overall, I suppose) is to optimize your images. There are a handful of WordPress plugins that will do this for you, or you can do it in PhotoShop - and even some image CDN's will do it. This basically means, don't load a 1MB image if you don't have to, for "web display" purposes, you can serve a 200kb image that looks almost as good.
A side point, you can "speed them up" a little by having them served from a faster server, but that goes for anything web related. Throw it on better hardware to get better performance (for the most part).
If they are large images, you should first and foremost, optimize them. Make sure they are the smallest file size possible. Also, don't bother splitting "1.5mb" of them over to another host. Either upload them directly all through a CDN (some even tie into your WP Library, like Cloudinary), or keep them local to your site. You'll save yourself some headaches later.
If you have a photo heavy website (photography or other types of galleries), 3mb isn't really an awful lot - but again it's best to serve a more compressed image, you can even link the image or a button to the "full resolution" one.
How can I detect image that is never used in the website, to improve loading speed of the whole content?.. Thanks in advance...
If an image is never used or referenced in the html then it won't be downloaded by the browser.
Even if they are out on your hosting, they will just be sitting there like storage, and not have an effect on speed of page times.
Here is a good reference for loading time optimization.
http://sixrevisions.com/web-development/site-speed-performance/
Defer Loading Content When Possible
Use External JS and CSS Files
Use Caching Systems
Avoid Resizing Images in HTML
Stop Using Images to Display Text
Optimize Image Sizes by Using the Correct File Format
Optimize the Way You Write Code
Load JavaScript at the End of Your Document
Use a Content Delivery Network (CDN)
Optimize Web Caching
Sites like facebook,google plus have there whole images in one picture how many bytes of memory
can be saved using this method
You are not saving any memory. You are saving bandwidth because you are making fewer HTTP requests to the server.
As pointed out by #iccthedral in the comments section you are actually saving bytes because you now have a single image => the total amount of saved bytes = numberOfPictures * sizeof(pngHeader).
This is called CSS Image Spriting through this we can save our HTTP Requests to server.
If we will use this method so our one HTTP request will go to server and call all the required images through CSS Image Spriting.
So now most of us are using this method :
read more about the CSS Image Spriting
Those images are called CSS image sprites.
They are used to minimise server requests, rather to save memory.
Also You might consider using SVG icons, which weight slightly more, but can efficiently used to save space if You need the same icon in different sizes. Here is a good material to read : Resolution Independence With SVG
its not the question how much memory gets saved, its how many http requests your "not doing" by having your images in to a sprite. Site will load faster
The amount of kb on images will +- stay the same, individual or sprited
I have a problem of image loading. My site contains around 20 images on home page. It will take to much time to load.
So is there any code in asp.net framework 3.5 that will reduce the load time without jquery or javascript.
Images are loaded by the client browser and cached for subsequent requests. So you could prefetch them using javascript. There's not much you could do on the server side other than of course reduce the number of those images, but I don't think that this is an option :-)
You could also take a look at a technique called CSS Sprites.
"is there any code in asp.net framework 3.5 that will reduce the load time"
No.
However
1) what kind of images are we talking about? Content image or Layout images? If they are layout images then you can combine the images together and use CSS to position them appropriately. This will reduce the number of requests made for images.
2) what sort of file size are we talking about with these images? 10k? 20k? 100k? You can run the images through smushit to reduce the file size.
http://developer.yahoo.com/yslow/smushit/
for some reasons the images I upload to my Drupal website are downsampled.
For example the image I'm uploading is 857x947
I've checked the following settings:
- the size of the CCK ImageField: 420x840
- the size of image cache used to re-sample the image: 420x840
Image Toolkit: Compression: 100%
I'm using cropping functionality. But I'm not dragging a small area, just almost all the original image is selected.
What am I missing ? Maybe php is compressing the image while uploading it ?
Thanks
Just to be sure that it is not caching try to clear all Drupal caches and your browser cache as well.
Then check if the imagecache preset you're using really isn't containing any scale action, just a crop action. To be sure, again just flush the imagecache preset and check the folder that there is no old, wrong image left.
Then go to your content type -> Manage Fields -> your picture field and check if the maximum resolution in there is set correctly.
I'm not aware of any other steps that downsample an image, if you don't have any other image-related modules installed. You wrote that you checked theses things, but most likely one of those steps is responsible.
By default Drupal resamples uploaded jpgs to 75% of their original quality.
Change it in this configuration page
/admin/settings/image-toolkit
Also I noticed that Image Magick library gives better results than default GD, but depends of the format of the image, etc.
Even if you do not use any imagestyle effect and whatever the setting at /admin/settings/image-toolkit the image will always be altered, see https://drupal.stackexchange.com/questions/246398/image-derivative-size-different-from-original-even-in-absence-of-any-effect and the related Drupal 7 core issue https://www.drupal.org/node/2914964