Newbie, love html so far, need advice on linking drive imgs to website

I am building a website using txt editor (for now at least). I have worked out how to use an img in google drive in my website, but I need to reduce the size to fit on the page and load quicker, because currently the page loads about four seconds before the image (hardly surprising, because the html is on my pc.)
Changing the img size through html won’t make the file smaller, am I right?
So I need to reduce the size of the img in drive. Or is it best practice to have images which actually are displayed on a site on the same server and etc as the html itself? This would make sense to me, and then files which are available for download like ebooks etc, could be kept on drive.
Any advice definitely welcome.
Robin

Hello Robin!

You are correct when you say that it is best to have the images on the same server.

You are also correct when you say that resizing the image in HTML does not make a difference (This is because the browser renders HTML, not the server).

I also recommend that get a code editor meant for web development. Sublime text is free, and is amazing.

Image files from cameras tend to be much too large for web pages, both in terms of bytes and in terms of pixel dimensions. Software, such as the free paint.net, allows you to resize images and to adjust JPG compression (“quality”) to minimise file size. There is a trade-off between file size and quality that you have to judge subjectively. Important: make sure you do not overwrite your existing image file when saving!

It’s possible to have more than one size of image available on your server. This allows smaller image files to be downloaded to smartphones and tablets (reference). I suggest you don’t bother with this initially.

If your image is a simple graphic, such as a logo, then PNG file format is likely to give smaller file size and better quality than JPG.

3 Likes

Thanks for the great advice. Will download img files to pc and put in folder in website having shrunk them, and yes, being careful not to shrink the original.

Thanks for your advice.
As to using a code editor, I intend to eventually but for now actually quite like the simplicity of using text. I have come into html from ebook editing. It suddenly occured to me that the ebook editor I have been learning about -Sigil- could build a webpage. It’s got a lot in common with an html editor.What do you think? I intend to use Sublime as well, per your advice, but I am curious to know the difference between an ebook editor and and a html editor. They both use html after all.

Not strictly true. From the website:

Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use.

1 Like

If you want an amazing free editor, have a look at VS Code. It can do loads of things out of the box and there are also a lot of plugins to add functionality.

1 Like

and it takes 5 minutes to start even on a brand new high performance PC :smiley:

SCNR

A couple of seconds on mine :person_shrugging:

1 Like

I’m not familiar with Sigil, but it looks as if it uses XHTML. Does it also offer the option of HTML5, which has a number of semantic elements not available in other (X)HTML versions and is therefore now the most widely-used version (I believe)?

If Sigil does everything you need it to do, and you’re familiar with its use, then there may be no need to change at this stage. But you might find it easier to build websites using a tool designed specifically for that purpose, rather than one designed for creating e-books. While there are similarities, there are also differences.

Most dedicated code editors can work in several common languages used by developers, not just HTML.
So you can work on CSS, Javascript, PHP, XML, Python, Ruby, Etc…
There are a few free ones available if you search as well as paid options.

1 Like

This is from their website, so I believe the answer is yes.Sigil-0.9. 5 like its predecessors passed all of the following tests for epub3 support: iframe, img, audio, video , mathml, svg (except for svg support in the spine), javascript, and of course recognizing and allowing html5 specific tags like section , and etc

A rule which serves me well in life is to try and use the first and cheapest tool as long as possible. Then, when I switch to the more appropriate/better tool, I really appreciate the difference. This applies to screwdrivers,software and kitchenware, anything really!

So I will try and use sigil as long as possible. Also, having less features to begin with I actually find helpful.

Thanks for your help.

1 Like