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

Get Started
1

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

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

You mean I should put the text separately in JPG and use it as second background image?

4

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

You know one of your pages says “utterstock” – backwards?

6

No, text should be text, not in an image.

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

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

I’m sorry, what does it mean?

8

Presumably that the image has been taken from Shutterstock and has a watermark embedded. At some point, the image must have been reversed.

9

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.