I have multiple images on my website. But the images generate from bytes stored in the database. I generated the images from the byes and displaying it on my website. But he size of the images are very large(70 kg)per image. This is making slow down my site.
Is There any way to resize these images (12 kg). Please help me if anyone have solution.
Thanks in advance
You can create a custom handler that can create and return image. Along with that handler should set the changeability settings etc along with image re-sizing in order to get performance improvements.
Here is the one for example: http://webimageresizer.codeplex.com/
// Returns the image mapping to /bla.jpg resized to width of 100 pixels preserving aspect relative to height
http://webimageresizer.codeplex.com/ImageHandler.ashx?src=/bla.jpg&width=100
Let me know if you need more help.
Related
I want to allow the users of my site to upload images. Each person can submit one image. Then, this image will be displayed inside of a mat-card. I want it to look good on mobile, as well. I have very little experience with this, I don't know how to approach this problem.
Do I force some ratio of the image before I accept the upload? What if someone submits image like 1000x25? If the image is smaller than the card, is it best practice to stretch it to match the card's dimensions? Do I set the fixed width or height? Any pointers on how to approach this would be appreciated
Wordpress auto generates images with all possible demnisions..
For example: generate thumbnail, medium, large etc
How I can make wordpress produce images only on demant.
For example if I want only have the thumbnail size for one image, then the only images which are created will be only the original size and the thumbnail size. For other image, maybe I will want only the original kai medium size..
Is it possible to do something like that?
I don't talk about unset function..
Sorry for my English!
That's how WordPress works, it's native behaviour, it generates all possible thumbnails of the image so it can be loaded in any size when needed. In other words, thumbnails are generated when uploading image and not when showing in (on-demand concept).
If an image is 200px by 200px and you give that image a class in css with the same dimensions, will the browser still resize that image via css?
Ive been looking frequently into reducing page load time and one of the things that comes up is resizing via css slowing down page load time.
If you apply a class to your image with some fixed dimensions, then it will stuck to the defined dimensions.
Unless you define "max/min-width" and "max/min-height" instead of width and height.
The loading time is not about the dimension of the image but more about the size (octets) of the file (here an image). The performance are poorly influenced by the dimension of it.
No, because image will be same size (as downloaded from server). Also, since width/height of class is same as image, image will not be resized. And I don't think that resizing such images has any impact on page load times.
We can resize image propertionally from css but can't reduce load time from css
Full optimization of images can be quite an art to perfect as there are such a wide variety of images you might be dealing with. Here are the most common ways to optimize your images for the web.
Use proper file formats. If you have icons, bullets or any graphics that don't have too many colours use a format such as GIF and save the file with lower amounts of colours. If you have more detailed graphics then use JPG file format to save your images and reduce the quality.
Save your images in the proper dimensions. If you are having to use HTML or CSS to resize your images, stop right there. Save the image in the desired size to reduce the file size.
To resize your images you will have to use some form of program. For basic compression you can use a simple editing program such as GIMP. For more advanced optimization you will have to save specific files in Photoshop, Illustrator or Fireworks.
Source Link
Edit:
Check this link to get more idea about speeding up page loading time
Although it sounds a simple question I have been thinking about this.
How exactly do browsers render images? For an example of what I mean, lets say I have a 1MB image that is 3000px x 1500px. I then decide to put this image into a container that is the set to width:100%; meaning that it will scale down reponsively. Will the browser load the entire 1MB and then proceed to scale the image down to fit the container or will it scale it down and then proceed to load it?
I'm asking because this is pretty much my situation and if it does the former (load the 1mb first) then I guess I would have to serve a seperate image on mobile devices?
Thanks
Edit: Since people are saying that it'll load the 1mb image first, how would you suggest I serve a large image to the user? Scale it down for mobile and have a mobile/desktop version?
The CSS is applied after the image is fully loaded. So in short it would to load the 1MB image first and then apply the dimensions. Also images are stored at Server side. I found a very useful image which describes this:-
On a side note:
Browsers often render the same page multiple times in a very short period of time, specially after reading image metadata.
The browser (obviously) cannot scale (or do anything) with an image before loading it.
The image is retrieved first via a HTTP request e.g.
GET /images/myimage.png
and then scalings/transformations are applied. So if you want different images for different platforms then you should request as such.
Currently I am using a image sprite having size of 200K and its load time is 4.9 second.
My Question is,
Does the sprite image size matters while loading?
If the size is increasing, Can we break it in to two or three image sprite?
What would be the best option increasing the HTTP request or doing some compression?
Thanks
It matters if you want certain images to show up before others. Obviously no images can be shown until the whole thing loads. If there are elements of particular importance then break them into a separate file.
Yes
Compression won't get you very much because you are probably already using a compressed image format like jpeg or png.
If you need to optimize page load speed I would do my suggestion in point one and possibly use async requests for remaining images.