Server Side Image Sizing For Responsive Web Site - javascript

I need a good idea. I have a website with responsive design.
For example, I have a post and this post has a cover photo and :
If the user's device is a mobile phone, I want to load this image like 300x300.
If it's desktop device ==> 800x500
If it's tablet ==> 600x400
The sizes are only examples. In reality, there are not only 3 sizes but 14 different sizes.
Now what should I do when uploading this image : Should I create 14 different sizes for one image ?
Holding 14 files for 1 image doesn't make sense to me. There should be a better way.
Do you have any better idea ?

Popular approach to this problem is to generate multiple sizes of the same image dynamically. You can put the requested dimensions in the query string of the image URL, with potential size validation.
Often, these images are lazy-loaded, so the size is being generated the first time someone requests it.
Example:
<img src="http://example.com/img/image.php?file=profile.jpg&size=400x400">
The image.php file would return the contents of existing scaled image file (if it exists) or generate it if it doesn't yet.

I hope I understand you correctly, but by creating a separate layout for each device, you can determine how large the image should be for this device.
It could look something like this:
<!DOCTYPE html>
<html lang="en-US">
<body>
<mobilephone>
<style type="text/css">#media(min-width: 400px){smallheader{display: none;}}</style>
<img src="Your Image">
</mobilephone>
<desktop>
<style type="text/css">#media(max-width: 400px){smallheader{display: none;}}</style>
</desktop>
</body>
</html>

Related

responsive HTML images using width and height values in image tag

Currently my website is setup where the full image that is in it is loaded then automatically sized to fit the screen. This is done by setting image width to 100% in CSS. While it does work nicely, It doesn't seem to follow standards because I don't specify width and height in the image tag itself.
My idea now is to create multiple versions of the same webpage, where the only difference is the size of the image. Each image would have its own filename (like image1small.jpg, image1medium.jpg etc).
The problem is most people want to see the bigger picture right away but this doesn't go well with people with small screens since they have to scroll horizontally to see the whole thing.
I was thinking putting javascript at the top that redirects users who don't meet screen criteria to the page with the better sized image. Something like this:
<html>
<head>
<script>
if (screen.width < nnn){window.location.href="smallerpicture.htm";}
</script>
</head>
<body>
<p>some random text</p>
<img src="image.jpg" width=nnn height=yyy>
</body>
</html>
The thing is a page redirect will occur for people who do not meet the screen resolution requirements for the page. I'm not sure if this can qualify as a sneaky redirect to google.
Is this a good practice to use the code like I showed above to redirect users with incompatible screen size to the correct page? or should I take a different approach to display the correct sized image to the user?
And regardless of the answer anyone gives, I feel I need to specify the width and height attribute for the image tag and I want to stick to the HTML 4.01 strict standard so that the page will work for everyone.
The first draft of the HTML 5 standard was designed to work for everyone - it basically documented "what browsers actually do", rather than what browsers were supposed to do.
The rationale behind specifying the width and height attributes is that it reserves the space on the page even before the image loads, preventing the need to re-flow the content when the image loads.
Choosing to specify the attributes, but then redirecting the page, will cause a worse re-render than using the % width without the attributes. So I think your concern is unfounded as your medicine is worse than the illness.
The desire to server different image sizes is one of the use cases for responsive images, so you can take a look at that as an option rather than reloading the page. There are several fallbacks that give you wide-ranging browser support.

Pre-loading a website title banner & adding it to Cache

Ok, so its been a while since I've built a website, and I'm trying to blow out the cobwebs, so to speak.
I have built the following website: http://pinkgiraffecakes.tk/
As you may have noticed, it takes a long time to load the Title Bar. I am aware that you can pre-load images using Java and CSS, but the solutions provided all seem to be for use on other pages (i.e. pre load images on the home page so they are quicker to appear on other pages).
What I would like to do, is to pre-load the title bar and all the other associated images, store them to the cache, THEN show the homepage.
Is this possible? If so, could someone please provide sample code or a link to a tutorial on how to achieve this.
Thanks.
First and foremost, you should scale and optimize your images before resorting to lazyloading, preloading and shenanigan-loading. I ran pingdom on your site and almost choked.
The main title weights 3.5MB, but it can be optimized lossless to 185Kb
The facebook button weights 3.5MB too, and it can be optimized lossless to 68Kb.
I just shaved over 7MB from your home screen.
Besides that, you're serving 1280x720px images as 150px x 75px buttons. You really need to display a scaled version instead of using the raw image with fixed height and width.

Load a scaled down/low resolution image in HTML

I have small sized <img> in which I put very large pictures. This makes image loading slow and is a waste since I dont really need to download the whole big picture, I show it in very small size.
Is there a way to make HTML load lower resolution images instead of full image resolution? so the loading will be quicker.
There is no feature of HTML (that I am aware of) that automatically generates a thumbnail sized image for you for faster loading. Some sites will do that automatically when you upload like on Wordpress or various e-commerce solutions. So unless you are using one of those, you will have to do your own image re-sizing, before you upload, or write your own feature of the site that resizes images on the fly on the server side.
You have to do this work on the server side, since HTML/CSS/JS are all client side only (node.js non-withstanding) and could only do the resizing for you once the image was already downloaded, which defeats the purpose.

How do I load a H1 tag first

I just took a look at my page speeds which you can see at,
http://www.webpagetest.org/result/140310_A0_4Q3/1/details
There seems to be a delay loading my <h1> tag which is extending my page time. Is there a way to force the <h1> tag to load earlier?
Thanks in advance for the help.
Michael.
The problem is your background image and the logo image(in the h1 tag). Try to optimize them in a image editor, and save them for web. Also you should save them as .jpeg, as they are not transparent images, so you will save more from file size.Later edit: If you want the transparent logo image, save it as jpeg for web, then use css opacity.
It's loading a PNG image (logo.png) file that is over 386 kb in size and takes time to download. Try reducing the size in your image editor if you're not content with the page load speed. Possibly making it a high quality jpeg if you don't absolutely need it to be png. Your page seemed to load fairly fast for me as it is.

How to generate thumbnails automatically with uniform size from orginal images?

I have orginal image from post. I now want get it to create thumbnail but the image is blurred because of resizing.
You can see example from this image :
How can i do that with javascript/jquery?
Thanks for your help.
If you're willing to use CSS rather than jQuery, you could investigate the background-size:cover declaration.
<div style="background:url(/path/to/your/image.jpg);background-size:cover;height:200px;width:170x;"></div>
This ensures that both portrait and landscape orientation pictures will fit into whatever size div you decide.
DEMO: http://jsfiddle.net/8V4f6/
From the images you posted, I assume you already know how to force the size using HTML or JavaScript (e.g., <img width="32" height="32">, myImage.style.width="50%", etc.). Since you said, "image is blurred because of resizing,", I think you're asking how to resize with better quality.
You can't control the quality of resizing done in the browser. (A few years ago, I did a comparison and found big differences in quality between browsers.)
For better quality, your only option is to create separate images using a better algorithm (often referred to as "resampling"). Personally, I use either ImageMagic (any platform) or IrfanView (Windows).
With ImageMagick:
mogrify -path MY_THUMBNAILS -thumbnail 32x32 *.jpg
That's also quicker to download for the user. In contrast, if you were to simply use HTML or JavaScript, the user's browser would still have to download the full resolution file of every image, even if it looks small on the screen.
I realize that isn't the answer you asked for. If you really must do everything in JavaScript, I suppose you could write a web service that resizes images and returns thumbnails. I don't think that's what you were after.
You can use the same image with a lower height and width attribute as your thumbnail image.
<img src="http://i.stack.imgur.com/AziqE.png" height= "10" width = "10" alt = "test image"/>

Categories

Resources