Silva Web Designs - Web Design / Web Development Specialists
  • Home
  • About
  • Services
  • Portfolio
  • Team
  • Blog
  • Contact
Scroll

Tag: Photos

Best Practices To Maximise The Effective Use Of Photos In HTML

Posted on 16th February 202217th February 2022

There are many reasons for adding an image to a web page. This image can be, for example, a logo, photograph, illustration, diagram or diagram. So let’s find out how to insert a picture into HTML.

There are a few things to think about before adding an image to your site, but the time spent on them will pay off in that your site looks much more professional and attractive with the help of Rootsaid.

You can also use the Cascading Style Sheets (CSS) background-image property, which you will learn about later, to add images to your page.

How to insert a picture into HTML: selecting an image for a site

An image is worth a thousand words, and the right images differentiate ordinary sites from truly attractive ones.

An image sets the tone for a website incomparably faster than a text description. If you do not have your own photos to post on the site, you can turn to stock photo hosting sites, which offer millions of images available for use for some fee or for free (you will find a list of such resources just below). Remember that all images are subject to copyright law, so simply using graphics copied from other sites can cause serious problems.

If you’ve created a page with multiple images (for example, photos of a product or team members), placing them on a simple yet meaningful background will improve the perception of them as a group.

Images should:

  • to be in place;
  • carry information;
  • create the right mood;
  • be easily recognisable;
  • match the color palette of the site.

How to insert a picture into HTML: positioning images on a site

If you are building a website from scratch, it is useful to create a separate folder to store all the images used on it.

As your site grows and expands, placing all images in a separate folder will make file management easier. Below you can see an example of how to store images for a site: all images are in a folder named images.

When building a large site, you can also add multiple subfolders to the images folder. For example, images such as logos and buttons can be stored in the interface subfolder, product photos in the products subfolder, and site news images in the news subfolder.

If you are using a content management system (CMS) or blogging platform, then, as a rule, there is already a special toolkit that allows you to upload images to the site, and, possibly, a separate folder for storing graphic and other user files.

Image editing and saving tools

There are several tools you can use to edit and save images at the size, resolution, and format you want.

Among professional web designers, the most popular tool is Adobe Photoshop. (In fact, professionals often use it to design entire site graphics.) The full version of Photoshop is quite expensive, but a cheaper version of Photoshop is also available, Photoshop Elements, which most newbies will enjoy.

In case your image contains a large number of shades, always use the JPEG format. It may seem that photographs depicting snow or overcast skies consist of large areas of solid white or grey, but this is not the case: usually, photographs contain a huge number of shades that are barely visible to the naked eye. You can also contact retouching studio to make everything faster.

How to insert a picture into HTML: image dimensions

Images saved in site folders must have the same height and width values ​​that you specified in the page code.

For example, if you created a web page that includes an image 150 pixels wide by 300 pixels high, then you need to use an image that is 150 pixels x 300 pixels high. You can use a graphics editor to crop or resize an existing image. When creating images for a website, it is very important to understand how you can resize them. Let’s say you’ve created a web page that you want to place an image 300 pixels wide by 150 pixels high.

The JPEG, GIF, and PNG formats belong to the family of bitmap image formats. Such images are composed of a large number of miniature squares. Image resolution is the number of these squares that fit in an area of ​​1 square inch. Images displayed on a computer screen are made up of small squares called pixels. To demonstrate how an image is composed of pixels, we enlarged a section of the image. On most desktops, browsers display graphics at 72 PPI. Images in print media such as books and magazines are made up of tiny circles called dots. Such images are usually printed at 300 dots per inch, dpi. With the help of the following article can be reached the best results.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Posted in HTMLTagged Best Practices, CSS, HTML, Logo, PhotosLeave a Comment on Best Practices To Maximise The Effective Use Of Photos In HTML



Get in touch

Do you need a professional designer/developer for your next project? Get in touch using the form below.


    Categories

    • CSS
    • HTML
    • JavaScript
    • jQuery
    • MSSQL
    • MySQL
    • PHP
    • Technologies
    • Wordpress



    Recent Posts

    • How To Configure Your WordPress Writing Settings
    • Website Security Checklist – How to Secure Your Site in 2022
    • Everything You Should Know About Connection Between SEO and HTML
    • How to Load More Posts using Ajax with a Button or on Scroll in WordPress
    • 8 Ways Your Business Can Manage High Turnover

    Looking for Website Hosting?


    Love our blog?

    Why not sign up to our newsletter for the latest tutorials and web related gossip.

    • Home
    • About
    • Services
    • Portfolio
    • Team
    • Blog
    • Contact

    © Copyright SILVA - 2022 - Cookie Policy | T&C

    This website uses cookies to improve your experience. Accept Read More
    Privacy & Cookies Policy

    Privacy Overview

    This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
    Necessary
    Always Enabled
    Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
    Non-necessary
    Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
    SAVE & ACCEPT