{"id":9208,"date":"2026-06-01T09:10:44","date_gmt":"2026-06-01T07:10:44","guid":{"rendered":"https:\/\/mybox.com\/help\/?post_type=manual_kb&#038;p=9208"},"modified":"2026-06-01T09:10:45","modified_gmt":"2026-06-01T07:10:45","slug":"how-to-prepare-photos-for-a-website","status":"publish","type":"manual_kb","link":"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-prepare-photos-for-a-website\/","title":{"rendered":"How to prepare photos for a website?"},"content":{"rendered":"\n<div class=\"translation-block translation-block-merged\">\n<p class=\"wp-block-paragraph\">Images are an important part of any website. Well-prepared photos can improve visual appeal, support branding, and enhance user engagement. However, poorly optimized images can negatively affect website performance and loading speed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Proper image preparation involves more than simply uploading a file.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-prepare-photos-for-a-website\/#Choose_the_right_images\" >Choose the right images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-prepare-photos-for-a-website\/#Use_high-quality_source_images\" >Use high-quality source images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-prepare-photos-for-a-website\/#Resize_images_appropriately\" >Resize images appropriately<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-prepare-photos-for-a-website\/#Optimize_file_size\" >Optimize file size<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-prepare-photos-for-a-website\/#Choose_the_appropriate_format\" >Choose the appropriate format<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-prepare-photos-for-a-website\/#Edit_and_enhance_images\" >Edit and enhance images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-prepare-photos-for-a-website\/#Add_descriptive_file_names\" >Add descriptive file names<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-prepare-photos-for-a-website\/#Add_alt_text\" >Add alt text<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-prepare-photos-for-a-website\/#Test_website_performance\" >Test website performance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-prepare-photos-for-a-website\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Choose_the_right_images\"><\/span>Choose the right images<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<\/div>\n\n<div id=\"mybox-1582405180\" class=\"mybox-content mybox-entity-placement\"><div class=\"early-access-banner-inpost\">\r\n  <div class=\"banner-left-inpost\">\r\n    <div class=\"icon-box-inpost\">\r\n      <img decoding=\"async\" src=\"https:\/\/mybox.com\/help\/wp-content\/uploads\/2026\/02\/square-info-icon.svg\" alt=\"Info\">\r\n    <\/div>\r\n    <div class=\"text-box-inpost\">\r\n      <span class=\"label-inpost\"><span class=\"translation-block translation-block-banner-text\">Early access<\/span><\/span>\r\n      <h4><span class=\"translation-block translation-block-banner-text\">Still need help?<\/span><\/h4>\r\n      <p><span class=\"translation-block translation-block-banner-text\">Contact our customer service team.<\/span><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"banner-right-inpost\">\r\n    <a href=\"https:\/\/panel.mybox.com\/helpdesk2\/v\/list\/\" class=\"banner-button-inpost\"><span class=\"translation-block translation-block-banner-text\">Message us<\/span><\/a>\r\n  <\/div>\r\n<\/div><\/div>\n\n<div class=\"translation-block translation-block-merged\"><p class=\"wp-block-paragraph\">Before editing or uploading photos, determine which images best support your website&#8217;s goals.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Common types of website images include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>product photos<\/li>\n\n\n\n<li>team and staff photos<\/li>\n\n\n\n<li>portfolio images<\/li>\n\n\n\n<li>background graphics<\/li>\n\n\n\n<li>blog illustrations<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The selected images should be relevant, high quality, and consistent with your brand identity.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Use_high-quality_source_images\"><\/span>Use high-quality source images<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Start with the highest-quality version available.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A good source image provides:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>better visual clarity<\/li>\n\n\n\n<li>greater editing flexibility<\/li>\n\n\n\n<li>improved final results after optimization<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Avoid blurry, heavily compressed, or low-resolution images whenever possible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Resize_images_appropriately\"><\/span>Resize images appropriately<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Images should be resized to match their intended display dimensions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Uploading excessively large images can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>increase loading times<\/li>\n\n\n\n<li>consume unnecessary bandwidth<\/li>\n\n\n\n<li>reduce website performance<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">For example, if an image will be displayed at 1200 pixels wide, there is usually no need to upload a version that is 5000 pixels wide.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Optimize_file_size\"><\/span>Optimize file size<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Image optimization reduces file size while maintaining acceptable visual quality.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Benefits include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>faster page loading<\/li>\n\n\n\n<li>reduced server storage usage<\/li>\n\n\n\n<li>improved user experience<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Popular image optimization tools include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>TinyPNG<\/li>\n\n\n\n<li>Compressor.io<\/li>\n\n\n\n<li>image optimization features built into website builders and CMS platforms<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Choose_the_appropriate_format\"><\/span>Choose the appropriate format<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Different image formats serve different purposes:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Format<\/th><th>Best use<\/th><\/tr><\/thead><tbody><tr><td>JPEG<\/td><td>Photographs and complex images<\/td><\/tr><tr><td>PNG<\/td><td>Graphics requiring transparency<\/td><\/tr><tr><td>WebP<\/td><td>Modern web optimization with smaller file sizes<\/td><\/tr><tr><td>SVG<\/td><td>Logos, icons, and vector graphics<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For most websites, WebP is an excellent choice due to its balance of quality and compression.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Edit_and_enhance_images\"><\/span>Edit and enhance images<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Image editing software can help improve photos before publishing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Common adjustments include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>cropping<\/li>\n\n\n\n<li>brightness correction<\/li>\n\n\n\n<li>contrast adjustment<\/li>\n\n\n\n<li>color correction<\/li>\n\n\n\n<li>sharpening<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Popular editing tools include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adobe Photoshop<\/li>\n\n\n\n<li>GIMP<\/li>\n\n\n\n<li>Affinity Photo<\/li>\n\n\n\n<li>online image editors<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_descriptive_file_names\"><\/span>Add descriptive file names<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use meaningful file names instead of generic names such as:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>IMG_1234.jpg\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Prefer descriptive names such as:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>blue-running-shoes.jpg\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This can improve organization and may provide SEO benefits.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_alt_text\"><\/span>Add alt text<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Alternative text (alt text) helps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>improve accessibility<\/li>\n\n\n\n<li>provide context for search engines<\/li>\n\n\n\n<li>describe images when they cannot be displayed<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Alt text should accurately describe the image content.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Test_website_performance\"><\/span>Test website performance<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After uploading images, test your website to ensure:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>pages load quickly<\/li>\n\n\n\n<li>images display correctly on different devices<\/li>\n\n\n\n<li>visual quality remains acceptable<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Performance testing tools can help identify oversized or unoptimized images.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Preparing photos for a website involves selecting appropriate images, resizing them correctly, optimizing file size, choosing suitable formats, and ensuring accessibility. Well-prepared images improve website appearance, loading speed, and overall user experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[125],"manual_kb_tag":[5801,5802,369,2992,5795,5796,5797,5798,5799,5800],"class_list":["post-9208","manual_kb","type-manual_kb","status-publish","format-standard","hentry","manualknowledgebasecat-websites","manual_kb_tag-source-images","manual_kb_tag-resize-images","manual_kb_tag-image-optimization","manual_kb_tag-product-photos","manual_kb_tag-website-images","manual_kb_tag-team-photos","manual_kb_tag-portfolio-images","manual_kb_tag-background-graphics","manual_kb_tag-blog-illustrations","manual_kb_tag-high-quality-images"],"_links":{"self":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/9208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/9208\/revisions"}],"predecessor-version":[{"id":9212,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/9208\/revisions\/9212"}],"wp:attachment":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/media?parent=9208"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manualknowledgebasecat?post=9208"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb_tag?post=9208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}