{"id":1237,"date":"2026-10-29T16:06:24","date_gmt":"2026-10-29T15:06:24","guid":{"rendered":"https:\/\/vikingo.studio\/utmutatok\/kepek-feltoltese\/"},"modified":"2026-10-29T16:06:24","modified_gmt":"2026-10-29T15:06:24","slug":"uploading-images","status":"publish","type":"vk_utmutato","link":"https:\/\/vikingo.studio\/en\/utmutatok\/kepek-feltoltese\/","title":{"rendered":"Uploading images to your website"},"content":{"rendered":"

Last checked: 29 October 2026<\/p>\n\n\n\n

Images make the first impression of your website. They are also the largest files on it: a phone photo is 3\u20135 MB, the same photo prepared for the web is 300\u2013400 KB, yet you can\u2019t see the difference. That way the page loads quickly on mobile too, which Google also pays attention to. Click the images to see them larger.<\/p>\n\n\n\n

\n

About 10 minutes.<\/strong> You will need: your images in one folder and a browser. The Vikingo Image Optimiser (K\u00e9poptimaliz\u00e1l\u00f3) is free, needs no sign-up and your images never leave your computer.<\/p>\n<\/div>\n\n\n\n

\n

Steps<\/p>\n\n\n\n

    \n
  1. Choose a good image<\/a><\/li>\n\n
  2. Size and crop<\/a><\/li>\n\n
  3. Give it a meaningful name<\/a><\/li>\n\n
  4. Optimise it with the Image Optimiser<\/a><\/li>\n\n
  5. Upload it and write alt text<\/a><\/li>\n\n
  6. If you send the images to us<\/a><\/li>\n<\/ol>\n<\/div>\n\n\n\n

    1. Choose a good image<\/h2>\n\n\n\n

    Your own good-quality photo always beats a stock image: visitors want to see your real team, products and place. If you can, have a photographer take them.<\/p>\n\n\n\n

    Bright and sharp<\/h3>\n\n\n\n
    \"A\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

    Don\u2019t:<\/strong> dark, blurred, tilted. Do:<\/strong> plenty of light, sharp, straight, faces clearly visible. Shoot in daylight with your subject facing the window, and hold the phone with both hands or rest it on something.<\/p>\n\n\n\n

    No text on it<\/h3>\n\n\n\n
    \"A\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

    Don\u2019t:<\/strong> a slogan written on the image. It covers the photo, becomes tiny and unreadable on mobile, search engines don\u2019t see it as text and it can\u2019t be translated. Do:<\/strong> a clean image, with the text added by the website next to it or on top of it.<\/p>\n\n\n\n

    A consistent style<\/h3>\n\n\n\n

    Within a page, images should have similar light and mood. Don\u2019t mix illustrations, stock photos and phone snaps in the same section, and shoot product photos against the same background.<\/p>\n\n\n\n

    If you don\u2019t have your own<\/h3>\n\n\n\n

    Free image libraries: Unsplash<\/a>, Pexels<\/a>, Pixabay<\/a>. Their images are free to use for business too, but always check the licence on the image\u2019s page. A \u201cCreative Commons\u201d label on its own is not enough: some forbid commercial use, others require you to credit the author.<\/p>\n\n\n\n

    For paid images we recommend Envato Elements<\/a> and Magnific<\/a> (formerly Freepik). We subscribe to both: if you find a good image there, send us the link and we will download it for you.<\/p>\n\n\n\n

    2. Size and crop<\/h2>\n\n\n\n

    The Image Optimiser\u2019s Weboldalra<\/strong> (For websites) preset scales the longer side of the image down to 1920 px. That is enough almost everywhere, and WordPress creates smaller versions for smaller screens by itself. Where you need an exact ratio (sharing image, product photo, portrait), first crop the image to size in your phone\u2019s or computer\u2019s photo editor, then optimise it.<\/p>\n\n\n\n

    Where it goes<\/th>Size (px)<\/th>What to watch<\/th><\/tr><\/thead>
    Full-width header, background image<\/th>1920 \u00d7 1080<\/td>Landscape. On a phone only the middle shows (see below).<\/td><\/tr>
    Image next to text<\/th>1200 \u00d7 900<\/td>Half the screen width is enough, but 1920 px is fine too.<\/td><\/tr>
    Blog post featured image<\/th>1200 \u00d7 630<\/td>This also becomes the post\u2019s sharing image.<\/td><\/tr>
    Sharing image (og:image)<\/th>1200 \u00d7 630<\/td>See below.<\/td><\/tr>
    Product photo<\/th>1200 \u00d7 1200<\/td>Square, with the same background and distance for every product.<\/td><\/tr>
    Portrait, team member<\/th>800 \u00d7 800<\/td>Square, face in the middle, a little space above.<\/td><\/tr>
    Logo<\/th>SVG, or PNG at least 600 px wide<\/td>With a transparent background. Send the SVG to us and we will upload it.<\/td><\/tr>
    Site icon (favicon)<\/th>512 \u00d7 512<\/td>Square PNG, WordPress asks for at least this size.<\/td><\/tr>
    Email or form attachment<\/th>up to 1024<\/td>That is what the Image Optimiser\u2019s E-mailhez, \u0171rlaphoz (For email and forms) preset is for.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    If your website\u2019s design calls for a different ratio (a portrait-format photo, for example), follow that. If you are unsure, ask us.<\/p>\n\n\n\n

    On a desktop and on a phone<\/h3>\n\n\n\n
    \"The\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

    The same header image on a desktop and on a phone. The phone shows the middle of the image and the edges are cut off: here the person on the left and the projector screen too. So put the key part (a face, a product) in the middle with some space around it. Don\u2019t use a portrait-format photo in a header.<\/p>\n\n\n\n

    Sharing image (og:image)<\/h3>\n\n\n\n

    This is the image people see when someone shares your page\u2019s link on Facebook, Messenger, LinkedIn or Viber. The name comes from the Open Graph standard: the og:image<\/code> line in the page\u2019s code tells these apps which image to show. Its size is 1200\u00a0\u00d7\u00a0630 px.<\/p>\n\n\n\n

    For blog posts it comes from the featured image, so upload that in this size too. For other pages you can set it in the editor, in the Yoast SEO Social appearance<\/strong> section. Keep the important part (logo, title) away from the edges, because some apps shrink it or crop it to a square. This is the sharing image of our Hungarian home page:<\/p>\n\n\n\n

    \"Vikingo\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

    3. Give it a meaningful name<\/h2>\n\n\n\n

    Google can tell from the file name what is in the image. It also makes it easier for you to find later.<\/p>\n\n\n\n