Adding images to your GitHub Pages can significantly enhance the visual appeal and comprehensibility of your content. Here's a step-by-step guide on how to achieve this.
Before we dive in, ensure you've already set up your GitHub Pages repository. If not, you can follow GitHub's official guide to create one.
Preparing Your Image
Before uploading, make sure your image is optimized for web use. This involves reducing its file size without compromising quality. Tools like TinyPNG or Squoosh can help with this.
Also, ensure your image has a descriptive filename and alt text. Alt text is crucial for accessibility and SEO. It describes the image for visually impaired users and helps search engines understand your image's content.
Image Formats
GitHub Pages supports several image formats, including PNG, JPG, and GIF. However, JPG is generally recommended for photographs, while PNG is better for graphics with transparent backgrounds.
For animated GIFs, use them sparingly as they can slow down your page loading time.
Image Size
While there's no strict size limit, keep your images under 8MB for optimal performance. Also, consider the dimensions. Images that are too large or small may not display as intended.
For GitHub Pages, images with a width of around 600-800 pixels usually work well. You can adjust the size further using CSS.
Uploading and Linking Your Image
Now that your image is ready, let's upload it to your GitHub Pages repository.
First, navigate to your repository on GitHub. Click on the '+' icon in the top-right corner and select 'Create new file'. Name the file with a descriptive, lowercase name, including the file extension (e.g., 'my-image.jpg').
Uploading the Image
In the file name field, type a brief description of the image, then click 'Commit new file' at the bottom. This will create a new file in your repository.
Now, drag and drop your image into the file editor, or click 'Upload files' to select it from your computer. Once uploaded, click 'Commit changes' at the bottom.
Linking the Image
To display the image on your GitHub Pages, you'll need to link it from your markdown file. In your repository, navigate to the markdown file where you want to insert the image.
Use the following syntax to link your image: ``. Replace 'Alt Text' with your image's alt text, 'your-username' with your GitHub username, 'your-repo-name' with your repository's name, and 'your-image-name' with the name of your image file.
Displaying the Image
Once linked, your image should display correctly on your GitHub Pages. However, you might want to adjust its size or alignment. You can do this using CSS.
To add CSS, create a new file named 'styles.css' in your repository's root directory. In this file, you can define styles for your image. For example, to set the width to 50% and align it to the left, you would write:
```css img { width: 50%; float: left; } ```
Remember to link this CSS file to your markdown file using the following syntax at the top: ``.
That's it! You've successfully added an image to your GitHub Pages. Keep experimenting with different images, sizes, and styles to make your pages engaging and visually appealing.