{"id":4235,"date":"2025-05-09T17:48:07","date_gmt":"2025-05-09T15:48:07","guid":{"rendered":"https:\/\/2budesign.com\/?p=4235"},"modified":"2026-03-23T18:10:26","modified_gmt":"2026-03-23T17:10:26","slug":"images-for-websites-between-aesthetics-and-loading-time","status":"publish","type":"post","link":"https:\/\/2budesign.com\/en\/magazin\/bilder-fuer-websites-zwischen-aesthetik-und-ladezeit\/","title":{"rendered":"Images for websites \u2013 between aesthetics and loading time"},"content":{"rendered":"<div class=\"et_pb_section_0 et_pb_section et_section_regular et_block_section\">\n<div class=\"et_pb_row_0 et_pb_row et_block_row preset--module--divi-row--default\">\n<div class=\"et_pb_column_0 et_pb_column et_pb_column_4_4 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_text_0 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--module--divi-text--default\"><div class=\"et_pb_text_inner\"><h2 class=\"translation-block\">The file format \u2013 <span>jpeg, png or gif<\/span><\/h2>\n<p data-start=\"995\" data-end=\"1348\">For convincing web performance, it is crucial to keep image data as slim as possible without losing impact. If you ignore this, you risk high bounce rates and wasting valuable SEO potential. But don't worry: with a few targeted measures, loading times can be minimised \u2013 without sacrificing good design.<\/p>\n<p data-start=\"1350\" data-end=\"1637\">Images are far more than just visual decoration. They contribute to branding, control emotions \u2013 and are (correctly integrated) real conversion boosters. This makes it all the more important to understand which image formats are suitable for what and which technical settings make sense.<\/p>\n<h3 data-start=\"1639\" data-end=\"1674\">The most common image formats on the web<\/h3>\n<ul data-start=\"1676\" data-end=\"1914\">\n<li data-start=\"1676\" data-end=\"1757\">\n<p data-start=\"1678\" data-end=\"1757\" class=\"translation-block\"><strong data-start=\"1678\" data-end=\"1686\">JPEG<\/strong>: Ideal for photos, offering a good balance between quality and file size.<\/p>\n<\/li>\n<li data-start=\"1758\" data-end=\"1833\">\n<p data-start=\"1760\" data-end=\"1833\" class=\"translation-block\"><strong data-start=\"1760\" data-end=\"1767\">PNG<\/strong>: Supports transparency; better suited to graphics with few colours.<\/p>\n<\/li>\n<li data-start=\"1834\" data-end=\"1914\">\n<p data-start=\"1836\" data-end=\"1914\" class=\"translation-block\"><strong data-start=\"1836\" data-end=\"1843\">GIF<\/strong>: Outdated, but still relevant for animations (e.g. in newsletters).<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"249\" data-end=\"641\" class=\"translation-block\"><strong data-start=\"249\" data-end=\"257\">JPEG<\/strong> (Joint Photographic Experts Group) is arguably the best-known image format on the web \u2013 and for good reason: it offers high compression whilst maintaining high image quality. Colours are rendered realistically, and even with a reduced file size, the image usually remains clear and rich in detail. That is why JPEG <strong data-start=\"574\" data-end=\"595\">is ideal for photos<\/strong> and images with lots of colour gradients.<\/p>\n<p data-start=\"643\" data-end=\"1150\" class=\"translation-block\"><strong data-start=\"643\" data-end=\"650\">PNG<\/strong> (Portable Network Graphics) also compresses effectively, albeit in a different way: it reduces the number of colours used, which shrinks the file size. The more compression there is, the smaller the colour palette becomes. The big advantage is that, unlike JPEG, PNG can <strong data-start=\"934\" data-end=\"962\">display transparency<\/strong> \u2013 ideal for logos or icons that need to blend seamlessly into a background. This is why PNG is particularly popular for <strong data-start=\"1086\" data-end=\"1150\">graphics with few colours and transparent backgrounds.<\/strong><\/p>\n<p data-start=\"1152\" data-end=\"1588\" class=\"translation-block\"><strong data-start=\"1152\" data-end=\"1159\">GIF<\/strong> (Graphics Interchange Format) is no longer quite up to scratch from a technical point of view, but is still used for simple purposes. It can also display transparency, but is limited to <strong data-start=\"1346\" data-end=\"1364\">just 256 colours<\/strong> \u2013 which can look unnatural in photos. The big advantage is that GIFs can <strong data-start=\"1448\" data-end=\"1467\">be animated<\/strong>. That is why they remain popular today for <strong data-start=\"1508\" data-end=\"1530\">small animations<\/strong>, e.g. in newsletters, chats or as reaction graphics.<\/p>\n<h2><span>Resolution, image size &amp; compression \u2013 what really counts?<\/span><\/h2>\n<p data-start=\"1983\" data-end=\"2382\" class=\"translation-block\">Distinguishing between file format, image size and file size is essential for web optimisation. Whilst the <strong data-start=\"2095\" data-end=\"2105\">format<\/strong> describes the type of file (JPEG, PNG, etc.), the <strong data-start=\"2162\" data-end=\"2175\">image size<\/strong> provides information on the number of pixels (e.g. 1920x1080 px) \u2013 in other words, how large the image appears on the screen. The <strong data-start=\"2299\" data-end=\"2313\">file size<\/strong>, on the other hand, shows how much storage space an image actually takes up.<\/p>\n<p data-start=\"2384\" data-end=\"2682\">Many images that come directly from a camera are oversized. This may look stylish, but is of little technical benefit. For most websites, a maximum width of 1920 px is completely sufficient. Anyone with a higher resolution risks slow loading times \u2013 a real problem, especially on mobile devices.<\/p>\n<p data-start=\"2684\" data-end=\"2991\">Important: Images should never be uploaded large and then scaled in the CMS. This not only has a negative effect on the display, but also unnecessarily inflates the amount of data. It is better to crop the images beforehand and optimise them specifically for the web \u2013 so that the quality remains good and the loading time short.<\/p>\n<h3 data-start=\"2993\" data-end=\"3026\">Best practices for image sizes<\/h3>\n<ul data-start=\"3028\" data-end=\"3202\">\n<li data-start=\"3028\" data-end=\"3083\">\n<p data-start=\"3030\" data-end=\"3083\" class=\"translation-block\">Images for full-screen headers: max. <strong data-start=\"3065\" data-end=\"3083\">1920 x 1280 px<\/strong><\/p>\n<\/li>\n<li data-start=\"3084\" data-end=\"3114\">\n<p data-start=\"3086\" data-end=\"3114\" class=\"translation-block\">Thumbnails: <strong data-start=\"3098\" data-end=\"3114\">300 x 300 px<\/strong><\/p>\n<\/li>\n<li data-start=\"3115\" data-end=\"3146\">\n<p data-start=\"3117\" data-end=\"3146\" class=\"translation-block\">Blog images: <strong data-start=\"3129\" data-end=\"3146\">1200 x 800 px<\/strong><\/p>\n<\/li>\n<li data-start=\"3147\" data-end=\"3202\">\n<p data-start=\"3149\" data-end=\"3202\">Always: same aspect ratio (e.g. 3:2 or 4:3)<\/p>\n<\/li>\n<\/ul>\n<h2><span>Compression \u2013 Preserve quality, save weight<\/span><\/h2>\n<p data-start=\"3262\" data-end=\"3560\">The aim is to achieve a smart compromise between file size and image quality. The more compressed an image is, the faster the page loads \u2013 but also the higher the risk of loss of quality. Especially with small images, too much compression can quickly lead to blurring.<\/p>\n<p data-start=\"3562\" data-end=\"3891\" class=\"translation-block\">With tools such as <strong data-start=\"3576\" data-end=\"3589\">Photoshop<\/strong>, <strong data-start=\"3591\" data-end=\"3602\">Squoosh<\/strong> or <strong data-start=\"3608\" data-end=\"3619\">TinyJPG<\/strong>, you can reduce image quality in a targeted manner without it being immediately noticeable. In Photoshop, this is done quite simply via \u201eExport for Web\u201c. Here, you can adjust the quality (e.g. to 60 %), select the format and define the final image size.<\/p>\n<p data-start=\"3893\" data-end=\"4148\" class=\"translation-block\">Important: When resizing images, make sure to <strong data-start=\"3949\" data-end=\"3983\">maintain the aspect ratio<\/strong> \u2013 otherwise they\u2019ll quickly become distorted. Also: consistency is key! If you\u2019re constantly switching between formats and aspect ratios, you\u2019ll quickly come across as unprofessional.<\/p>\n<h3 data-start=\"4150\" data-end=\"4185\">Tools &amp; tips for compression<\/h3>\n<ul data-start=\"4187\" data-end=\"4431\">\n<li data-start=\"4187\" data-end=\"4232\">\n<p data-start=\"4189\" data-end=\"4232\" class=\"translation-block\"><strong data-start=\"4189\" data-end=\"4202\">Photoshop<\/strong>: Export \u201eSave for Web\u201c<\/p>\n<\/li>\n<li data-start=\"4233\" data-end=\"4312\">\n<p data-start=\"4235\" data-end=\"4312\" class=\"translation-block\"><strong data-start=\"4235\" data-end=\"4256\">TinyJPG \/ TinyPNG<\/strong>: further compression without any visible loss of quality<\/p>\n<\/li>\n<li data-start=\"4313\" data-end=\"4372\">\n<p data-start=\"4315\" data-end=\"4372\" class=\"translation-block\"><strong data-start=\"4315\" data-end=\"4333\">Aspect ratio<\/strong>: it is best to maintain a ratio of 3:2 or 16:9<\/p>\n<\/li>\n<li data-start=\"4373\" data-end=\"4431\">\n<p data-start=\"4375\" data-end=\"4431\">Beware of scaling in the CMS \u2013 better adapt beforehand!<\/p>\n<\/li>\n<\/ul>\n<h2 class=\"translation-block\"><span>File names &amp; alt text \u2013 The<\/span><span> SEO boost<\/span><\/h2>\n<p data-start=\"4481\" data-end=\"4773\" class=\"translation-block\">Search engines cannot (yet) see what is depicted in images. They rely on meta information \u2013 primarily the <strong data-start=\"4614\" data-end=\"4628\">file name<\/strong> and the so-called <strong data-start=\"4648\" data-end=\"4664\">alt attribute<\/strong>. If you approach this wisely, you will not only improve your ranking but also make your website more accessible.<\/p>\n<p data-start=\"4775\" data-end=\"5130\">The rules for SEO-compliant file names are simple, but are often ignored: no spaces, no umlauts, no special characters. Instead: short, clear terms with hyphens that precisely describe the image content. The alt attribute should also be filled sensibly \u2013 not only for SEO reasons, but also for users with screen readers.<\/p>\n<p data-start=\"5132\" data-end=\"5228\">So \u201eIMG_4589.jpg\u201c becomes \u201evegan-brunch-d\u00fcsseldorf.jpg\u201c. Sounds completely different, doesn't it?<\/p>\n<h3 data-start=\"5230\" data-end=\"5257\">SEO tips for image data<\/h3>\n<ul data-start=\"5259\" data-end=\"5546\">\n<li data-start=\"5259\" data-end=\"5330\">\n<p data-start=\"5261\" data-end=\"5330\" class=\"translation-block\"><strong data-start=\"5261\" data-end=\"5274\">File name<\/strong>: lower case, with hyphens, without umlauts or special characters<\/p>\n<\/li>\n<li data-start=\"5331\" data-end=\"5407\">\n<p data-start=\"5333\" data-end=\"5407\" class=\"translation-block\"><strong data-start=\"5333\" data-end=\"5344\">Alt tag<\/strong>: short, descriptive text (\u201eBreakfast plate with avocado\u201c)<\/p>\n<\/li>\n<li data-start=\"5408\" data-end=\"5479\">\n<p data-start=\"5410\" data-end=\"5479\" class=\"translation-block\"><strong data-start=\"5410\" data-end=\"5422\">Avoid<\/strong>: cryptic camera names or empty alt fields<\/p>\n<\/li>\n<li data-start=\"5480\" data-end=\"5546\">\n<p data-start=\"5482\" data-end=\"5546\">Also think about accessibility \u2013 Pictures are more than decoration<\/p>\n<\/li>\n<\/ul>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_1 et_pb_section et_section_regular et_flex_section\">\n<div class=\"et_pb_row_1 et_pb_row et_flex_row preset--module--divi-row--default\">\n<div class=\"et_pb_column_1 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_text_1 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module preset--module--divi-text--znhbscuzkl\"><div class=\"et_pb_text_inner\"><h3 data-start=\"5553\" data-end=\"5611\">Good images, short loading times \u2013 no contradiction<\/h3>\n<p data-start=\"5553\" data-end=\"5611\">If you want to be visually convincing, you don't necessarily have to put up with huge amounts of data. With the right combination of image format, resolution, compression and SEO, images can unfold their full charm \u2013 without Google or the user bouncing off. Stay flexible, keep your content technically clean and make your web presence as light as it is convincing.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_2 et_pb_section et_section_regular et_block_section\">\n<div class=\"et_pb_row_2 et_pb_row et_block_row preset--module--divi-row--default\">\n<div class=\"et_pb_column_2 et_pb_column et_pb_column_1_2 et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_text_2 et_pb_text et_pb_bg_layout_dark et_pb_module et_block_module preset--module--divi-text--c7ea2dd6-e597-4823-8d00-b258c7a11576\"><div class=\"et_pb_text_inner\"><h3>Are you unsure and want a professional website?<\/h3>\n<\/div><\/div>\n<\/div>\n\n<div class=\"et_pb_column_3 et_pb_column et_pb_column_1_2 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_text_3 et_pb_text et_pb_bg_layout_dark et_pb_module et_block_module preset--module--divi-text--c7ea2dd6-e597-4823-8d00-b258c7a11576\"><div class=\"et_pb_text_inner\"><p>Then 2bu design is at your side.<\/p>\n<p class=\"translation-block\">Whether it\u2019s <strong>image optimisation, Divi websites, WooCommerce, Corporate Design or social media<\/strong> \u2013 we help brands convey their message clearly and powerfully.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_row_3 et_pb_row et_block_row preset--module--divi-row--default\">\n<div class=\"et_pb_column_4 et_pb_column et_pb_column_4_4 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_0_wrapper preset--group--divi-button--divi-button--h1c8vfa--nested--7os10zr9fr_wrapper preset--module--divi-button--default_wrapper\"><a class=\"et_pb_button_0 et_pb_button et_pb_bg_layout_dark et_pb_module et_block_module preset--group--divi-button--divi-button--h1c8vfa--nested--7os10zr9fr preset--module--divi-button--default\" href=\"https:\/\/calendly.com\/hello-2budesign\/30min\" target=\"_blank\" rel=\"nofollow noopener\">Arrange a coffee date<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Beautiful, large images are a real eye-catcher \u2013 no question. But what scores on the visual side can become a technical stumbling block: The larger the image file, the slower the loading time. This in turn not only deters visitors, but also lowers your Google ranking. It is therefore important to manage the balance between file size and image quality wisely.<\/p>","protected":false},"author":2,"featured_media":27884,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1,11],"tags":[],"class_list":["post-4235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-branding","category-marketing"],"_links":{"self":[{"href":"https:\/\/2budesign.com\/en\/wp-json\/wp\/v2\/posts\/4235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2budesign.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/2budesign.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/2budesign.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/2budesign.com\/en\/wp-json\/wp\/v2\/comments?post=4235"}],"version-history":[{"count":10,"href":"https:\/\/2budesign.com\/en\/wp-json\/wp\/v2\/posts\/4235\/revisions"}],"predecessor-version":[{"id":29823,"href":"https:\/\/2budesign.com\/en\/wp-json\/wp\/v2\/posts\/4235\/revisions\/29823"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/2budesign.com\/en\/wp-json\/wp\/v2\/media\/27884"}],"wp:attachment":[{"href":"https:\/\/2budesign.com\/en\/wp-json\/wp\/v2\/media?parent=4235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/2budesign.com\/en\/wp-json\/wp\/v2\/categories?post=4235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/2budesign.com\/en\/wp-json\/wp\/v2\/tags?post=4235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}