I have a web page with around 70 images. I am looking for a way to bundle these images into a resource file. This isn't to improve client side performance as caching etc will take care of this. It's more for asset management on the sever side via our cms - I'd like to be able to deploy a single resource into the cms rather than having to create 70 individual resources.
Are there JavaScript libraries that will let me bundle images?
It is easy to do that using Image Sprites and you need not use JavaScript. A Sprite is a single image file with a collection of images positioned in it at specific locations. I recommend to use a transparent PNG image with your images in it.
Below you can see transparent PNG sprites used by Google, Windows Live and Facebook.
Once the sprite is loaded in web page, it is easy to display images in another page since the browser normally caches images to improve page loading speed. You can display specific image in a sprite by defining it's specific location in the sprite using CSS, like;
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
Finally, Spritebox is a handy tool to create your own custom image sprites.
I think what you need is CSS sprite.
Using CSS sprite you can have more than one image in a single image and use that image to show individual image as your requirement.
The main advantage of this is that you need single request for this image instead of request for for each images.
For knowing more about CSS Sprite check below link
http://www.w3schools.com/css/css_image_sprites.asp
Related
I have a problem rendering images with large file sizes. When I upload a lot of large file sizes of images and display them, it becomes very laggy.
My question is:
The ideal way is the backend should provide an very small image file size url?
Or the frontend can do it using Canvas API?
Could you provide an explanation please? Thank you
If you have a bunch of thumbnails to display, the source images for those thumbnails should definitely not be the original, full-size images. If those images are large, it will take a long time for the client to download them, no matter how you render them on the client.
When figuring out an image to be shown to client, you should have two versions on the server:
Thumbnail version - low resolution, small file size, easy to download and render many at once
Full-size version, downloaded when the user wants to zoom in on one of them
It could be that the full-size version should not necessarily be the original image. For example, if the original image is 20MB (yes, they can exist), you wouldn't want to burden clients with that. So you'd want to perform resizes and optimizations on the server for both the thumbnail version and the "full" version - enough such that there isn't much of a delay between when the client tries to zoom in and the full-size image fully loads.
My recommendation is that you convert the image type to something more performant like .webp or .jpeg and give the element the exact width and height properties.
And react also have a feature to lazy load your images using react.lazy() that can boost your web performance significantly
Handling large images is too much work for a frontend client. You should get these images at a smaller size in order to just show them as they are.
Imagine someone trying to use your application with an old computer, or even an old smartphone, you shouldn't rely on client's processing power to handle all this heavy work.
I hope my answer helps you!
Jpegs are what you should be using, look at functionPreload() as well
Currently Im working on a website that allows users to create images by layering different images on each other and then they will be allowed to download their creation.
Currently the way we manipulate images is using a HTML canvas which is working well for us except for one problem.
Since we have a large amount of images we want to use for the canvas creation we must opt to store the images in a separate bucket (tried google cloud and firebase so far) however when we try to add an image from another source the canvas becomes tainted and the user can no longer download their image.
Basically were looking for a way to host a bulk amount of images off of our main site so that they can be used in the canvas and not taint them.
I have also tried putting our bucket on a subdomain but we are still having the same issue
Thanks for help!
I noticed on Bing that one of their images in their results has a file size of 10kb.
However, if you visit the image's URL in your web browser and save it, it is 1,000kb.
How do you reduce the image's file size and make it as small as possible when the image is loaded on the web page in an img tag? I want to make image file sizes as small as possible to improve my site's performance.
// Img element is 10kb when inspected with developer tools
<img height="280" width="472" data-src-hq="/th?id=ALSTUF4FE90D7416F684217D5CB5981876233154A9C88E70202C1C997332FF2185EEA&w=472&h=280&rs=2&o=6&oif=webp&pid=SANGAM" role="presentation" data-priority="2" id="embD38817586" class="rms_img" src="/th?id=ALSTUF4FE90D7416F684217D5CB5981876233154A9C88E70202C1C997332FF2185EEA&w=472&h=280&rs=2&o=6&oif=webp&pid=SANGAM" data-bm="101">
// Original file is 1000kb when saved to the computer
https://bing.com/th?id=ALSTUF4FE90D7416F684217D5CB5981876233154A9C88E70202C1C997332FF2185EEA&w=472&h=280&rs=2&o=6&oif=webp&pid=SANGAM
You can make a thumbnail from the original image, so it will be loaded a smaller version and then link the full version for download.
There are many ways to achieve this, you can create it from scratch, use a library, a plugin, etc.
If what you want is just to reduce the file size, not create a thumbnail image, I recommend to use tinypng for easy and fast image size reduction.
Our site runs through Netscaler and we have the Lazy-loading of images activated. I'm trying to understand it's functionality and if it can be controlled in any way. For instance if specific images can be set to not lazy-load. But I can't find anything on the specific implementation of it, just articles describing how to activate it.
If I understand it correctly it works like classic js-based lazyloading by converting imagetags by adding the class lazy and moving the src to data-original attribute. Then a javascript puts the correct src back when scrolled into view. But on what implementation is it based? Tried searching all loaded sources on lazy but can't find anything specific that seems to be connected to this behaviour.
Does anyone know how the Nestcaler lazy-loading is implemented and if there are ways to control it?
I suppose you are using Front End optimization feature, from https://docs.citrix.com/en-us/netscaler/12/optimization/front-end-optimization.html it will do the following:
JPEG optimization, CSS image inlining, Image shrink-to attributes, GIF
to PNG conversion, HTML image inlining, WebP image conversion, JPEG,
GIF, PNG to JPEG-XR image conversion
You can control the policies that have the lazyload option by using expressions on said policies. For instance, you only want to apply lazy load on images from https://www.yourwebsite.com/images/ folder. You would use a policy like this:
HTTP.REQ.URL.CONTAINS("images/")
and then create and action to only use lazy load
add feo action lazyloadaction 0 -imgLazyLoad
For those unaware of TimThumb, it will take any image, of any size or dimension and create a thumbnail on the fly to any desired size. The beauty of it is that it really works on any dimension you feed it through a combination of either resizing the image, cropping or zoom cropping the image.
Ive been searching for jscript equvalents but they either require the user to actually mask out the thumbs manually (looking for a script that automatically does it to images) or the scripts can't handle images in a different aspect ratio.
Thanks for any leads on this!
It is impossible to do this only with client-side javascript. PHP has GD, ImageMagick libraries which create the new image (actual thumbnail) and javascript alone can't do this, as it is client side script, it can't create files.
So the answer is: There is no any.
As #papirtiger pointed out you can still do it with server-side javascript (such as node.js).
Please see this link
It depends.
You can use CSS or Javascript for simple image scaling.
There are tons of available plugins to this.
I doubt that there is one that does the guesstimation exactly the same as timthumb.
If you are going resize a large amount images on the page it will really hurt performance.
Another alternative is to several fixed size "layouts" (960, 320) etc and have the server generate thumbs for each.
You can than use javascript to load the appriate size.
If you really need to rescale the file:
Use external webservice to resize the image.
Most of them take a url and return a resized image:
example.com/resize?image="http://example.com/image1.jpg"&height="...
If you have TimThumb running on your server you can set up a simple API to allow you to call your own service.
othrwise see Image resizing web service for a few alternatives.