SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast Soapmarine's Avatar
    Join Date
    Dec 2013
    Location
    Belgium
    Posts
    68
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to make text and image crisp in the fullpage image?

    Hello everybody,

    I'm trying to implement fullscreen image slider with customised typography. Well, I added the text directly on the graphic, saved it as png for web, dimensions 1400x1000, image size 700KB (maximum resolution quality!).

    Unfortunately, it looks horribly pixelated: http://soapmarine.com/boccamoka/

    Is there any trick or rule to make work such kind of visuals properly?

    Thank you for advices!

  2. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,397
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Use real text and overlay it over the image, that way you will have full typographical control and will display much better. As it is now the images is being resized to ft the viewport so text objects will never display correctly.

  3. #3
    SitePoint Enthusiast Soapmarine's Avatar
    Join Date
    Dec 2013
    Location
    Belgium
    Posts
    68
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bluedreamer View Post
    Use real text and overlay it over the image, that way you will have full typographical control and will display much better. As it is now the images is being resized to ft the viewport so text objects will never display correctly.
    You mean I should put the text separately in JPG and use it as second background image?

  4. #4
    Non-Member sophiaking's Avatar
    Join Date
    May 2014
    Location
    South Africa
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes the text should be separate from the background images
    good for seo and you can use embedded fonts to find a good font

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,384
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You know one of your pages says "utterstock" -- backwards?
    Steve Husting

  6. #6
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,397
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Soapmarine View Post
    You mean I should put the text separately in JPG and use it as second background image?
    No, text should be text, not in an image.

    Add the text as normal HTML then apply the photo as a background image.

    Code:
    <div class="mydiv">
        <h1>My heading</h1>
        <p>My description...</p>
    </div>

  7. #7
    SitePoint Enthusiast Soapmarine's Avatar
    Join Date
    Dec 2013
    Location
    Belgium
    Posts
    68
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by StevenHu View Post
    You know one of your pages says "utterstock" -- backwards?
    I'm sorry, what does it mean?

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,374
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by Soapmarine View Post
    I'm sorry, what does it mean?
    Presumably that the image has been taken from Shutterstock and has a watermark embedded. At some point, the image must have been reversed.

  9. #9
    SitePoint Enthusiast Soapmarine's Avatar
    Join Date
    Dec 2013
    Location
    Belgium
    Posts
    68
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Presumably that the image has been taken from Shutterstock and has a watermark embedded. At some point, the image must have been reversed.
    Oh, yeah, this one. This is normal. I have not yet bought these images, I just do some testing to see if it will work or not globally.


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
  •