Being a photographer does not mean having expertise in web development, and various platforms may suggest complex and expensive solutions that aren't practical or necessary. We aim to identify the important aspects and provide realistic, difficulty-graded options tailored to non-expert developers.
Maintaining a high-quality photography website can be challenging due to technical aspects. You strive for sharp image clarity alongside swift and efficient loading speeds. Platforms like WordPress and other CMS options may limit your creative control or force confident design choices that could degrade image quality or other aspects.
First Choices
Image Format: Consider the image format you'll use on your website. Opting for one that offers superior compression without sacrificing quality at varying resolutions ensures both file size efficiency and retina-ready sharpness.
Backend? Decide whether your website requires a backend system. This largely depends on whether you desire a simple portfolio site or a more expansive platform featuring numerous galleries and updates.
Hosting: While hosting plays an essential role, its impact is minimal when your website is appropriately optimised. Before you start your site, you should consider hosting options based on your chosen solution.
Domain: Choose an appealing domain name tailored to your target audience. Consider creating a region-specific domain to attract local clients within your city or country.
The Superior Image Format
In recent years, an efficient image format has emerged, though its adoption remains limited, being supported only by modern browsers. However, support is on track, and there should mostly be no issues. Yes, we are talking about the AVIF format. All modern hardware, including smartphones, should totally have no issues with it. Microsoft Edge is a little behind with the support of AVIF, though.
If you are building a website for the future, then yes, the gains of AVIF make up for the cutting-edge technology. Your image will be a lot smaller when using this format. The AVIF compression is optimised for large images, and this is exactly what we need in a photography website. Other formats like WEBP are efficient with smaller images but lack efficiency when the images become larger.
Compression Overhead:
- AVIF: AVIF is designed for high-efficiency compression, especially at high resolutions, and it often achieves better compression ratios than WEBP. However, it uses more complex algorithms (like AV1), which introduces more overhead in encoding, especially noticeable with smaller images.
- WEBP: WEBP also uses advanced compression techniques (like block prediction), but the overhead can be lower for small images, making it more efficient in some cases.
In most scenarios I tested, AVIF achieved the best results when the image was larger (over 500px wide). For very small images (under 200px wide), WEBP sometimes beats AVIF. The overhead simply means that file size can only be as low as the compression overhead allows. So, if you need small thumbnails, where each should be under 10KB, then yes, WEBP is the way to go.
Software recommendations:
- Mac only: Image Tool+ - Thats what we use, the tool is offline and amazing.
- Multi-Platform: Squoosh - Perfect for beginners with a comparison feature.
The Widely Supported Image Format
While some platforms don't currently support AVIF uploads, its wider compatibility is less critical, given older browser support. If AVIF isn't feasible, the next best option would be HEIC.
HEIC provides similar photo sharpness and quality to AVIF, but file sizes can be nearly double that of AVIF, even with heavy compression. However, it remains a more efficient choice than traditional formats like WEBP, JPEG or PNG.
Examples:
All example images were resized to a maximum width of 2000 pixels, representing a typical website scenario. High compression levels were applied to demonstrate the effects of over-compression and resulting artefacts.
Example 1 - Texture Photo:
The image contains substantial noise and texture details, making it one of the most challenging to compress without significant information loss. This results in an extremely large file size.
Conclusion: In this instance, AVIF's advanced compression algorithm isn't fully utilised due to image limitations. Though JPEG remains larger, the difference in file size compared to AVIF isn't drastic. WEBP appears noticeably softer among these formats, while HEIC and AVIF preserve better and similar sharpness.
Example 2 - Landscape with Background Blur:
This is our control example, featuring a typical scene with a sharp subject against a blurred background and abundant detail throughout. The image contains noise, offering insight into how each format handles such elements during compression.
Conclusion: In this case, WEBP matches AVIF's file size but offers significantly softer results, making it practically unusable. In contrast, AVIF maintains good usability, while HEIC provides comparable image quality at nearly double the file size.
Example 3 - Portrait with Isolated Subject:
Our final example simulates isolated product or human shots with minimal noise, allowing compression algorithms to achieve more significant file size savings due to reduced image information.
Conclusion: Using identical settings as previous examples, this scene produces noticeable artefacts across all formats except AVIF, which appears too soft for practical use. AVIF's superior compression method becomes evident in this scenario, making it the clear choice for low-noise, isolated professional photographs.
WEBP was an unsuitable choice across all scenarios, with noticeable softness even at less aggressive compression settings. It remains an efficient choice for very small images like icons or logos. The typical "softness" in WEBP compression kills a photo portfolio site. AVIF and HEIC will always produce sharper results.
Tip for the website: Utilise stunning, isolated subject shots with minimal noise for your starting page to ensure blazing-fast load times for first-time visitors.
Backend: Is it needed?
Today, even the most rudimentary web pages are often constructed using a content management system such as WordPress. However, whilst ease of use is a notable advantage, there are arguably more drawbacks than benefits associated with this approach. We have to consider what content the website will comprise and whether that content can remain static or should be dynamic.
A backend system is typically required if sorting functionality, user database management, or article archives are needed. Although there are various workarounds for introducing dynamic content to static websites, it is important to note that static websites remain unchangeable; any desired alterations must be made manually through code editing.
JavaScript provides the means to give static websites some dynamic functionality. Assigning unique tags to images with a few lines of JavaScript code enables us to sort them according to specified criteria or randomly if needed.
Examples:
The subsequent code demonstrates random image sorting upon page load.
<style>
.image-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
gap: 1em;
}
.image-container img {
width: 100%;
height: 10em;
object-fit: cover;
}
</style>
<script>
window.onload = function() {
let container = document.querySelector('.image-container');
let images = Array.from(container.children);
images.sort(() => Math.random() - 0.5);
images.forEach(image => container.appendChild(image));
};
</script>
<div class="image-container">
<img src="image1.avif" alt="Image 1">
<img src="image2.avif" alt="Image 2">
<img src="image3.avif" alt="Image 3">
<img src="image4.avif" alt="Image 4">
<img src="image5.avif" alt="Image 5">
</div>Inspecting the given code reveals that implementing random image sorting is a relatively simple task, necessitating only basic HTML proficiency. This functionality may easily be integrated into a portfolio website, offering visitors a fresh experience with each page visit. Furthermore, this method can be used to randomly highlight specific images while simultaneously concealing others.
Randomly revealing one image example:
<style>
.image-container img {
display: none;
}
.image-container img.selected {
display: block;
}
</style>
<script>
window.onload = function() {
let images = document.querySelectorAll('.image-container img');
let randomIndex = Math.floor(Math.random() * images.length);
images[randomIndex].classList.add('selected');
};
</script>
<div class="image-container">
<img src="image1.avif" alt="Image 1">
<img src="image2.avif" alt="Image 2">
<img src="image3.avif" alt="Image 3">
<img src="image4.avif" alt="Image 4">
<img src="image5.avif" alt="Image 5">
</div>By randomly selecting an image via JavaScript and subsequently appending a class named selected, it becomes possible to display one image from the list dynamically. While this approach serves as a workaround, it is important to note that all images will nonetheless be loaded, which might result in unnecessary loading times.
Here is a way to fix this issue:
<style>
.image-container img {
display: none;
}
.image-container img.selected {
display: block;
}
</style>
<script>
window.onload = function() {
let images = document.querySelectorAll('.image-container img');
let randomIndex = Math.floor(Math.random() * images.length);
images[randomIndex].classList.add('selected');
images[randomIndex].src = images[randomIndex].getAttribute('data-src');
};
</script>
<div class="image-container">
<img data-src="image1.avif" alt="Image 1">
<img data-src="image2.avif" alt="Image 2">
<img data-src="image3.avif" alt="Image 3">
<img data-src="image4.avif" alt="Image 4">
<img data-src="image5.avif" alt="Image 5">
</div>Deploying a pseudonym, such as "data-src," instead of "src," to prevent image download will make the page much faster. The script will assign the correct "src" attribute to one randomly selected image, thereby downloading only that image.
Help for Beginners
If you're a newcomer to HTML and JavaScript, employing an AI such as ChatGPT to assist with code writing can indeed be beneficial. To ensure more efficient code, consider following these instructions:
- Use CSS Grid instead of Flexbox whenever possible.
- Utilise
constin place ofvarfor variable declarations. - Employ responsive units like
em,rem,vw, orvhinstead of pixels (px) for dimensions and measurements.
Use these simple guidelines to ensure your website is in up-to-date HTML code.
Another tip: Using clamp() instead of media queries, it offers lighter code while maintaining responsiveness. If you are not experienced, you might need a lot of experimenting as the current AI is not good in these modern functions, but once you have the hang of it, it clamp() can help make your code more efficient.
Difference between clamp() and @media:
<style>
/* Without media queries, using clamp for responsive font size */
h1 {
font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}
</style>
<style>
/* Traditional method with media queries */
h1 {
font-size: 1.5rem;
}
@media (min-width: 600px) {
h1 {
font-size: 2rem;
}
}
@media (min-width: 1200px) {
h1 {
font-size: 3rem;
}
}
</style>
Here, you can see how the clamp() this function significantly condenses our CSS code, rendering it far more streamlined. Applying this approach across an entire website would result in substantial benefits in terms of reduced line count and improved efficiency.
clamp() may result in unwanted layout shifts. Therefore, the appropriate choice between the two approaches ultimately hinges upon the specific design and construction of one's website.Tip - offline coding AI: We recommend the use of Ollama for your coding journey. There are specific models especially trained for coding. Together with AnythingLLM as an interface you have a ChatGPT-like tool. Personally, I prefer to run Ollama over iTerm2 with the use of its snippet function, but this is for mac only.
- Advantages: Unlimited use of an AI without costs.
- Disadvantages: Running local LLMs that have larger sizes needs a lot of RAM.
Feel free to experiment with larger LLM models if you can. Some are more efficient than others. The 8B models should be usable for most modern laptops.
- 70B is useable with 64 GB RAM.
- 100B and above should always have at least 128 GB RAM.
The 8B versions are more than enough for HTML coding purposes. The models are being improved nearly weekly; there's a lot happening currently in the AI world. If you are using a lightweight laptop, make sure to look up lightweight models like phi3 (3B). And if your laptop is a powerhouse, then going a little higher than 8B cannot hurt. Workstations with strong hardware should check out the 70B versions and see if the response time holds up.
