I have created a Map Application which contain only one image and its image size is 13 MB which takes more loading time when I deploy to Production Server.
If I resize the image then all the coordinates of application which mapped change and quality of image also get worse.
Is there any way to Lazy Load or Partial rendering technique to load the image in application?
When you resize the image define only ONE: Either height or width. The aspect ratio should fix itself automatically. From all the details you have given me, that is all I can help you with.
Related
I have an AIR Projector game that's set to 640x640 resolution in the Project -> Properties -> Dimensions field. But for some reason when I debug the game the window sizes itself to 800x800.
Here's the properties window.
And here's what happens when I launch the game.
You can see the image is 800x800. It should be 640x640, I don't know why it's being scaled up by 25%. This stretches the image and makes the quality worse.
I already found a hack-y solution but I was hoping there was a more elegant reason or solution as to why this is happening.
I have to go into the AIR Application Properties and set the Initial Window Size field to 526x549, as shown here.
When I set those fields to those values (keeping in mind the Project Properties Dimensions field is still set to 640x640), the game then launches in the correct dimension with perfect image quality.
I found this other user having the exact same problem. Their solution was to scale the main Sprite to fit the stage dimensions, but I'm trying to avoid scaling to preserve the image quality.
I'm coming back to this because the realization just hit me while going through my computer settings. The reason the game was being rendered 25% larger is because my 1440p monitor is set to 125% scale in my Windows 10 display settings.
I'm building an application where I have a list view and a map view. The list view has image and info sections, but I am having difficulty with the image scaling.
The images are images that users upload of themselves, their listings, etc. I am using AWS Lambda + S3. So, I have flexibility to modify the image scaling for thumbnails, potentially creating multiple dimension thumbnails.
How should I scale these images so they can be accessible for mobile/tablet, desktop, and large (2k+) displays? Should I make 3 or more resolution scaled images from the image the user uploads, and then have some kind of img-sm, img-md, and img-lg differentiator?
Thanks
Use img tag with srcset attribute.
More info: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
I won't recommend resizing by CSS. Because the large file is anyway being downloaded on the user's device and will take more time to load in comparison to a small resized image.
In the case of serving perfectly sized images, you have two popular approaches.
One approach is to create resized images in all dimensions that are required, as soon as the user upload the image.
Another approach is to just upload one single large image and then get the desired dimension by specifying height & width in the URL parameter. It has more benefit. This will allow you to change the layout of your application in future without much effort from your side. Otherwise, you would have to again re-upload the old images in new required dimensions.
You can check out ImageKit.io. It has all these features + optimization.
I have img background in my angular app, in slow connections the image loads slow and shows partially during the loading.
Is there a way to wait until the image fully loads and then to show it? and not to show it in loading progress?
Most likely it is caused by the size and resolution of the image.
To make it load faster reduce image sizes using either GIF, PNG-8. or JPEG as the file formats. Make sure the size matches your usage and set the size for each page with the height and width. Do not make use of scaling, especially from larger to smaller images. The image result might look fine on screen but the file size will be the same. To truly take advantage of the smaller dimensions, use an image editing program and scale the image accordingly. Also play around with different image compressions.
I currently have a page with about 20 or images with source data pulled from a database.
I display them at width of 100px and I have a hover function that appends an element with the full size image with a width of 250px.
I decided to use the full size version for the original image and just scale it down to 100px instead of using a thumbnail version. My thinking on this was that on this page it is very likely that the user will hover over most of the images so the page would end up having to load the full size version for most of the images anyway so why make them download the thumbnail AND full size version for each element. Also scaling from 250px to 100px didn't seem to display much if any distortion in the smaller element.
Now I am running my page through Google page speed analyzer and it really does not like me using larger than necessary images for the smaller elements. Of course it is ignoring the fact that those larger images are being used for the dynamically created popups.
In order to make my page play nice with Google's page speed tester I am giving in and using thumbnails for the smaller elements but I also want to prefetch the larger image to avoid an annoying delay when the user hovers over the element. This means I am essentially loading 2 versions of the same image just to make Google speed test not yell at me.
This seems ridiculous to me so I wanted to ask if this is really the best way to do this or is there another way to make my page play nice with Google speed test.
Thanks,
Adam
If you know what you're doing, there's no need to be a slave to the PageSpeed score.
Loading two copies of the images could make actual page speed slower. However, it depends on what you are trying to optimize for. Loading thumbnails first and then large versions could be better if you want time to full render to be fast (so the users can see the page) and then load the big images in the background to add interactivity later.
Or is it better to have fast time to interactivity, and time to full render doesn't matter that much. Then maybe having one copy of each image is better.
I am putting some photos on my website and I do not know which syntax will load them quicker. My photos are usually 4300x3000 or 3000x4300 (which is from 7-10 MB per photo). I am using
#image {
max-height:500px;
max-width:750px;
}
When I viewed my website on a low-end PC, it took a lot of time to load. I do not want to use fixed height and width because I could have photos as big as 2500x2500 and that would cause a mess. What should I do to reduce the load time? Is there something like an “autoresize” that will keep the height to width ratio?
Compression
You should compress the images using some external software (if you are not using any other language apart from HTML and CSS). I would recommend Photoshop or GIMP.
That's the only way to improve the load: reducing the image weight. The forced resize is just loading the same amount of data from the server.
Improving quality of resized images:
If you are interested on improve the quality of the resized images, you can take a look at this article:
http://articles.tutorboy.com/2010/09/13/resize-images-in-same-quality/
Auto-resizable background
Loading image of 4.000 pixels is not a very common practice even in the websites with a full background. What it is usually done is loading a picture of about 1800-2000 pixels width and then adapt the image to bigger or smaller monitors using CSS preferable.
Here an article about that:
http://css-tricks.com/perfect-full-page-background-image/
Responsive images:
You can also load a different image depending on the predefined resolutions of your chose.
You will need to have multiple versions of each image though.
More information about it use.
My photos are usually 4300x3000 or 3000x4300 ( which is from 7-10
mb/photo ).
It has little or nothing to do with max-height versus height. The performance hit is coming from the original size of the image which causes the browser to:
download a large file
exercise a scaling algorithm against an enormous number of pixels
What should I do to reduce the load time? Is there something like an
autoresize that will keep the height to width ratio?
Create a smaller version(s) of the file when you upload it, and serve the small version. You can optionally open the original version when the user clicks on the small image.
You can create one or more copies of the file manually and upload them with different filenames.
A more elegant solution is to create one or more copies of the file programmatically (you didn't indicate server technology, but there are many options available). For example, Facebook creates six copies of each image you upload so that they can rapidly serve them in different places with the correct size.
Whether or not you do it automatically or manually, you may choose to adjust/crop the image to achieve the desired aspect ratio.
You should be resizing your images and loading those resized images instead if you want quicker loading. You could keep both large and small on disk and only load the large images when user clicks the link.
To resolve loading time
You have to compress your photos before uploading them to the server. Use export to web in photoshop, make sure the image size is reasonable (I would say never more than 1mb); You can also use image optimisation software (In Mac I would recommend JPEGmini).
You can, if you wish keep your large images in a folder in your site and link to them (so that one can download them if you allow this).
To resolve the ratio issue (square vs rectangle)
You can just use one of the properties and css will calculate the other. For example, if you put only
#image{
width:750px;
}
This will resolve the matter of things "getting messed up" if you mix rectangle images with square images.. Good luck!