A few tips that will help you publish images on your site more conveniently and reliably, and will ensure better user experience for your visitors.
Use relative URLs
Instead of absolute URLs (e.g., https://mydomain.com/img/picture.jpg), use relative ones containing no domain name (e.g., /img/picture.jpg):
- if you later change the domain of your site then all previously added images will remain accessible because browsers will automatically apply the current (new) domain to image URLs and will not try to load them from the old domain,
- if you add other sites to your Webasyst account, which will contain some of the same content, then images on the newly added sites will be loaded from their respective domains, and all your sites will appear independent from each other.
Prepare properly sized images
If you need to show rather a small logo on your site, it is better to prepare it with the required dimensions in an image editor rather than to expect browsers to scale it to the displayed size (browsers will certainly do so but pages with such a large logo file might load slower, which your visitors will hardly like too much).
Remember to take high density screens (Retina) into account, for which double image size (in pixels) is required; e.g., 800 pixels instead of 400 pixels, which would have been enough for standard screens.
Use suitable formats
It is best to publish images in JPEG (for photos), PNG (for design elements), or WebP (for faster loading). For instance, TIFF or BMP formats are not too good for this purpose.
To obtain an image in a certain format, it is not enough to simply rename the file. E.g., renaming picture.bmp to picture.jpg will not produce a JPG image; to obtain such a file, open the source image with a special image editor, or converter, such as GIMP or Adobe Photoshop and save/export it to the required format.
Optimize the size
Two images can be equally displayed in a browser but have different file size. It is important because the file size affects the page loading speed — the faster images are loaded the quicker a visitor will get all the content fully displayed before going away if forced to wait one or two seconds longer.
To reduce the file size of published images, use special image editors or online services such as squoosh.app or tinypng.com.
Add SEO
Images can be optimized for search engines, too: Internet users will find images by certain keywords and then navigate to your website.
This can be managed with the help of alt="..." attributes added to <img> elements (type any text instead of the ellipsis in this example):
<img src="/img/photos/electrical-switchboard-diagram-sb1.jpg" alt="Electric diagram of switchboard SB1">
It is also useful to add the title="..." attribute with a similar value to make text displayed in a browser when a visitor hovers the mouse cursor over an image.
To ensure that your images are more frequently found by certain search queries, name their files to match the contents. If you name an image file, displaying an electric diagram, something like 123qwerty.jpg, this can hardly be called good search-engine optimization.
Upload images to the server in bulk
It is faster to work with them this way:
- Prepare all the required images on your computer.
- Upload them all at once to the server.
- Copy the uploaded images’ URLs one by one and add them to the site pages.
Store image files on your own site
It is possible to embed images from other sites on your own one (provided that their owners don’t mind). But various failures or changes on third-party sites will affect your own site’s functioning, too, and some images may become unavailable. It is more reliable, therefore, to upload all image files to your own server (Webasyst account) so that you can have full control over your website contents.
0 comments
No comments yet.