The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 1 image displaying either really small or blurry despite width and height being set to the parameters in the image properties, HTML Email Signature
Emilyeagleowl
post Apr 29 2019, 06:42 AM
Post #1





Group: Members
Posts: 7
Joined: 29-April 19
Member No.: 26,889



Hi guys!

I'm new here and I am new to HTML/CSS and building websites in general so hello!

I started learning HTML about 2 months ago as I got put in charge of our companies online profile and tasked to tweak our companies email signatures. I did a bit of digging and decided it was probably a good idea to use HTML so they couldn't be corrupted when viewed on different email platforms as I had noticed it in the past and it really annoyed me.

I have created an email signature with HTML which looks like our old one which is what my boss wanted however I have hit a snag.

There is an image at the bottom of the signature, a banner with our web address written.

If I look at the properties of the JPEG file it says the width 623 pixels and the height is 129 pixels.

But when I insert it into my email signature it looks tiny. I have had a look of the properties of my other images used in the signature and according to the properties from the JPEG files the pixel sizes are smaller than the banner image that looks tiny. But when they are displayed in HTML editors and when I save it as an index.htm file it still looks minuscule.

At the beginning of the signature I used an internal style sheet to specify the different fonts styles, sizes and colours that I wanted to use as there are a few in my bosses chosen design and even when I try and specify the image size in this section or in the tag for the image it blurs the image. Even when I set the height and width to the same number of pixels as stated in the properties.

unsure.gif

The images are hosted on a google drive specially created for this purpose but no matter what I do, resize it change the specifications it looks tiny and riduclous. I don't know what I'm doing wrong.

The pictures are part a table as that is the only way I could think of to get the layout the way my boss wanted it look. I don't think it makes much difference to this image as I have tested and played with it without the rest of the email signature and it still does the same thing. Renders looking tiny whereas the rest of the images look how I expected them to.

I'm sorry if this is a dumb question but I need to insert the signature into my emails and test the links before I help everyone else who works here with theirs and I'm currently pulling my hair out.,

Any suggestions would be greatly appreciated.

Thanks!

smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 29 2019, 08:10 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,366
Joined: 9-August 06
Member No.: 6



Could you show us the HTML and CSS you are using, please? You can replace any sensitive text with dummy text if you want, but don't replace the image.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Emilyeagleowl
post Apr 29 2019, 09:01 AM
Post #3





Group: Members
Posts: 7
Joined: 29-April 19
Member No.: 26,889



QUOTE(pandy @ Apr 29 2019, 08:10 AM) *

Could you show us the HTML and CSS you are using, please? You can replace any sensitive text with dummy text if you want, but don't replace the image.


Hi,

Thanks for your reply! I have got the template. I'm sorry if its terrible/really long winded. Winging it and all that.

happy.gif


Attached File(s)
Attached File  Email_Signature_Sample_Work_in_Progress.txt ( 3.1k ) Number of downloads: 189
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 29 2019, 09:14 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,366
Joined: 9-August 06
Member No.: 6



This image?
https://lh3.googleusercontent.com/8NdpLoUrH...B8g_3JvdGMWaWNc

Well, it has at some point been resized. It isn't the size you say. It's 220 x 40. Try uploading a new copy.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Emilyeagleowl
post Apr 29 2019, 09:27 AM
Post #5





Group: Members
Posts: 7
Joined: 29-April 19
Member No.: 26,889



QUOTE(pandy @ Apr 29 2019, 09:14 AM) *

This image?
https://lh3.googleusercontent.com/8NdpLoUrH...B8g_3JvdGMWaWNc

Well, it has at some point been resized. It isn't the size you say. It's 220 x 40. Try uploading a new copy.


Hey, I can't actually see the image. When I click the link it just comes up with an error 404 message? Not sure why that is
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 29 2019, 09:47 AM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,366
Joined: 9-August 06
Member No.: 6



Ah, the URL changes. I entered the URL you have in the HTML and then I must have copied it from the address bar in my browser, but it was changed. I can't see it either when I try to go to that URL directly.

Try the original URL.
https://drive.google.com/thumbnail?id=1peYR...yxLPuTfkrG7TzvY

Now I see the word "thumbnail" in that URL. Could it be that Google automatically creates thumbs and you have linked to the thumb instead of the original by mistake? I don't use Google Drive, so I don't know how it works, just guessing.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Emilyeagleowl
post Apr 29 2019, 10:55 AM
Post #7





Group: Members
Posts: 7
Joined: 29-April 19
Member No.: 26,889



QUOTE(pandy @ Apr 29 2019, 09:47 AM) *

Ah, the URL changes. I entered the URL you have in the HTML and then I must have copied it from the address bar in my browser, but it was changed. I can't see it either when I try to go to that URL directly.

Try the original URL.
https://drive.google.com/thumbnail?id=1peYR...yxLPuTfkrG7TzvY

Now I see the word "thumbnail" in that URL. Could it be that Google automatically creates thumbs and you have linked to the thumb instead of the original by mistake? I don't use Google Drive, so I don't know how it works, just guessing.



Hi, I can now see the image. And I have just checked a few more articles and I think you are most definitely right. I found another article that suggested writing the image source like this instead of using "thumbnail".

image src= https://drive.google.com/uc?export=view&...EdGNQYn0tqkBKX5

And it worked it displayed the actual size and when I scaled down to the pixel size that I wanted it in the first place it didn't go blurry and it's still sharp!!!!!

Thanks so much for your help!!!! I would never have twigged it was the google drive automatically creating thumbs. The only reason I have been hosting the images on a google drive is that when everyone uses this template I didn't want the images saved in the same file on their computer and if they tried to edit something on their footer and delete all the images.

Thanks again, that issue was driving me round the twist!!!! I'm going to make sure the other images are ok now.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 29 2019, 12:39 PM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,366
Joined: 9-August 06
Member No.: 6



All's well that ends well. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th September 2019 - 02:00 AM