Results 1 to 7 of 7

Thread: Defining Image Sizes for Mobile Web

  1. #1
    Mobility Member NailYener's Avatar
    Join Date
    Apr 2011
    Location
    Turkey
    Posts
    59

    Default Defining Image Sizes for Mobile Web

    I use (width='..px' height='..px') for images in my design. But MobiReady.com's test says that pixel and absolute measures should be avoided. So, what is the best way to define the size of an image for mobile web site? If I use something like a percentage or whatever, the images will get distorted on bigger screens and also we should consider that the image should look ok when the orientation is changed if using a device like iPhone.

    I am testing my current design which has absolute measures (px) on Blackberry, Samsung and iPhone. Blackberry shows a smaller image with a higher quality. Samsung and iPhone shows a larger image with a lower quality.

    I would really like to hear your ideas about this. Thank you.

  2. #2
    Senior Member ChinaMobi's Avatar
    Join Date
    May 2010
    Posts
    1,593

    Default

    I only think of mobile phones and so just physically size all my images to fit the small screen. Therefore, all my images have physical width not exceeding 240 pixels and I do not use width and height elements.

  3. #3
    Mobility Member NailYener's Avatar
    Join Date
    Apr 2011
    Location
    Turkey
    Posts
    59

    Default

    Quote Originally Posted by ChinaMobi View Post
    I only think of mobile phones and so just physically size all my images to fit the small screen. Therefore, all my images have physical width not exceeding 240 pixels and I do not use width and height elements.
    Sorry, I made a mistake in my question. I do not use px in sizes. Here is an example of what I use:

    HTML Code:
    <img src="logo.gif" width="130" height="60" alt="Site Name" />
    And I think of about mobile phones as well, I am not concerned very much about how the mobile site looks on the desktop. width and height elements are recommended practice as far as I know.

    So, do you think using

    HTML Code:
    <img src="logo.gif" alt="Site Name" />
    is a better option?

  4. #4
    Senior Member ChinaMobi's Avatar
    Join Date
    May 2010
    Posts
    1,593

    Default

    There are many experts on this forum, so they may be able to give you a better idea. If you look at all my .mobi sites, you see only <img src="logo.gif">. I don't even use alt because I assume smart phones by default can display images. I prefer compact code.

  5. #5
    New Member
    Join Date
    Jun 2011
    Location
    Brisbane/Bangkok
    Posts
    24

    Default

    Use CSS to auto size on the fly. You should use the alt as it us for onpage seo. Not using it is just missing out on traffic as SE does not graphics but the do see Alt.

    Something like logo in your alt is a waste of text. Make it descriptive like Logo of my business name

    Q
    Last edited by speedie; 06-21-2011 at 07:00 AM. Reason: Spelling

  6. #6
    Senior Member andymoore's Avatar
    Join Date
    Aug 2008
    Posts
    1,612

    Default

    Everything techie spec wise points to setting the image size:

    http://code.google.com/speed/page-sp...mageDimensions
    http://www.websiteoptimization.com/speed/tweak/size/
    http://developer.yahoo.com/performan....html#no_scale

    But <img src="src"/> works despite it putting extra stress on the browser as it has to think, that uses processor power which eats battery. Don't make the browser think too hard, don't make the user think at all!

    Use the alt tag. It helps search engines understand more about your page and the image.

    As for the SEO'ing you alt tag, why stop there? <img src="src" alt="keyword" longdesc="keywords in context" />

    Watch out for extra traffic that isn't worth having though. I mean really someone searching for images on Google isn't showing any signs of intent with regards to buying, they want a picture not to part with cash, convert or hit your calls to action. Image traffic IMHO ain't worth anything, I'm more than happy to be educated how to cash in on it if anyone knows though!

    Alts and longdescs attributes go some way to fulfilling accessibility guidelines but are so easy to overlook when in the 'code zone'.
    Andy Moore
    i don't do tech / mobi anymore - why do something that annoys and stresses lol

    New: Most Minty Tooth Oil - GMO and fluoride free toothpaste alternative

    100% natural botanical extracts to whiten teeth, freshen breath and strengthen gums
    Used, recommended and sold by Harley Street private dentists

    My other websites:

    http://sellyoursongs.info/ - Sell Your Songs using Mobile Payments
    http://detectmobilebrowsers.mobi/ - Detect Mobile Browsers
    http://andymoore.info/m-commerce-php/ - M-Commerce PHP (sell stuff on the mobile web)
    http://locationdetection.mobi/ - Detect a mobile browser's latitude & longitude
    http://andymoore.info/mysql-lyrics-database/ - Half a million lyrics


  7. #7
    Mobility Member NailYener's Avatar
    Join Date
    Apr 2011
    Location
    Turkey
    Posts
    59

    Default

    Andy, thanks for the links and your insights on the topic. I am building my fourth mobile website and although I don't like traditional web design, I enjoy mobile web design very much.

Similar Threads

  1. Weird compiled sizes ??
    By Scavenger in forum iPhone App Development
    Replies: 0
    Last Post: 03-03-2010, 03:24 PM
  2. Defining open mobile - TelephonyOnline
    By Scavenger in forum Mobile Industry News
    Replies: 0
    Last Post: 11-23-2009, 08:22 PM
  3. Replies: 2
    Last Post: 09-15-2008, 03:40 AM
  4. Image Sizes
    By Wedge in forum .mobi Compliance
    Replies: 5
    Last Post: 03-04-2008, 07:00 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
A Yup.mobi Mobile Site
Barcelona Walking Tours
Mobile Dating