Building Your Author Website: Images on Your Website

DISCLAIMER: I am not a lawyer. Seek out a lawyer for advice on any of the below. KD Did It assumes no responsibility or liability for any errors or omissions in the content of this site. The information contained in this site is provided on an “as is” basis with no guarantees of completeness, accuracy, usefulness or timeliness . . .

---

Images are essential on a web page, from the graphics that make up the components of your page (hero, backgrounds, etc.) to the PR photos, product, ads, tables, charts, etc. Think about how boring a website would be without pictures!

Critical Considerations for Images

There are three points to bear in mind when using images for your website:

• They must be relevant to your post or brand
• They must be of the best quality possible
• They must be legally available to you to use

So, images. They add interest to text and illustrate concepts. Popular locations for images are at the top of a web page, image galleries, product photos, and to illustrate points made in text. I use images in my Word Confusions to visually define words.

Basic Code for an Image

Types of Images

There are several types of imagery you can use:

1. Stock Photos – pictures you can buy or that the creators share under a Creative Commons-type of license (see (Mostly) Free Image Sources for Your Website at the bottom of this post)
   • Those “free” images offered up by sites such as WIX or Adobe for you to use are only free for as long as you’re subscribing to their site.
2. Custom Photos – pictures you take or pay someone to take for you (see Tools to Use with Images at the bottom of this post)
3. User-generated content (UGC) – images and/or video of your products or services that’s shared or published by customers
4. Infographics – combines graphics and text to deliver a lot of information
5. Video – great for tutorials or to deliver a more complex message than a single image can do
6. Animation – ranges from an animated hero banner, navigation bar, dynamic background, creative motion and transition effects, etc.

Source: Ryan

Basic Image Rules

• Keep the original (BIG) images, preferably at 300ppi, in an originals folder
  • Make a copy of the original image, rename it for how you plan to use it — always work with a copy of the original image!
  • For use on the Internet, save your image files at 72ppi (pixels per inch)
  • You never want to make an image bigger as its quality downgrades, always use that original huge image to downsize
• If your program gives you a choice of color modes, save the file as RGB (for Internet; CMYK is a print mode)
• Make your images responsive to the size of the screen
• Define dimensions – width x height
  • Record the actual width x height, but
  • Use percentages in the CSS/HTML, so the size of the image will respond to the size of the screen — width:100%
• Use image size optimization – balances quality with compressing the file size thereby reducing the size of the file
  • While size, W x H in pixels (ppi), is important, it’s equally important that you pay attention to ratios — it’s all about proportions and how the viewer’s screen may alter the size
• Verify that you can legally use the image
• Give credit to the original source of your image
• Consider search engine optimization (SEOs) for your image — the process of improving the quality and quantity of website traffic to a website or a web page from search engines
  • Use a unique image, if you can
  • Use an alt and title tag
  • Include a caption, if the visual is of great importance to the content of the page, although the title can act as a caption
  • Give the image a name you’ll recognize (and can find) — it’s also easier for search engines to find! “5JkO795_img_XRK” doesn’t tell the search engine a dang thing!
    • I had started naming my word confusion post images according to what was in the photo. I quickly realized that was stupid. Now I name the file for the word it’s visually defining, which also makes that filename a keyword.
    • I save these in an ORIGINALS folder on my computer, so I always have the original (as a PSD file). Then open up the image and save it under a new name in your IMAGES folder (“Originals” is a subfolder within “Images”) to compress it. This way, if you screw something up, you have the original to go back to.
• Have a signed model release form for each identifiable person in a photo
• Image sitemaps help Google better index the images and improves the user experience and loading time of your website (Optimizing) — image sitemaps are most useful for image-heavy sites, e.g., stores, photographers, other artists, etc.

File Formats for the Web

You do want the best quality images possible. As I mentioned earlier, keep original images in a separate file within your IMAGES folder that way you can always go back to it if you don’t like the changes.

In general, the Internet accepts .webp, .jpg, .jpeg, .png, .bmp, and .svg. (A .psd file is a Photoshop file extension that allows you to keep layers separate.)

WebP (pronounced “weppy”) is very good and gaining popularity for a number of reasons — it combines several file formats, GIF’s motion, and PNG’s transparency. It compresses better without quality loss, keeping solid resolution — as long as you save it as a lossy as the lossless choice is actually bigger than my JPGs. (I’ve also found that sometimes my JPGs are smaller than my WebPs, and sometimes vice versa.) It’s recommended by Google (with major browsers adopting its support), and it will boost your SEO. The negative is that some site builders and apps may restrict you from uploading WebP files. WordPress has allowed .webp since version 5.8 — and doesn’t require a plugin. You can save .webp in Photoshop, but it’s a pain without the plugin.

JPEG (also JPG) (Joint Photographic Experts Group) is the most popular, primarily because it compresses to a smaller size than a PNG. While it’s great for color photography, products, blog, and background images, you’re better off waiting to save it as a JPEG file until the very end, as the file degrades with each save.

sRGB is a standard RGB (red, green, blue) color space for photography. Its color reproduction is stable across the Internet and minimizes the chances of unexpected color shifts. Wider color spaces are available in Adobe RGB or ProPhoto RGB. “When exporting images for the internet or printing photos, it is essential to save them in the sRGB color space. Many image editing software, like Adobe Lightroom, allow users to convert images to sRGB before exporting, ensuring that the final JPEG is saved in sRGB. This helps guarantee that colors appear as intended, both online and in print.” Do NOT convert sRGB to Adobe RGB. Source: sRGB

BMP (Bitmap) is an uncompressed raster graphics file format, which makes them ideal for displaying and storing high-quality images. Makes detailed images with crisp edges and no artifacts, which also means larger file sizes. You can convert a BMP to a PDF, which will reduce file size without reducing quality.

PNG (Portable Network Graphics) is great if you have any transparent areas in your image as well as icons, logos, and other graphics such as screenshots and other types of imagery where there’s not a lot of color data. It also maintains its quality. It does make for a bigger file size than a JPEG, which can slow download times.

GIF (Graphics Interchange Format) are best for animations. Do not use for static images as their file size is always larger even if it’s not an animation.

SVG (Scalable Vector Graphics) use mathematical formulas that stay crisp and clear regardless of any size changes or the device used to view them. They’re great for text and web graphics like logos, illustrations and charts. Screen readers can scan any words contained in SVG images. The most common vector formats are .eps, .ai, .svg, and .pdf. The browsers that support SVG include Safari, Opera, Firefox, Chrome, Samsung, Internet, Microsoft Edge, Android browser, Internet Explorer, and Baidu Browser.

Source: Hughes

Image Sizing

Bigger sizes slow the download speed which can drastically affect your SEO rating (save big files in your originals folder), so you’ll want to optimize your image file.

• Mention is made of a loading attribute with a lazy value which would allow larger files — and it requires knowledge of and access to JavaScript OR you can use a plugin

Image Optimization

Use optimization — a method of compressing the image that balances image quality with a smaller size — to decrease the file size of your image while maintaining quality. You’ll need to get the plugin, as these sites send your compressed images to your Media Library.

A number of sites recommended TinyJPG for compressing WebP, JPG, and PNG images. Also check out Imagify free for up to 200 images per month with a maximum upload size of 2MB per image. TinyIMG converts JPEG and PNG to WebP and vice versa, starting at $14 per month.

Smush has a free and a paid plan. Optimus compresses your images when they’re uploaded to your WordPress Media Library. There is a free and two paid versions; only the paid versions allow this automation on an https:// site and conversion for WebP images. Optimus HQ Pro allows you to use it on multiple sites. Now, EWWW Image Optimizer also automatically optimizes images when uploaded AND it can optimize previously uploaded JPG images. Nor do you have to worry about file sizes, as EWWW takes ’em all. To compress PNG, GIF, and WebP, you’ll need the paid version. WP Compress is great if you’re managing multiple client sites.

Most of these aforementioned plugins have a free level as well as paid plans. Some only charge if you exceed the maximum allowed number of images per month. Each has different limits on the file size they’ll compress.

• 

Ratios versus Pixels

Ratios are about proportions. It uses W x H, but only to ensure that the width and the height are proportionate to the required aspect ratio. For instance, a 16:9 ratio can be 2400 x 1600px. or 400 x 150px while a 1:1 ratio could be 150 x 150px or 1243 x 1243px.

Where a ratio is essential is in your web page parts as well as social media site parts, those profile pictures, banners, covers, book covers, thumbnails, etc.

Ratios truly are critical. If you use the ratio recommended for the different images you can use on an individual site, your image won’t be cropped, become pixelated, appear stretched out, etc.

I’m horrible at math, so I use a ratio calculator to figure out the height.

The image shape, using ratios, for each section of your site includes:

Shape	Common Ratios	Size	Commonly Used
Panoramic	16:9 *	1920 x 1080px	Hero image for standard widescreen sizes and used in presentations, widescreen TVs, and landscape images
Landscape	1.59:1	Minimum of a 1080px width	Different social media platforms, featured images for blog posts and other content
Rectangle	3:2 *	1080 x 720px	In print or on phones
	4:3	640 x 480px	Smaller screen sizes or placements
	4:3	2048 x 1536px	Full-screen takeovers
Square	1:1 **	1080 x 1080px is most common	Great for in-text images, sidebar ads, Instagram, favicons
Mobile responsiveness means the image is automatically resized, but not necessarily the way you’d want: * This size of image will be cropped, so keep the focus area of the subject in the middle ** An image with a 1:1 ratio will display just fine

Do remember that just because that a ratio is 16:9 doesn’t mean that it has to be 1920 x 1080px. It could just as easily be 400 x 225px. Just as a 1:1 ratio can be any size square, as long as the width and height are the same. It’s all about the proportion!

I recommend creating templates in the ratio/wXh sizes you’ll need, then you can re-size your image to fit those templates — and re-name the template to reflect what that particular image is for, e.g., bkCvrThbNl-500.jpg which would translate (for me!) to a book cover thumbnail for the book title that includes “500” OR prPhoto105x128.png translates to a PR photo that is 105 x 128px.

Make Your Images Responsive

Users are used to scrolling websites vertically on both desktop and mobile devices — but not horizontally! If the user is forced to scroll horizontally, or zoom out, to see the whole web page, it results in a poor user experience.

Use CSS/HTML to make those images responsive:

• Use relative width values, such as width: 100%.
• Try to avoid using large absolute positioning values (you tell it exactly where you want the image to be on the screen). It may cause the element to fall outside the viewport on small devices.

Save Yourself Legal Grief

Images are amazing and bring so much life to your website . . . and the most important thing you can do is ensure that you have permission to use it. Bookmark the post “Understanding Licensing” for a shot at saving yourself grief.

I cannot emphasize this enough. You must ensure that the image you want to use is:

• Available for your use — read the terms of its copyright license (“Understanding Licensing” will open your eyes to the variety of restrictions that exist on the use of images)
• Try to avoid using images with faces a person would recognize UNLESS you get a model release form signed by the person(s) in the photo.
  • People in the public eye don’t have that protection, ALTHOUGH, you CANNOT:
    • Use their image to mislead or deceive your customers
    • Make a false or misleading representation that goods or services have sponsorship, approval, performance characteristics, accessories, uses, or benefits
• Don’t use images from social media such as Instagram, TikTok, Pinterest, etc., without getting permission from the poster
• Some photos may be for “editorial use only” — in these instances, you can use the photo for a publication like a newsletter or a blog, but you can’t use the photo for a Facebook ad or a corporate home page
• A photo taken by yourself for your own use is good — a photo taken for a company or a client is NOT yours
• Get permission to use any GIFs

Information on United States copyright fair use law is available from the United States Copyright Office.

I know, the temptation to use a particular image can be overwhelming . . . so can that fine be overwhelming. Keep looking. Note that there is an upcoming post on Getting, Tracking, and Noting Permissions.

Include Credit for the Image

Always include credit for the image. At the very least, credit the creator of the image and the license it’s under. Include links wherever possible. It’s a great way to thank the creators for allowing us to use their images. Creators like illustrators, graphic artists, and photographers make their living from the images they create. Bringing traffic back to their sites ensures they have the opportunity for more people to see their work and potentially profit from being hired to create more work or sell a piece of work they’ve already created.

The ideal is to provide the title of the work, the author/artist/photographer of the work, the licensing information, and the address of the site where you found the work — with links to everything.

There is a wide range of styles giving credit throughout the Internet. Explore. See what suits your style while providing the minimum. And see image credit in the post on “Hyperlinks and Linking” for help in coding the credit, unless you use something like WordPress’ linking features.

There’s a very thorough section on attributions in the post “Understanding Licensing”.

If you need to “get permission from the image’s creator, ask if they have assigned their rights to someone else or if it was taken as part of their employment duties and they no longer own copyright in the image. Ask for a warranty or guarantee that they’re the image creator, still own the rights in the image, and have the right to provide you with permission to use it” (6 Best). There’s an upcoming post on Getting, Tracking, and Noting Permissions.

Stock photo agencies generally charge for an image, and there may be restrictions on how you can use it or how many times it can be used.

Be wary of images that claim to be royalty-free. It doesn’t necessarily mean they’re free to you.

Ensure that your images are accessible by including an alt and a title tag (see image link in the post on “Hyperlinks and Linking” for the coding).

Source: Poussard

Getting the Image from Your Computer to the Internet

There are several ways to upload your images to your website:

1. Go through the cPanel of your web host and upload it in an images file
2. Upload it through a site like WordPress to its Media Library
3. Use an FTP program to upload it
4. Image hosting services – there can be an annual fee, but you can upload some huge files
   • Create an account at Flickr, Imgur, Google Drive, or Apple iCloud and upload your image

Whichever way you choose, you’ll need to add the image’s URL to the actual page on which you want it to appear.

Return to top

Exploring More . . .

You may want to also look at more possibilities in “First Steps for a Website“, “Outline Your Website“, “Anatomy of a Web Page“, “Hyperlinks and Linking“, “Pages on the Front End of Your Website“, “Pages Behind the Scenes of Your Website“, “More Specific Disclosures for Your Website“, and “Navigation For Your Website“.

You may want to also look at more possibilities for fun on the homepage Building Your Author Website“. The posts on “Understanding Licensing” and “Inserting Diacritics” may be useful as well.

Return to top

Building Your Author Website is . . .

. . . an opportunity to do a bit more with your author’s website or blog and have some fun with it as well as getting a look at building it from the ground up with a comprehensive listing of the pages you’ll need . . . all while learning something about HTML (hypertext markup language) and CSS (cascading style sheets) — the easy way, lol.

If you found this post on “Images on Your Website” interesting, consider subscribing to KD Did It, if you’d like to track this post for future updates.

Return to top

Images on Your Website
Part of Web Building: Graphics
Definition: Representation of a drawing, photograph, lettering, illustration, map, table, infographic, graphics, chart, video, audio, anything that’s not text. Keep in mind the feel and colors of your brand — each choice will reflect on you and your website’s purpose. POST CONTENTS: Website Parts Behind-the-Scenes Background Hero Logo PR Photo Social Media Images Icons Fav Icon Other Icons Social Media Icons Content Images Blog Images Product Images Image Sitemap
Website Parts Behind-the-Scenes
Definition: The following are about the images that make up the anatomy, what’s “behind-the-scenes”, of your site’s content.
Background	Definition: Think of it as the blank page on which you’ll place everything — text and images.
Return to top or post contents	Your background is actually composed of two parts: the actual page and the background background. The backmost background can be a solid color, a print background, an image, animation, or a video. The page background is a different animal that sits on top of the background and is best as a solid color that contrasts well with any text — white is a classic. Consider your brand — your style and website template capabilities — when deciding on background. The best background for a website depends on its purpose and content. Be sure that your content can be easily read — use an accessible color generator to help determine the best contrasts. Ideally there will be high contrast between it and any text. Format sizes range from: Image Ratio Size (w x h) Entire web background 16:9 2400 x 1600px 1920 x 1080px Keep the file size under 20MB. Save as a WebP or JPEG file.
	WIXBlog has some great examples. —
Hero Image	Definition: A larger banner that is displayed at the top of the homepage — the first element that visitors will see above the fold.
Return to top or post contents	See hero in the post on web page anatomy. An issue you must pay attention to is where you place the text on the hero image. Make sure that the main focus of the image is not going to be hidden under the text. Format sizes range from: Image Ratio Size (w x h) Full or half height 16:9 up to 2560px wide * 1920 x 1080px * 1800 x 1013px * 1500 x 844px 1280 x 720px * Best when you need a crystal clear image Banner 16:9 1600 x 500px * Mobile hero – make it responsive! 2:3 800 x 1200px A great site for determining aspect ratio from pixels (or vice versa) is Aspect Ratio Calculator. Keep the file size 1MB or less — use a compression site. Save as a WebP or JPG file. Do NOT use a GIF on a mobile site. Source: Kirsch
	—
Logo	Definition: Represents you and your company, making it recognizable and memorable to both current and potential customers.
Return to top or post contents	Yes, you do want one. It could be an image or your initials. Try not to limit the logo to one book series. Consider the future, as you are most likely to branch out into more books/series. Typically logos can be found in the top left hand corner or the center of the website header and are usually clickable to help visitors return to the site’s homepage. To get started on your logo, and easily embed it on your site, you can use a logo maker that automatically generates a custom logo for you. Format sizes range from (ideally keep it to a maximum height of 100px for either width): Image Ratio Size (w x h) Square 1:1 100 x 100px Square logo in the top nav bar 1:1 160 x 160px 3:2 250 x 100px 2:3 250 x 100 Keep the file size under 200KB. Save as a WebP or PNG IF the logo has a transparent background. Source: Cavalier
	Logo generators can be found at: Adobe Express – rather limited in choices BrandCrowd – it was fun to explore it Canva Design.com Logo Vista Print
PR Photo	Definition: A picture of yourself and/or any co-workers.
Return to top or post contents	Framing is crucial: the subject(s) should be centered and fill as much of the frame as possible. This image will be used in SOOO many ways: On your website As the photo for any social media sites On the book jacket or cover Media release kits Emails Newsletters Save the original at 300ppi and as large as possible. You can always reduce copies to the sizes required. Save as a JPG, PNG, WebP file. A.k.a. headshot, publicity photo
	One of the best PR photos was of an artist friend. A friend of hers had been shooting photos for the fun of it, and this candid image was so perfect. So Karole. Check out Kelly Heck’s “5 Types of Photos & Portraits You Need NOW to Advertise Effectively”
Social Media Images	Definition: Social media sites also have their parts, i.e., banners, covers, profile photos, headers, landscape, portrait, thumbnails, logos, etc.
Return to top or post contents	It’s so irritating to upload images to a social media platform like Facebook, X, Instagram, WordPress, LinkedIn, etc., and find out that your graphic is too small or too big. Why can’t they put in the size requirements where you’re uploading the images? Tell you BEFORE and not AFTER you’ve worked on the image and uploaded it?? You really do want to get the size right, lest the company st-r-e-t-ch it to fit and your image is all blurry. CAUTION: Each social media company has guidelines about what you can and cannot do with your cover photo. Follow them. No question. You don’t want your site taken down because you didn’t follow their rules. Your cover is public. Covers can’t be deceptive, misleading, or infringe on anyone else’s copyright. You can’t encourage people to upload your cover to their personal timelines. The following social media sites and their format sizes are not complete but do give you an idea of what various sites want; they range from: Image Ratio Size (w x h) File Size Facebook Profile Picture 1:1 Desktop: 176 x 176px Smartphone: 196 x 196px Feature phone: 36 x 36px Cover 16:9 at least 400 x 150px 851 x 315px (loads fastest) < 100KB Best as sRGB.JPG format Profile pictures and cover photos with your logo or text, may be better as a PNG file. Your Page’s profile picture will be cropped to a circular shape in ads and posts, but will remain the same square shape when people visit your Page. Source: Pages Profile Picture and Cover Photo Dimensions Instagram Photo Between 1.91:1 and 4:5 1080 x 566px 1080 x 1350px LinkedIn Logo 1:1 Min.: 268 x 268px Best: 400 x 400px Max.: 3MB Cover 3:1 1128 x 376px Max.: 3MB Custom 1.91:1 Min.: +200 x as required Best: 1200 x 627px Max.: 3MB Only JPG or PNG. Pinterest The “organic” pins that have no paid promotion. Image Pin 2:3 1000 x 1500px < 20MB Save as JPG, PNG, TIFF, WebP, or BMP Snapchat Single image 9:16 1080 x 1920px Max.: 5MB Save as PNG, JPG A great deal more can be found at Ad Specifications & Guidelines. TikTok Profile 1:1 Min.: 20 x 20px Best: 200 x 200px Landscape 16:9 1920 x 1080px Portrait 9:16 1080 x 1920px Carousel Best: 9:16 1:1 4:5 Best: 1080 x 1920px
Square	1:1	1080 x 1080px
Stories	9:16	1080 x 1920px
X / Twitter
Profile Picture	1:1	400 x 400px	Max: 2MB
Header Photo, Banner	3:1	1500 x 500px	Max: 2MB
Images	1:1	Best: 1200 x 1200px
	1.91:1	Best: 1200 x 628px
In-stream Image	Desktop: 2:1, 1:1 Mobile: 2:1, 3:4, 16:9	600 x 335px 1200 x 675px	Photo Max.: 5MB GIF: 5MB to 15MB
Use JPG, PNG, and non-animated GIF.
GIFs	1.185:1	Res: <= 1280 x 1080 Pixels: <= 300 million <= 350 frames	<= 15MB
NOTE: Explore Geyser‘s post for more.
YouTube
Profile	1:1	Best: 800 x 800px Renders at 98 x 98px	Save as JPG, BMP, PNG, non-animated GIF
Banner	16:9	Bare Min.: 1235 x 338px Min.: 2048 x 1152px	Max.: 6MB
Video	16:9	Min.: 1280 x 720px Better: 1920 x 1080px
Thumbnail	16:9	1280 x 720px

In general:

• Aim for a file size of 400KB or less
• Save as a JPG, PNG, WebP, or GIF file

Icons Definition: A representative symbol that is (or becomes) easily recognizable — they also free up a lot of screen real estate! favicon Definition: Short for favorite icon, a favicon is the small image on the left of the website’s URL in a browser’s address bar. It may also appear in a viewer’s browser’s history and/or in their list of bookmarks.

Return to top or post contents

Some browsers use it as a desktop icon.

Format sizes range from:

Image	Ratio	Size (w x h)
Square	1:1	512 x 512px 32 x 32px 16 x 16px

Save as an ICO file or a PNG file if there is any transparency in the image.

It’s not a necessary image, but it is fun to see it up in the location bar, and it does contribute to your brand.

Keep the file size under 1KB.

In WordPress, install it by going to Appearance > Customize > Click the Customize tab on your theme > Site Identity > upload your favicon.

A.k.a. bookmark icon, shortcut icon, tab icon, URL icon, website icon

---

Other Icons Definition: A visual representation of a word or concept.

Return to top or post contents

Icons help break up text and how much reading your viewer has to do.

• A house icon indicates Home, a.k.a. your homepage
• A shopping cart means someone can choose a product and it gets added to the cart
• A magnifying glass indicates being able to do a search
• A gear may indicate “Settings” or “Account”
• The horizontal three-line “hamburger” is a menu, etc.

Format sizes range from:

Image	Ratio	Size (w x h)
Square	1:1	16 x 16px 20 x 20px 24 x 24px 32 x 32px
Square for a touchscreen	1:1	44 x 44px

Save as a PNG file.

Social Media Icons Definition: A small, simple square trademark image that represents a social media group, i.e., Facebook, Instagram, LinkedIn, YouTube, Snapchat, Pinterest, WhatsApp, X, etc.

Return to top or post contents

When a viewer sees them, they know what it means and what will happen when they click on it.

Use the approved images on your website including your home page, blog posts, emails, newsletters, and/or marketing collateral, if you have a presence on that social media.

All social media icons have copyright protection and are registered trademarks — you cannot muck about with them.

If using more than one icon, they must all be the same size (height, width, and resolution), equally prominent, and each company has a set rule on the amount of clear space between their icon and other elements.

Source: Zote

Find and download the approved social media icons at:

• Facebook
• Instagram, no small than 29 x 29px
• LinkedIn, no less than 21px online
• Pinterest
• Snapchat, at least 18px tall
• WhatsApp, has guidelines on which color combination to use where
• X, at least 32px wide
• YouTube, at least 24px (24dp for Anroid) tall

Link each icon to your social media address. Content Images Definition: Graphics you use for:

• Blog posts
• Products

Return to top or post contents

For example, WordPress has four default image sizes, these can be converted to suit your needs as you wish:

Image	Ratio	Size (w x h)
Thumbnail	1:1	150 x 150px
Medium	varies	300px x as required
Large	varies	1024px x as required
Full	varies	As large as your blog supports

In your post/page, you have the option of choosing how to align your images — left, center, or right:

Align	Places Image . . .	Text Wrapping
Left	Puts image to the left of any text.	Any text wraps on the right side of the image.
Center	Puts image in the center of the page.	Text appears above and below image; it does not wrap around it.
Right	Puts image to the right of any text.	Any text wraps on the left side of the image.

Aim for a file size of 400KB or less.

Save as a JPG, PNG, or WebP file. Blog Images Definition: The reader’s first impression of what they are about to read — be sure to choose an image representative of this topic.

Return to top or post contents

Images do include video, animation, charts, tables, and graphs!

You really do want a unique image for each blog, as it makes the article more interesting, and with luck, gets your message across — follow the notes on being safe legally, giving credit, image basics!

Depending upon your focus, you may want images that demonstrate steps in a process.

For my self-editing posts, I use a Pinterest pin that visually defines the words or concept of that post.

For book reviews, I add a cover of the book I’m reviewing.

Center the focus area so the image stays good on mobile devices.

Format sizes range from:

Image	Ratio	Size (w x h)
Portrait	3:4	900 x 1200px
Landscape	3:2	1200 x 630px
Landscape	4:3	1200 x 900px

Keep the file size at 150KB max.

Save as a JPG, PNG, WebP, or GIF file.

Product Images Definition: Product includes your book covers and any merchandise related to it.

Return to top or post contents

If you use an image of someone else’s product — get their permission! When I ask if I can use their image, I include links to previous posts that show how I’ve used others’ images, which also shows that I link back to their website, giving them credit and exposure.

You want excellent and very clear pictures. (There is an upcoming post on book covers.)
Format sizes range from:

Image	Ratio	Size (w x h)	ppi	File Size
Amazon Book Cover	1:1.6	1600 x 2560px Min.: 625 x 1000px	300ppi	< 50MB
Amazon Product	At least 1000px on longest side	Min.: 1000 x 1000px	At least 72ppi in high res	Save as sRGB or RGB in JPG, PNG, TIFF, GIF in <10MB
Amazon guidelines are used simply because it is the biggest storefront.

Aim for a file size of 400KB or less.

Save as a JPG, PNG, WebP, or GIF file.

Source: Criteria

Shopify has some specifics for products and collections. fImage Sitemap Definition: An XML sitemap that lists all the images, charts, graphs, etc., on a website and provides information about them to search engines, which indexes images and makes them more discoverable in search results.

You may also want to explore sitemaps in the post “Pages Behind the Scenes of Your Website”. You need an image sitemap IF your website is image-heavy, like a shop, photographer, or other artist.

Google is fine with your adding your image:image data to your regular XML sitemap or your creating a separate XML Images Sitemap.

Track information about each image (include this IN the image sitemap and document it in your own files) so search engines can better understand the image’s relevance and context, including:

• Image location – https://yourdomain.com/image.jpg (use only absolute URLs)
  • There is considerable back-and-forth on whether you should include different sizes in an image sitemap. Some say include the various sizes, so Google can decide which one to use while others say include only your best (biggest) image to reduce the impression of duplication and that Google only indexes one image anyway, if that . . . oy
  • OR, Google suggests annotating your URLs to indicate the desktop and mobile versions
• Caption
• Image size
  • Width x Height
    • Makes it easier for a website to, possibly, automatically adjust the size of the images to fit a smaller screen.
  • Resolution – Usually 72ppi and can be up to 300ppi

I keep a database of each post along with the images I use.

An image sitemap can hold 50,000 individual images for a total size (of the sitemap) of less than 1MB (and that includes the XML code). If you have more than 50,000 (or more than 1MB of space used), you’ll need additional image sitemaps.

Make your image sitemap accessible by:

• Adding the sitemap(s) URL(s) in your robots.txt file
• Upload the XML file(s) to Google Search Console, Bing Webmaster Tools, and other similar services through their respective webmaster tools. That will help these search engines crawl it more quickly.
• Adding a link in your main sitemap index file.

After submitting your image sitemap, regularly update your image sitemap whenever you add or remove images from your website to ensure that search engines are always up to date with your latest content.

Source: Optimizing, Image Sitemaps

Blogger, Wix, and WordPress have differing ways of adding <meta> tags:

• Blogger has added a new feature that allows you to add meta tags
• Wix allows you to add meta tags through your site’s SEO Dashboard
• WordPress requires you to go into the header.php template file in your WordPress Theme or download the Yoast plugin

Return to top or post contents

C’mon, get it out of your system, bitch, whine, moan . . . which website issues are your pet peeves? Also, please note that I try to be as accurate as I can, but mistakes happen or I miss something. Email me if you find errors, so I can fix the . . . and we’ll all benefit!

Satisfy your curiosity about other Working Your Website posts in its homepage or more generally explore the index of self-editing posts. You may also want to explore Formatting Tips, Grammar Explanations, Linguistics, Publishing Tips, the Properly Punctuated, Word Confusions, and Writing Ideas and Resources.

Return to top or post contents

Resources for Images on Your Website

Some of these links may be affiliate links, and I will earn a small percentage, if you should buy it. It does not affect the price you pay.

“6 Best Practices for Legally Using Google Images.” Coprightlaws.com. 14 Dec 2022. Accessed 1 Mar 2024. <https://www.copyrightlaws.com/copyright-tips-legally-using-google-images/>. And any other images!

“About Common Sizes for Responsive Display Ads.” Google Ads Help. Google. 2024. Accessed 7 Mar 2024. <https://support.google.com/google-ads/answer/7031480?hl=en>.

Austin, Katie. “Choosing Website Images That Make an Immediate Visual Impact.” Blog. Edge of the Web. 18 Aug 2023. Accessed 1 Mar 2024. <https://www.edgeoftheweb.co.uk/blog/perfect-website-photos>.

Duncan, Melanie. “What is a Brand? (And Why Do I Need One?)” MelanieDuncan.com. n.d. Accessed 6 Mar 2024. <http://www.melanieduncan.com/brand-need-one/>.

Editorial Staff. “9 Best Canva Alternatives for Website Graphics.” WPBeginner. Last updated 25 Mar 2024. Accessed 25 Mar 2024. <https://www.wpbeginner.com/showcase/best-canva-alternatives/>.

Friedlander, Joel. “Practical Tips for Using Photos in Your Print-on-Demand Books.” The Book Designer. n.d. Accessed n.d. <http://www.thebookdesigner.com/2011/02/24-practical-tips-for-using-photos-in-your-print-on-demand-books/>.

Geyser, Werner. “The Ultimate Twitter Image Size Guide for 2024 (Updated).” Influencer MarketingHub. Last updated 30 Jan 2024. Accessed 30 Mar 024. <https://influencermarketinghub.com/twitter-image-size/>.

“How To: Responsive Images.” W3Schools. n.d. Accessed 18 Mar 2024. <https://www.w3schools.com/howto/howto_css_image_responsive.asp>.

Hughes, John. “What’s the Best Image Format for Your Website? JPEG vs PNG vs GIF vs WebP.” Blog. ThemeIsle.com. Updated 5 Dec 2023. Accessed 7 Mar 2024. <https://themeisle.com/blog/best-image-format/#gref>.

“Image Sitemaps.” Documentation. Google. Last updated 8 Feb 2024. Accessed 7 Mar 2024. <https://developers.google.com/search/docs/crawling-indexing/sitemaps/image-sitemaps>.

Kirsch, Katrina. “Ultimate Guide to Hero Images [Best Practices + Examples].” Blog. HubSpot. 2 June 2021. Accessed 19 Mar 2024. <https://blog.hubspot.com/marketing/hero-image>.

Kudler, David. “Preparing Images for Your e-Book.” The Book Designer. 14 Oct 2014. Accessed 2 Mar 2024. <https://www.thebookdesigner.com/preparing-images-for-your-e-book/>.

Meir, Dana. “What is a Lightbox in Web Design and How Do You Create One.” WIXBlog. 13 Dec 2023. Accessed 28 Mar 2024. <https://www.wix.com/blog/what-is-a-lightbox-in-website-design>.

“Optimizing Images for Search Engines: The Role of Image Sitemaps.” MarketBrew.ai. n.d. Accessed 7 Mar 2024. <https://marketbrew.ai/a/image-sitemap-seo>.

Poussard, Salena. “9 Golden Rules Of Choosing Images for Your Website.” OSC Web Design. n.d. Accessed 1 Mar 2024. <https://oscwebdesign.biz/rules-choosing-images-website/>.

Ryan, Emma. “Top 8 Types of Website Imagery for Your Website.” Designing Websites. WebsiteBuilderExpert. 18 Oct 2022. Accessed 29 Mar 2024. <https://www.websitebuilderexpert.com/designing-websites/website-imagery/>.

“Understanding sRGB: The Standard color Space for Photography.” PRO EDU. 10 Jan 2024. Accessed 19 Mar 2024. <https://proedu.com/blogs/photography-fundamentals/understanding-srgb-the-standard-color-space-for-photography>.

Weinstein, Mindy. “Free Images: 41 Best Stock Photo Sites to Find High-Quality.” Search Engine Journal. 30 Apr 2021. Accessed 1 Mar 2024. <https://www.searchenginejournal.com/free-images/402312/>.

“What Criteria Does My eBook’s Cover Image Need to Meet?” Kindle Direct Publishing. Amazon. n.d. Accessed 29 Mar 2024. <https://kdp.amazon.com/en_US/help/topic/G200645690>.

Zote, Jacqueline. “Your Ultimate Guide to Social Media Icons.” Sprout Social. 25 June 2019. Accessed 7 Mar 2024. <https://sproutsocial.com/insights/social-media-icons/>.

Return to top or post contents

(Mostly) Free Image Sources for Your Website

• 1 Million Free Pictures
• Burst – gives permission to modify and use them for commercial purposes
• DesignersPics.com
• Europeana Collections (Europe’s digital library) — is in the public domain using is under the CC0 license.
• Fancycrave – free and premium
• Flickr – always check their licensing permissions!
• Foca Stock – photos and videos under CC0
• Foodiesfeed – lots of food photos under CC0
• Free Stock Photos.biz – some are free under various Creative Commons licenses; some are not.
• Gratisography – CC0 and attribution required
• Google Images – some free, some not
• Islamic Art Collections – allows free use of his lo-res images for educational, non-commercial applications, otherwise there is a small handling fee
• iStockPhotos
• kaboompics
• Little Visuals – free high-res images
• Metropolitan Museum of Art – all their public domain images are shared under the CC0 license
• Negative Space
• New Old Stock
• PD Pics – public domain images
• Pexels
• picjumbo
• Pickup Image – free high-res images
• Pixabay
• Public Domain Archive
• Reshot – includes SVG and PNG
• Skitterphoto – all are in the public domain
• The Smithsonian – welcomes you to make fair use of the Content as defined by copyright law
• SplitShire
• StockSnap.io
• Unsplash
• Wikimedia Commons

Tools to Use with Images

Prices are effective as of March 2024.

Tools that help you edit and create beautiful images for blog posts, infographics, presentations, and even Facebook posts.

These are some of the best tools to create better images for your blog posts. Feel free to use the links to jump to any tool that you’re curious about.

• Adobe Express, a Photoshop alternative with a lower learning curve that’s based in the cloud; free to use
• Affinity Photo 2, photo editing for people who need advanced features (and a steeper learning curve) and offers a whole suite of software to meet the needs of illustrators, designers, publishers, and more. One-time purchase price. Available for Windows and Mac.
• Canva, a beginner-friendly version of Adobe Photoshop, free or $14.99 for the Pro plan
• Fotor focuses on photo editing and design. It has a free plan, although it doesn’t include AI.
• GIMP is a powerful open-source alternative to Photoshop as a full-featured app for experienced graphic designers free of charge.
• Pablo by Buffer
• Picmaker creates images for YouTube and social media. Free and pre-paid plans.
• PicMonkey is good for YouTube and social media and includes templates for logos, banners, thumbnails, and more. Has a free version and a paid plan.
• Piktochart, an online infographic maker with over 600 professional templates that let you quickly create infographics, presentations, posters, and reports. Free for basic features and limited storage; assorted pay plans open it up.
• Pixlr, a beginner-friendly Photoshop makes it more powerful than Canva. Create new images using AI by writing a description of the type of image you need, and Pixlr will make it for you automatically. Free version has ads and no AI.
• Snagit, great for screenshots you can annotate and webcasts of the software you write about. One-time purchase price unless you want access to stamps, templates, themes, and photos, which will require an ongoing subscription. Available for Windows and Mac.
• Visme, more features than Canva, including interactive content such as charts, maps, and data widgets — and with a steeper learning curve.

Return to top or post contents

Pinterest Photo Credits

Photographers Enjoy the Numerous Wildlife Photographic Opportunities by Hillebrand Steve, US Fish and Wildlife Service, is in the public domain, via Picryl.