image resize help

robynfali · Post by **robynfali** » Tue 08 May 2012 6:25 pm

Hi all!!

I have been messing about with my mobile sites, putting a link in for my webcam image, but i want to take it a little further.

I have the iphone one

http://valley-weather.co.uk/mobile/index.html#_home

and the android one

http://valley-weather.co.uk/android/

What i would like to do, is to put a scale down image into both of these, that could possibly be clickable so that they can view it full (mobile) screen.

I have done a bit of a search, but all I am finding is lectures on why not to do it!, i don't want to have to process a 2nd image purely for mobile because as far as I can see yawcam doesn't allow a 2nd instance using the same camera.

So basically all i am after is how you scale the image using html, and also possibly a suggestion on what size to rescale it to. Aiming at android & iphones?

Thanks in advance

nitrx · Post by **nitrx** » Tue 08 May 2012 6:43 pm

Well you can put the image in a html page and resize it with the height and widht tags

http://valley-weather.co.uk/images/webcam.jpg is 640 by 480 pixels if you use the html code

<img src="http://valley-weather.co.uk/images/webcam.jpg" width=320 height=240></img> the image wil be the half http://www.htmlcodetutorial.com/images/_IMG_WIDTH.html some examples but you should use the tags in a html page

by example

<html>
<body>
<img src="http://valley-weather.co.uk/images/webcam.jpg" width=320 height=240></img>
</body>
</html>
You can adjust the values width and height but it's better to keep the dimensions the same.

will do , perhaps there are alternative solutions this is a simple way of resizing for displaying in a webpage, the pageload wil be the same for the visitor of the page there is not a smaller image loaded to the adroid phone or tablet.

robynfali · Post by **robynfali** » Tue 08 May 2012 8:14 pm

Thanks mate, having a mess about with it now

mcrossley · Post by **mcrossley** » Tue 08 May 2012 9:15 pm

Rob, that will work but the reason for the lectures is that does not alter the size of the file that has to be downloaded. To do a 'proper job' then the image could be resized on our server using PHP. Then a small thumbnail is downloaded to the phone, and only if the user elects to zoom it up in size would the full size image be downloaded.

How to implement that I defer to the PHP experts.

robynfali · Post by **robynfali** » Tue 08 May 2012 9:38 pm

I do realise the proper way is to resize the image, but i do wonder how long it would take to download a 640x480 over 3g these days? I don't have PHP running on mine at the moment. Paul graciously helped me last year to do a complete php thing, then i fell onto Jacques templates which are just about my level of understanding

gemini06720 · Post by **gemini06720** » Wed 09 May 2012 3:56 pm

mcrossley wrote:How to implement that I defer to the PHP experts.

Mark, the best way to create thumbnail image (as the thumbnail will have a smaller size than a shrunk down image using the 'width/height' parameters) is to use either a PHP script or a PHP class - some of the scripts available can even create 'on-the-fly' thumbnails...

I am using such as script to create an animated image of the radar screens - at the bottom of the left-hand menus on all of my [link removed] pages.

TNETWeather · Post by **TNETWeather** » Sun 20 May 2012 3:24 am

If your webhost has it, you can use Imagemagick to resize an image.

Like:

Code: Select all

convert original_image.jpg -resize 25% new_image.png

Reduces the size by 25%... Note that it also changed the image format from jpg to png which works better for smaller images (less lossy look).

You can give it exact dimension sizes as well. like:

Code: Select all

convert original_image.jpg -resize 120x120  new_image.png

If you don't have that, chances are your PHP has GD built in. There are lots of scripts you can use to then do the same thing all within PHP.

I use convert a ton... for everything from NOAA images, to converting 720x1280 images for Droid Splash Screens into reasonable size thumbnails.

ronstrong · Post by **ronstrong** » Mon 21 May 2012 11:27 am

Why an android page when the 'iphone' one works great on android?

Could I have a copy of your template?

I;d just use the tags to resize

thanks

ron

Ron
http://www.chapelallerton.org/weather/

robynfali · Post by **robynfali** » Mon 21 May 2012 4:36 pm

Gives people a choice on information all on one page, or more information on a few pages, if you want the iphone template, go to the Wiki and search for ICumulus for iPhone

Cumulus Support

image resize help

image resize help

Re: image resize help

Re: image resize help

Re: image resize help

Re: image resize help

Re: image resize help

Re: image resize help

Re: image resize help

Re: image resize help