Register

The Most Active and Friendliest
Affiliate Marketing Community Online!

Register
“Adavice”/  “1Win

Responsive Image with Simple HTML/CSS Code

ironbull

ironbull

Active Member
Hi,

I would like to know what is the best way to set up a responsive image with simple HTML/CSS code. Just now I can't find a person who is able to adapt PSD to Web format so my quick solution is just to upload the image and make it all clickable.

The code I am trying is this one:

HTML: 
<!DOCTYPE html>
<html>
<body>
<title> Landing Page </title>
  <a href="http://www.google.com">
    <img src="http://example.com/img.png" style='width:100%;' border="0" alt="IMG">
  </a>
</body>
</html>

but it is not working 100% right. I get a white border all around the image of about 10px.

Any coders here?

Thanks
 
Hi. It´s a default margin of HTML.

Try this. Put your own image between the quotes.




<!DOCTYPE html>

<head>
<title> Landing Page </title>

<style>

* {margin:0px;
padding:0px;
}

div {width:100%;
}

img {width:100%;
}

</style>


</head>

<html>

<body>

<div>
<a href="Google">
<img src="" border="0" alt="IMG">
</a>
</div>
</body>

</html>
 
Now I am trying to cache the image by hard code. I usually use Wordpress plugins to do it, so now I am a little bit lost with that. Do you know something about caching images just with normal code?
 
Ezbren said:
If by caching images you mean reduce its size you can do it with Photoshop or any software like this . If you don´t have Photoshop you can try this: Photo Editing and Effects | Autodesk Pixlr . It's free and online. Sure works almost the same way
Click to expand...

Yes, what I mean is that I need to reduce the loading time of the page without losing the quality of the image. I have Photoshop so that is not a problem for me. What option should I use?
 
In Photoshop go to File and instead of Save your image the traditional way, there´s an option called "Save for web"

There you have to select your image format(if it's a static image choose Jpg or Png, if it's an image with movement choose Gif). Then you have to play a little with the options assuring that you don't lose quality.
 
Great! that was awesome help. Now my page is about 104KB and loading time is 254ms. Is that good for mobile or still room for improvement?
 
I'm not an expert about this. I think it would be ok. Also depends where you host your page and your target country. It's not the same if you host your page in a shared a hosting that if you do it in VPS. But again I don't have much idea about landing pages weights.
 
ironbull said:
Great! that was awesome help. Now my page is about 104KB and loading time is 254ms. Is that good for mobile or still room for improvement?
Click to expand...

I am getting ready to start my first mobile marketing projects to launch mid year. From my research and recommendations given me, your server must load the above the fold page in 200ms or less.

A VPS can do this, but depending on volume, a dedicated server is a better bet I think with high volume mobile load times.
 

Similar threads

Graybeard
I used GPT-4 to write code for a new product
Replies
11
Views
3K
Graybeard
Graybeard
Graybeard
ChatGPT and I wrote a JSON script (PHP+MySQL)
Replies
14
Views
3K
Graybeard
Graybeard
N
Struggling with some HTML in an adplexity template
Replies
2
Views
1K
Graybeard
Graybeard
L
adding tracking url to a prelander html file.
Replies
12
Views
7K
Yellow Web
Yellow Web
Ma'at Hetep
Help with Geo-location Script
Replies
4
Views
3K
Graybeard
Graybeard
banners
Back