Skip to main content

Deliver images optimally for web projects (customers)

All important at a glance:

  • Resolution of the images:
    • Minimum width of 1280 pixels required.
    • Images in 4K resolution are optimal for the highest level of detail and quality.
  • Quality of images:
    • Avoid excessive compression to prevent artifacts.
    • Our system automatically compresses images into modern formats such as WebP and AVIF if supported by the server.
    • Pay attention to careful composition and good lighting.
  • License rights and usage rights:
    • Always observe the copyrights and license conditions of the images used.
    • Use royalty-free images or purchase licenses from stock photo portals for specific needs.
  • Good stock photo portals:
    • Free portals such as Unsplash, Pexels and Pixabay for high-quality, royalty-free images.
    • Paid portals like Shutterstock and Adobe Stock for more exclusive image needs.
  • Images for fullwidth areas:
    • Use high-resolution images (ideally 4K).
    • Make sure that important image content is in the central area of the image, especially for images in 16:9 format.
  • Aspect ratios:
    • Choose the aspect ratio according to the purpose and layout of the website.
    • Consider adapting to different screen sizes.
  • Format of the images:
    • JPEG for photographs, PNG for images with transparency.
    • SVG for scalable vector graphics.
    • Automatic conversion to WebP and AVIF by our system for improved loading times and quality.
  • Support from Joomla-Agentur.de:
    • As Joomla-Agentur.de we are happy to assist you and take on this work for you. Simply contact us to discuss your requirements and how we can support you.

Resolution of the images

In our system, a minimum resolution of 1280 pixels is required to meet the container width requirements. This ensures that images appear sharp and clear in the basic view. Still, for optimal picture quality, we prefer 4K resolution images as they offer finer detail and higher quality on a wide range of devices, including those with high-resolution displays.

In addition, it is important to take into account the minimum resolution for parts of the website, such as grids. Due to responsive design, larger resolutions may sometimes be necessary on smaller screens to ensure optimal display. Our system generates up to six different image sizes for the srcset attribute: 768px, 1024px, 1366px, 1600px, 1920px and 200%. The browser automatically selects the image size that best suits its viewport and screen resolution.

It is recommended to use a large image and set a smaller width or height if necessary. This allows our system to generate a high resolution image (up to 200%) for Retina displays. Using high-resolution images and adapting them through our system ensures that your website offers outstanding visual quality on all devices, from smartphones to large desktop displays. Additionally, our system optimizes loading times by ensuring only the most appropriate image sizes are loaded, improving both the user experience and the performance of your website.

Quality of the images

The quality of an image is crucial to the visual appeal and professionalism of your website. It is determined not only by the resolution, but also by factors such as compression, lighting and image composition.

Compression: Our system already takes care of the compression of the original images. In addition to the original PNG or JPEG format, all images can also be generated in WebP and AVIF formats. These formats offer superior compression and quality properties compared to JPEG and PNG images. This means that images load much faster and use less data volume. The <picture> element is used to provide various image formats so that the browser can choose the format it supports. The prerequisite for this is that the web server also offers these formats. Therefore, you don't have to compress your images heavily - we take care of this task for you.

Lighting and Sharpness: Good lighting is crucial to ensuring your images are clear and attractive. Images should be well exposed, without excessive shadows or overexposed areas. The sharpness of the image is also important to ensure that all details are clearly visible, especially on smaller screen sizes.

Image Composition: Thoughtful composition draws attention to the desired focus in the image and improves the overall aesthetic of your website. Elements such as the rule of thirds, leading lines and the use of negative space can have a strong influence on the composition of an image.

It is advisable to use professional image editing software to optimize the image quality before embedding the images on your website. Tools for color correction, adjusting contrast and brightness, and removing blur or noise can significantly improve the overall quality of your images.

Overall, image quality on your website is a key element of visual communication and user experience. By paying attention to the above aspects, you will ensure that your images are not only aesthetically pleasing, but also technically optimized for the web.

License rights and usage rights

When using images on your website, it is essential to carefully consider the license rights and usage rights. These rights determine how and where an image may be used and protect the copyright of the photographer or artist. Failure to respect these rights can result in legal problems and financial penalties.

Copyright: Images are typically protected by copyright, meaning the creator has the exclusive right to decide where and how their work is used. Using a copyrighted image without permission may be considered copyright infringement.

Royalty Free Images: There are many sources of royalty free images that allow you to use images with no copyright restrictions or very relaxed restrictions. Sites like Unsplash, Pexels, and Pixabay offer high-quality, royalty-free images that you can use for free, often even for commercial purposes.

Creative Commons: Some images are published under Creative Commons licenses, which allow different degrees of freedom in terms of usage. It's important to understand the specific terms of each license - for example, some require attribution to the author, others prohibit commercial use or derivative works.

Licensed Stock Photos: For more exclusive or specific image needs, you can purchase licensed stock photos from platforms such as Shutterstock, Adobe Stock, or Getty Images. With these images, you purchase a license that specifies exactly how the image may be used. Be sure to read the license terms carefully to ensure they meet your needs.

Own Images: Using your own images is another way to ensure that you have all rights to the images. However, this may require additional efforts in terms of photography and image editing.

In summary, careful consideration of licensing and usage rights when using images on your website is essential to avoid legal problems and respect the rights of authors and artists. Always ensure that you have the correct licenses for the images you use and that you fully understand the requirements and limitations of each license.

Good stock photo portals

When looking for high-quality images for your website, stock photo portals can be a valuable resource. These platforms offer a wide range of images on different topics and in different styles, both free and paid. Here are some recommended portals to consider for your imaging needs:

Free stock photo portals:

  • Unsplash : Offers an extensive collection of free, high-quality photos provided by a community of professional and amateur photographers. The images can be used for commercial and non-commercial projects, often without attribution of copyright.

  • Pexels : Similar to Unsplash, Pexels offers free stock photos and videos under the Pexels license. This allows wide use without mentioning copyright, including for commercial purposes.

  • Pixabay : Another popular portal for free images, vectors, illustrations and videos. Pixabay content can mostly be used without attribution and for commercial applications.

Paid stock photo portals:

  • Shutterstock : One of the most popular sources of stock photos, vector graphics, illustrations, and video clips. Shutterstock offers various subscription and package options tailored to the needs of individuals and businesses.

  • Adobe Stock : Offers a wide range of high-quality images, graphics, templates and 3D assets. As part of the Adobe ecosystem, it seamlessly integrates with Creative Cloud applications, simplifying the workflow for Adobe users.

  • Getty Images : Known for its extensive collection of high-quality photos, including news images, historical and cultural photos. Getty Images is an excellent source for unique and specialized images, but tends to offer higher prices.

When using images from stock photo portals, it is important to carefully check the license conditions. Even though many images are "free," certain usage restrictions may apply. For paid images, it's crucial to choose the licensing option that meets your specific needs to avoid legal issues.

Whether you use free or paid images, stock photo portals can provide a quick and efficient solution to make your website visually appealing. However, it is always a good idea to increase the authenticity of your website by using unique images or your own photographs whenever possible.

Images for fullwidth areas on the website

Fullwidth areas are full-width sections on web pages that can create a striking visual impact. However, for optimal display in these areas, special considerations are required when selecting and adjusting images:

High Resolution: High resolution images are essential for fullwidth areas to ensure clear and detailed display on large screens. 4K resolution images are ideal because they provide excellent image quality even with large format displays.

Aspect ratio: The aspect ratio of the images should be tailored to the display in the fullwidth area. Wide panoramic formats are often particularly suitable for achieving an attractive full-screen display.

Centered Focus: When selecting images for fullwidth areas, it is important that the key visual elements are positioned in the central area of the image. For a 16:9 format image, this means that the most important content should be in the middle 40% of the image, while the edges, which each make up 30% of the image, can serve as a supplementary accessory. This arrangement ensures that the key elements of the image remain visible even when the image is resized on different screen sizes and parts of the edges may be cropped.

By considering these factors, you can ensure that the images in fullwidth areas are not only technically appropriate, but also effectively support the visual message of your website and improve the user experience.

Aspect ratios

The aspect ratio of an image describes the relationship between its width and height and is a crucial factor for the harmonious integration of images into web design. Choosing the right aspect ratio is essential to ensuring that images on your website appear as intended, without cutting off or distorting important content.

Common aspect ratios:

  • 16:9 : This aspect ratio is particularly popular for videos and wide image formats. It's great for headers, background images, and gallery views that require a wide visual presentation.

  • 4:3 : A classic format often used in photographs. It offers a more balanced view that works well for product images, blog posts, and article images.

  • 1:1 : Square images are ideal for social media posts, icons, and images in grid views. They provide a consistent display regardless of the orientation of the device.

Adaptation to different screen sizes:

The choice of aspect ratio should also take into account the images' ability to adapt to different screen sizes and orientations. Responsive design techniques allow images to display correctly on different devices without losing content.

Importance for the layout:

The aspect ratio of the images should match the website layout and design requirements. For example, in a layout with a three-column grid, square (1:1) or vertical (e.g. 3:4) images may work better, while for fullwidth sliders or hero sections, a wider aspect ratio such as 16:9 is preferable.

Flexibility through image editing:

In some cases, it may be necessary to change the aspect ratio of an image by cropping or adjusting it to suit specific design needs. Professional image editing software provides the tools to make such adjustments without compromising image quality.

By choosing the right aspect ratio for your images and making adjustments where necessary, you can maximize the visual impact of your website and ensure a coherent, responsive design that works well on all devices.

Format of the images

Choosing the right image format is crucial for the quality, loading times and functionality of your website. Each image format offers specific advantages that should be considered depending on the intended use of the image.

JPEG (Joint Photographic Experts Group):

  • Ideal for photographs and images with lots of color gradients.
  • Allows you to significantly reduce file size through compression, although this can lead to a loss of quality if used too heavily.

PNG (Portable Network Graphics):

  • Provides lossless compression so image quality remains unchanged even after saving.
  • Ideal for images that require transparency, such as logos and graphics with transparent backgrounds.

SVG (Scalable Vector Graphics):

  • Vector-based format, perfect for logos, icons and other scalable elements that need to be displayed in different sizes without loss of quality.
  • Can be embedded directly into HTML, allowing for flexible and scalable use.

WebP:

  • Modern format that supports both lossy and lossless compression, often with better efficiency than JPEG or PNG.
  • Offers improved compression that contributes to faster loading times without compromising image quality.

AVIF (AV1 Image File Format):

  • Latest image format that offers even more efficient compression than WebP while maintaining excellent image quality.
  • Supports wide color gamut and high dynamic range (HDR).

Our system is designed to automatically generate WebP and AVIF versions from your original JPEG and PNG images, provided the web server supports these formats. This automatic conversion ensures an optimal balance between image quality and file size, improving your website loading times and ensuring a smooth user experience across different devices and browsers.

When using these advanced image formats, it is important to also consider fallback options for browsers that may not yet support these formats. This ensures that your website is displayed correctly and with high quality everywhere.

Categories

Important contributions

Popular posts