{"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 - 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\">\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>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\"><strong data-start=\"1678\" data-end=\"1686\">JPEG<\/strong>Ideal for photos, good ratio between quality and file size.<\/p>\n<\/li>\n<li data-start=\"1758\" data-end=\"1833\">\n<p data-start=\"1760\" data-end=\"1833\"><strong data-start=\"1760\" data-end=\"1767\">PNG<\/strong>Supports transparency, better for graphics with few colours.<\/p>\n<\/li>\n<li data-start=\"1834\" data-end=\"1914\">\n<p data-start=\"1836\" data-end=\"1914\"><strong data-start=\"1836\" data-end=\"1843\">GIF<\/strong>Old, but still relevant for animations (e.g. in newsletters).<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"249\" data-end=\"641\"><strong data-start=\"249\" data-end=\"257\">JPEG<\/strong> (Joint Photographic Experts Group) is probably the best-known image format on the web \u2013 and for good reason: it offers high compression combined with high image quality. Colours are displayed realistically and even with a reduced file size, the image usually remains clear and rich in detail. This is why JPEG <strong data-start=\"574\" data-end=\"595\">perfect for photos<\/strong> and images with many colour gradients.<\/p>\n<p data-start=\"643\" data-end=\"1150\"><strong data-start=\"643\" data-end=\"650\">PNG<\/strong> (Portable Network Graphics) also compresses effectively, but in a different way: It reduces the number of colours used, which shrinks the file size. The more compression, the smaller the colour spectrum. The big advantage: unlike JPEG, PNG can be <strong data-start=\"934\" data-end=\"962\">Display transparencies<\/strong> \u2013 is 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\"><strong data-start=\"1152\" data-end=\"1159\">GIF<\/strong> (Graphics Interchange Format) is no longer technically up to date, but is still used for simple purposes. It can also display transparency, but is limited to <strong data-start=\"1346\" data-end=\"1364\">only 256 colours<\/strong> limited to \u2013, which can look unnatural in photos. The big plus point: GIFs can be <strong data-start=\"1448\" data-end=\"1467\">be animated<\/strong>. That is why they are still popular 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\">The distinction between file format, image size and file size is essential for web optimisation. While 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> Information about the number of pixels (e.g. 1920x1080 px) \u2013, i.e. how large the image is displayed 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 needs.<\/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\">Images for fullscreen header: 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\">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\">Blog pictures: <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\">With tools like <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> the image quality can be reduced in a targeted manner without it being immediately visible. In Photoshop, this works very simply via \u201eExport for Web\u201c. Here you can set the quality (e.g. to 60 %), select the format and define the final image size.<\/p>\n<p data-start=\"3893\" data-end=\"4148\">Important: Anyone scaling images should ensure that the <strong data-start=\"3949\" data-end=\"3983\">Maintain aspect ratio<\/strong> \u2013 otherwise it will quickly become distorted. Also: Consistency is key! If you're constantly jumping between formats and aspect ratios, you'll quickly look 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\"><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\"><strong data-start=\"4235\" data-end=\"4256\">TinyJPG \/ TinyPNG<\/strong>further compression without visible loss of quality<\/p>\n<\/li>\n<li data-start=\"4313\" data-end=\"4372\">\n<p data-start=\"4315\" data-end=\"4372\"><strong data-start=\"4315\" data-end=\"4333\">Image ratio<\/strong>: best to keep 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><span>File names &amp; Alt texts \u2013 The<\/span><span> SEO boost<\/span><\/h2>\n<p data-start=\"4481\" data-end=\"4773\">Search engines cannot (yet) see what is on images. They rely on meta information \u2013 especially on the <strong data-start=\"4614\" data-end=\"4628\">File names<\/strong> and the so-called <strong data-start=\"4648\" data-end=\"4664\">Alt attribute<\/strong>. If you work cleverly here, you 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\"><strong data-start=\"5261\" data-end=\"5274\">File name<\/strong>small, with hyphens, without umlauts\/special characters<\/p>\n<\/li>\n<li data-start=\"5331\" data-end=\"5407\">\n<p data-start=\"5333\" data-end=\"5407\"><strong data-start=\"5333\" data-end=\"5344\">Alt tag<\/strong>short, descriptive texts (\u201eBreakfast plate with avocado\u201c)<\/p>\n<\/li>\n<li data-start=\"5408\" data-end=\"5479\">\n<p data-start=\"5410\" data-end=\"5479\"><strong data-start=\"5410\" data-end=\"5422\">Avoid<\/strong>cryptic camera designations 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\">\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\">\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_light 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_light 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>No matter whether <strong>Image optimisation, Divi websites, WooCommerce, corporate design or social media<\/strong> \u2013 we help brands to convey their message clearly and strongly.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_row_3 et_pb_row et_block_row\">\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--default_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--default 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}]}}